Section 5.3. Controlling the Cascade

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- size , but when you apply the style to a paragraph, nothing happens! This kind of problem is usually related 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 !important (as described in the box above) to make sure a property always applies. The !important approach is a bit heavy handed, though, since it's hard to predict that you'll never, ever, want to overrule an !important 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 !important for real emergencies. In Figure 5-4 (top), two styles format the first paragraph. The class style .intro isn't as specific as the #sidebar p style, so .intro 's properties don't get applied to the paragraph. To increase the specificity of the class, add the ID name to the style: #sidebar .intro .

5.3.2. Selective Overriding

You can also fine-tune your design by selectively overriding styles on certain pages. Say you've created an external style sheet named global.css that you've attached to each page in your site. This file contains the general look and feel for your sitethe font and color 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 wedge in more information. In other words, you still want to use most of the styles from the global.css 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 descendent 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 global.css file has the following rule:

h1 {
	    font-family: Arial, Helvetica, sans-serif;
	    font-size: 24px;
	    color: #000;
	}

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:

h1 {
	    font-size: 36px;
	    color: red;
	}

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).

Another approach would be to create one more external style sheet home.css for examplethat you attach to the home page in addition to the global.css style sheet. The home.css file would contain the style names and properties that you want to overrule from the global.css file. For this to work, you need to make sure the home.css file appears after the global.css 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:

<style type="text/css">
	@import url(css/global.css);
	@import url(css/home.css);
	</style>