Browsed by
Category: css Principles

Efficient CSS with shorthand properties

Efficient CSS with shorthand properties

Efficient CSS with shorthand properties I get a lot of questions about CSS from people who aren’t crazy enough to have spent the thousands of hours working with CSS that I have. Sometimes I’m asked to take a look at something they’re working on to see if I can figure out why it doesn’t work as expected. When I look at their CSS I often find that it’s both bloated and unorganised. One of the reasons for using CSS to…

Read More Read More

Organize CSS Properties Alphabetically

Organize CSS Properties Alphabetically

Which example would you think is faster to find the margin-right property? Example 1 print? div#header h1 { z-index: 101; color: #000; position: relative; line-height: 24px; margin-right: 48px; border-bottom: 1px solid #dedede; font-size: 18px; } div#header h1 {z-index: 101;color: #000;position: relative;line-height: 24px;margin-right: 48px;border-bottom: 1px solid #dedede;font-size: 18px;} Example 2 print? div#header h1 { border-bottom: 1px solid #dedede; color: #000; font-size: 18px; line-height: 24px; margin-right: 48px; position: relative; z-index: 101; } div#header h1 {border-bottom: 1px solid #dedede;color: #000;font-size: 18px;line-height: 24px;margin-right: 48px;position:…

Read More Read More

CSS Design Principles

CSS Design Principles

CSS design principles CSS3 as CSS2 and CSS1 before it, is based on a set of design principles: Forward and backward compatibility. CSS2 user agents will be able to understand CSS1 style sheets. CSS1 user agents will be able to read CSS2 style sheets and discard parts they don’t understand. Also, user agents with no CSS support will be able to display style-enhanced documents. Of course, the stylistic enhancements made possible by CSS will not be rendered, but all content…

Read More Read More

100% height model css?

100% height model css?

I had been looking around for a way to accomplish fixed header and footer on a website when scrolling, and somehow i haven’t got it right with background attachment: fixed, neither i got it with absolute position… I have a main Div called wrapper, inside there are three main Divs: header, content and footer, and each one of them has sub Divs inside for the content of each one. So the structure goes something like this in general terms: body[…

Read More Read More

!important ignored by IE

!important ignored by IE

Normally in CSS whichever rule is specified last takes precedence. However if you use !important after a command then this CSS command will take precedence regardless of what appears after it. This is true for all browsers except IE. An example of this would be:margin-top: 3.5em !important; margin-top: 2em So, the top margin will be set to 3.5em for all browsers except IE, which will have a top margin of 2em. This can sometimes come in useful, especially when using…

Read More Read More