5.3. Controlling the Cascade
As you can see, the more CSS styles you create, the greater the potential for formatting snafus. For example, you may create a class style specifying a particular font and font-
, but when you apply the style to a paragraph, nothing happens! This kind of problem is usually
to the cascade. Even though you may think that directly applying a class to a tag should apply the class's formatting properties, it may not if there's a style with greater specificity.
You have a couple of options for dealing with this kind of problem. First, you can use
(as described in the box above) to make sure a property
approach is a bit heavy handed, though, since it's hard to predict that you'll never, ever, want to overrule an
property someday. Read on for two other cascade-tweaking solutions.
5.3.1. Changing the Specificity
The top picture in Figure 5-4 is an example of a specific tag style losing out in the cascade game. Fortunately, most of the time, you can easily change the specificity of one of the conflicting styles and save
for real emergencies. In Figure 5-4 (top), two styles format the first paragraph. The class style
isn't as specific as the
's properties don't get applied to the paragraph. To increase the specificity of the class, add the ID
to the style:
5.3.2. Selective Overriding
You can also fine-tune your design by
overriding styles on certain pages. Say you've created an external style sheet named
that you've attached to each page in your site. This file contains the general look and feel for your sitethe font and
of <h1> tags, how form elements should look, and so on. But maybe on your home page, you want the <h1> tag to look slightly different than the rest of the sitebolder and bigger, perhaps. Or the paragraph text should be smaller on the home page so you can
in more information. In other words, you still want to use
of the styles from the
file, but you simply want to override a few properties for some of the tags (<h1>, <p>, and so on).
Figure 5-4. Even though a class is applied to a specific taglike the first paragraph in the top imageits properties may not always have an effect. In this case, the paragraph's inside a <div> tag with an ID of #sidebar, so the
selector #sidebar p is more specific than the .intro classa specificity of 101 vs. 10. The solution: Make the .intro class more specific by adding the ID before it#sidebar p.introas in the bottom example.
One approach is to simply create an internal style sheet listing the styles that you want to override. Maybe the
file has the following rule:
font-family: Arial, Helvetica, sans-serif;
You want the <h1> tag on the home page to be bigger and red. So just add the following style in an internal style sheet on the home page:
In this case, the <h1> tag on the home page would use the font Arial (from the external style sheet) but would be red and 36 pixels tall (from the internal style).
Make sure you attach the external style sheet
the internal style sheet in the <head> section of the HTML. This ensures that the styles from the internal style sheet win out in cases where the specificity of two styles are the same, as explained in Section 5.2.1.
Another approach would be to create one more external style sheet
for examplethat you attach to the home page in addition to the
style sheet. The
file would contain the style
and properties that you want to overrule from the
file. For this to work, you need to make sure the
file in the HTML, like so:
<link rel="stylesheet" type="text/css" href="css/global.css">
<link rel="stylesheet" type="text/css" href="css/home.css">
Or, if you're using the @import method:
Another way to fine-tune designs on a page-by-page basis is to use different ID names for the <body> tag of different types of pagesfor example #review, #story, #homeand then create descendent selectors to change the way tags on these types of pages look. This technique's discussed in Section 9.1.1.