• Choose a category
• All
• Classic-Fiction

id = ”bold”>

This paragraph has a class and an ID

Take a look at the page, and you’ll notice some interesting things:

♦ Everything is white on a black background. These styles were defined in the body. Paragraphs without specific colors will inherit the colors of the parent element (in this case, the body). There’s no need to specify the paragraph colors because the body takes care of them.

♦ Paragraphs all use the fantasy font. I set the paragraph’s font-family attribute to fantasy. All paragraphs without an explicit font-family attribute will use this rule.

♦ A class is used to define italics. The second paragraph is a member of the italicized class, which gives it italics. Because it’s also a paragraph, it gets the paragraph font, and it inherits the color rules from the body.

♦ The bold ID only identifies font weight. The third paragraph has all kinds of styles associated with it. This paragraph displays all the styles of the second, plus the added attributes of its own ID.

In the cascadingStyles.html example, the final paragraph inherits the font from the generic p definition, italics from its class, and boldfacing from its ID. Any element can attain style characteristics from any of these definitions.

Hierarchy of styles

An element will display any style rules you define for it, but certain rules are also passed on from other places. Generally, this is how style rules cascade through the page:

♦ The body defines overall styles for the page. Any style rules that you want the entire page to share should be defined in the body. Any element in the body begins with the style of the page. This makes it easy to define an overall page style.

♦ A block-level element passes its style to its children. If you define a div with a particular style, any elements inside that div will inherit the div’s style attributes. Likewise, defining a list will also define the list items.

♦ You can always override inherited styles. Of course, if you don’t want paragraphs to have a particular style inherited from the body, you can just change them.

Not all style rules are passed on to child elements. The text formatting and color styles are inherited, but border and positioning rules are not. This actually makes sense. Just because you define a border around a div doesn’t mean you want the same border around the paragraphs inside that div.

Overriding styles

The other side of inherited style is the ability to override an inherited style rule. For example, take a look at this code:

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

id = ”whatColor”>

This paragraph is a member of a class and has an ID,

both with style rules. It has four conflicting

color rules!

The code listing has a different indentation scheme than I’ve used in the rest of the chapter. Because all the styles had one rule, I chose not to indent to save space.

The question is this: What color will the whatColor element display? It’s a member of the body, so it should be red. It’s also a paragraph, and paragraphs are green. It’s also a member of the myClass class, so it should be blue. Finally, it’s named whatColor, and elements with this ID should be purple.

Four seemingly conflicting color rules are all dropped on this poor element. What color will it be?

CSS has a clear ranking system for handling this type of situation. In general, more specific rules trump more general rules. Here’s the precedence (from highest to lowest precedence):

1. User preference: The user always has the final choice