HTML, XHTML and CSS All-In-One for Dummies - Andy Harris [102]
2. Local style: A local style (defined with the style attribute in the HTML) has the highest precedence of developer-defined styles. It overrules any other styles.
3. id: A style attached to an element id has a great deal of weight because it overrides any other styles defined in the style sheet.
4. Class: Styles attached to a class override the style of the object’s element. So, if you have a paragraph with a color green that belongs to a class colored blue, the element will be blue because class styles outrank element styles.
5. Element: The element style takes precedence over any of its containers. For example, if a paragraph is inside a div, the paragraph style has the potential to override both the div and the body.
6. Container element: divs, tables, lists, and other elements used as containers pass their styles on. If an element is inside one or more of these containers, it can inherit style attributes from them.
7. Body: Anything defined in the body style is an overall page default, but it will be overridden by any other styles.
In the overRide.html example, the id rule will take precedence, so the paragraph will display in green.
If you want to see a more complete example, look at cascadingStyles.html on the CD-ROM. It extends the whatColor example with other paragraphs that demonstrate the various levels of the hierarchy.
Precedence of style definitions
When you have styles defined in various places (locally, page level, or externally) the placement of the style rule also has a ranking. Generally, an external style has the weakest rank. You can write a page-level style rule to override an external style.
You might do this if you decide all your paragraphs will be blue, but you have one page where you want the paragraphs green. Define paragraphs as green in the page-level style sheet, and your page will have the green paragraphs without interfering with the other page’s styles.
Page-level styles (defined in the header) have medium weight. They can override external styles but are overridden by local styles.
Locally defined styles (using the HTML style attribute) have the highest precedence, but they should be avoided as much as possible. Use classes or IDs if you need to override the page-level default styles.
Using Conditional Comments
While we’re messing around with style sheets, there’s one more thing you should know. Every once in a while, you’ll encounter a page that needs one set of style rules for most browsers and has some exceptions for Internet Explorer.
Most of what you know works equally well in any browser. I’ve focused on the established standards, which work very well on most browsers. Unfortunately, Internet Explorer (especially before version 7) is notorious for not following the standards exactly. Internet Explorer (IE) doesn’t do everything exactly right. When IE had unquestioned dominance, everybody just made things work for IE. Now you have a bigger problem. You need to make your code work for standards-compliant browsers, and sometimes you need to make a few changes to make sure that IE displays things correctly.
Coping with incompatibility
This has been a problem since the beginning of Web development, and a number of solutions have been proposed over the years, such as:
♦ “Best viewed with” disclaimers: One common technique is to code for one browser or another and then ask users to agree with your choice by putting up this disclaimer. This isn’t a good technique because the user shouldn’t have to adapt to you. Besides, sometimes the choice is out of the user’s hands. More and more small devices (such as PDAs and cellphones) have browsers built in, which are difficult to change. IE isn’t available on Linux machines, and not everyone can install a new browser.
♦ Parallel pages: