(Today btw, is 9-9-09 .. for all you numerologists.) Anybody who has ever used Cascading Style Sheets (CSS) to style a web page has likely experienced the frustration that comes when a particular style refuses to render the way you want.
Understanding the concepts outlined here will help troubleshoot any CSS rendering problem .. much better than banging your head against the wall (.. a technique that seems to provide limited success).
Three rendering principles determine how CSS styles are applied to a web page, and which style(s) take precedence. They are:
- The Cascade
- Inheritance
- Specificity
For reference sake, here's a quick review of basic CSS syntax » selector {property: value}
For example » p {color: green} .. will apply a value of 'green' to the color property for the text contained in a paragraph ('p' = paragraph selector). This is called a CSS "rule".
Here's a brief overview of the 3 rendering principles listed above that determine how CSS rules are applied to a web page:
I. THE CASCADE
Styles are applied in the following "cascading" order: External style sheet » Embedded styles » Inline styles.
A given HTML page can contain one, two, or all three (or none). Styles lower down the cascade normally supplement (add to) styles higher up the cascade. If a styling conflict exists however, styles lower down take precedence.
In other words, the last style applied wins (.. given equal specificity). Here's a brief description of each type of cascading style mentioned above.
1. External style sheets (fileName.css).
These styles can be applied to an unlimited number of HTML pages .. which link to the CSS file. Very powerful, since they allow you to change the look-n-feel of an entire site by modifying a single file. Web pages normally link to only a single external style sheet, tho it's possible to link to multiple external style sheets .. which also cascade, depending on the order they're listed. Large professional sites often use multiple external style sheets.
2. Embedded styles
They are found within the head tag of an HTML page. These styles are enclosed within the 'style' tag <style> and apply only to the HTML page in which they are found. These styles supercede any styles contained within an external style sheet that may conflict with them (.. given equal specificity).
3. Inline styles
Inline styles are applied to individual HTML elements/tags, using the "style" ATTRIBUTE. Note that this is not the same as the style ELEMENT applied to embedded styles mentioned above, tho it's spelled the same way. Inline styles supercede all others that conflict with them .. since the last style applied wins. Plus, they carry maximum specificity (which we'll discuss later).
••• today's entry continues here below •••
II. INHERITANCE
Inheritance is an easy concept to understand. Properties of rules applied to parent tags (elements) will also be applied to their child tags (.. long as those specific properties inherit). Styles applied directly to child elements supercede those applied to their parent elements.
Inheritance allows you to keep your CSS code light-weight by applying global styles (once) to parent elements and having those styles 'broadcast' down to their child elements .. instead of styling each child element individually.
For example, you can apply a font-family styling of 'Verdana' to the <body> tag/element .. and have that styling 'inherit' down to affect the style of every text-based element in your page, or even your entire web site .. by merely styling that one tag/element.
You can then overwrite styling applied to parent elements (when desired) by applying more specific styles directly to the child elements.
III. 
SPECIFICITY
When two rules conflict, the most specific rule wins. Specificity is responsible for more CSS frustration than any other rendering principle. If you're having trouble getting a particular selector to render the way you want, the problem is usually specificity.
Inline styles applied directly to an individiual element via the style attribute are most specific of all. ID selectors are the next-most specific. Then comes » Class selectors. Lastly » Element selectors.
To evaluate the relative specificity of a given rule, count the number of inline attributes, IDs, classes and elements. You can then calculate a numeric value of a particular CSS rule by totaling the values of its various components .. using the following values:
- Inline style attributes = 1,000
- ID selectors= 100 [ ID selectors begin with a '#' ]
- Class selectors= 10 [ Class selectors begin with a period or 'dot' ]
- Element selectors = 1
Add the values of the various components for a given rule to calculate its specificity. Increasing the specificity of a particular rule is a common way to "force" your desired styling effect. To do this, you need to understand how decendant selectors work, which is beyond the scope of this guide (tho not difficult to understand).
Note that an embedded style with low-specificity will LOSE to a style contained in an external style sheet that has higher-specificity. For the embedded style to win, it needs to have at least the SAME specificity (as the conflicting external style). The more-specific rule wins, regardless of where it happens to be found in the cascade.
This is a quick-n-dirty guide to troubleshooting CSS rendering problems. Whole books have been written on the subject. Speaking of which, here's a good one » McFarland's Missing Manual .. 2nd edition, released Sept, 2009.
For more along these lines, here's a Google search preconfigured for the query » troubleshooting css rendering problems cascading style sheets inheritance specificity
