Understanding the C in CSS
July 19, 2007 – 1:10 amNow that ThemBid.com is implementing codename “secret sauce“, we needed a brush up on the C in CSS, since the new project involves whole portions of the site needing style overrides.
If you are not fully utilizing the cascading feature of CSS, or you just need a quick brush up, then you need to review this article. These techniques will help you avoid duplication and make it easier to maintain your styles.
Precedence
The first step is to understand how the order of the cascade is determined.
1. Inline Style(s)
When the style is defined as an attribute to an html tag.
e.g.
Heading
2. Embedded Style(s)
When the style is defined in the html page within style tags.
e.g.
3. External Style Sheet(s)
When the style is defined in an external file.
e.g.
Note that if you link to multiple style sheets they will cascade in order of appearance in between the head tags.
4. User Style Sheet
Most browsers allow the user to change the some elements of the browser style sheet, such as font size, type, color , link colors and page background color.
5. Web Browser Style Sheet
Each web browser provides a default style sheet. Unfortunately these vary from browser to browser. That is why we have so much trouble making consistent CSS based designs across browsers. A good article that explains this issue and some solutions is here.
Practice
Now that you understand the ordering, you can effectively employ the cascade. Following is a simple example to help you visualize how it works.
Say you want to make sure that all the fonts in your website are of the same type face; however, there are whole section of your site where you need to override those defaults.
You would want to define the font type face property in the first external style sheet listed in your array of links. Then you would define special cases in subsequent linked style sheets.
e.g.
Note: I do not recommend using embedded or inline style sheets because then you decentralize your styles and reduce maintainability. However; I use these frequently when producing mock ups because I can make changes faster this way. After I get the page looking how I want, then I re-factor the inline styles to linked style sheets.
Next I would create a global template that automatically links a base style sheet with the default font as shown above. When I needed to override I would either add a new class and specify the override in the attribute like so:
Heading
Or alternatively, I would create a new style sheet and add that as a link under the default (in the above example the special1.css link would be located in the template that is being decorated by the global template). In that case, you would need to close your
tag inside the decorated templates. This method is useful if you have a very large style sheet and whole sections of your site override a good majority of the default style sheet or when you have to employ hacks to achieve consistency across browsers.When you want to get more in depth I recommend:
W2 Schools Introduction to CSS - Look at the left menu for varying levels of tutorials.
The W3 Main Resource for CSS
Interesting Thread from Webmaster World
19 Responses to “Understanding the C in CSS”
Why did you put User Style Sheet on the 4th place? In fact it’s the first, but can be affected by the ‘important’ rules
By SergeyT on Jul 19, 2007
Good tutorial although I don’t think anybody still uses embedded styles any more.
By Jon B on Jul 19, 2007
Agree with Jon B. Embedded/inline styles are history, and you are asking for a world of pain if you still do that.
By Michael Ott on Jul 19, 2007
Inline style and embedded style are good for mock-up like the author stated. I use the above a lot because I want to see quick change, and then later I add the same quick change to the global style sheet.
By BLOGMYWAY.org on Jul 19, 2007
Thanks..seems that I need to practice more and more..hmm..
By dxblogger on Jul 19, 2007
@ Michael Ott and Jon B: Embedded and inline style sheets are still very useful. Imagine having a site where every page has a customised colour scheme. You would control typography via a global stylesheet, and colour scheme via an embedded style sheet.
By Lucian Teo on Jul 19, 2007
This is OK as a high-level introduction to style precedence, but not really to ‘the C in CSS’; the cascade is about much more than style precedence, it’s also about sorting style declarations by explicit weight, specificity and order.
To Jon B and Michael Ott: there are still plenty of reasons you might want to use embedded stylesheets; sometimes you just want to apply a few styles to a specific page, and don’t want the extra hits to the server of calling a linked stylesheet. There’s no excuse for inline styles, however.
By Peter Gasston on Jul 20, 2007
I think this is either a badly titled articul or some has missed the point of the ‘C’ in ‘CSS’…
By Rick Nunn on Jul 20, 2007
@Peter,et al:
Actually, there *is* an excuse for inline styles - newsletters. Some web based email clients only allow inline styles, and actually disable embedded/external stylesheets (as well as js of course). The option to use inline styles (or embedded) wouldn’t be there if there wasn’t a need for it.
By Carl on Jul 20, 2007
using external style sheet is the best solution even for mock-up
By riper on Jul 20, 2007
@Lucian
Why would you want to send the style down the pipe every time the user looks at the page? Suppose you are right and each section of a site has a different color scheme. Each time I visit that page, I will have to download that embedded style once again. It is just redundant, and a waste of bandwidth. Download the style sheet once and not have to worry about downloading the styles repeatedly.
Of course, I suppose you could argue that what happens if the user only views say 1 or 2 page out of a 10 page website? Then they download a style sheet full of unused styles and therefor irrelevant bytes.
Still my choice would be external style sheets, compressed, striped, and gzipped.
By bryan on Jul 20, 2007
Every instance of “i.e.” should instead read “e.g.”
By Literate on Jul 20, 2007
As others have noted specificity is critical. Especially if you talk about various levels of compliance. Some CSS IE hacks rely on specificity to work properly. The higher levels ( less supported versions ) of CSS have more sophisticated selectors.
By Ozten on Jul 31, 2007
@Bryan because every page has its own colour scheme.
Was working on photolog.org, and embedded CSS came in useful.
By Lucian on Aug 2, 2007
It is not necessary to use embedded styles to achieve a different color scheme on each page. This can be done through the use of IDs and CLASSes in the body tag.
By Jason on Aug 15, 2007
You just forgot two details: SELECTORS and !important;
If I’d to have “body div { background: #000; }” in my external sheet and “div { background: #f00; }” in my embedded sheet the background would be still black, your page suggests it would be red.
Sorry but when you are trying to simplify you don’t just rip the important parts out completely.
Also, RE: W2 Schools Introduction to CSS - Look at the left menu for varying levels of tutorials.
If you are going to link to some errored resource with a lot of omissions like your tutorial at least spell their name right.
Zoffix Znet.
By Zoffix Znet on Aug 17, 2007
“There’s no excuse for inline styles, however.”
not true
If you are sending output to cell-phones, many of them do not support linked CSS, also with dynamic page output via PHP or ASP it doesnt matter from an administrative context, you can still have the centralized control over the CSS for the entire site, when the page is generated, the appropriate inline or embedded style can be output.
why?
If you dont want people automatically ripping off your development, you can embed it directly inline!
There are other reasons though ( I’ll leave them as an exercise to the reader)
By steve on Aug 20, 2007