Understanding the C in CSS
Now 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
July 19th, 2007 at 5:04 am
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
July 19th, 2007 at 3:59 pm
Good tutorial although I don’t think anybody still uses embedded styles any more.
July 19th, 2007 at 5:02 pm
Agree with Jon B. Embedded/inline styles are history, and you are asking for a world of pain if you still do that.
July 19th, 2007 at 5:17 pm
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.
July 19th, 2007 at 5:22 pm
[…] 2007 I stumbled across a great article on Digg earlier today, and just had to post about it. Understanding the C in CSS is a handly little reference for CSS precedence rules. Great for beginners and veterans alike. And […]
July 19th, 2007 at 5:48 pm
Thanks..seems that I need to practice more and more..hmm..
July 19th, 2007 at 8:35 pm
@ 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.
July 20th, 2007 at 12:55 am
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.
July 20th, 2007 at 1:49 am
I think this is either a badly titled articul or some has missed the point of the ‘C’ in ‘CSS’…
July 20th, 2007 at 7:47 am
@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.
July 20th, 2007 at 9:12 am
using external style sheet is the best solution even for mock-up
July 20th, 2007 at 9:14 am
@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.
July 20th, 2007 at 12:09 pm
The “Cascade” Effect in “Cascading Style Sheets”…
Explanation of the “C” in “CSS” with specificity…
……
July 20th, 2007 at 9:07 pm
Every instance of “i.e.” should instead read “e.g.”
July 31st, 2007 at 5:58 pm
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.
August 2nd, 2007 at 5:01 pm
@Bryan because every page has its own colour scheme.
Was working on photolog.org, and embedded CSS came in useful.
August 15th, 2007 at 5:58 pm
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.
August 17th, 2007 at 2:40 am
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.
August 20th, 2007 at 6:12 am
“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)