Go to Previous Section:
How CSS works.This is the fourth section of the CSS Getting Started tutorial; it outlines how stylesheets interact in a cascade, and how elements inherit style from their parents. You add to your sample stylesheet, using inheritance to alter the style of many parts of your document in one step.
Information: Cascading and inheritance
The final style for an element can be specified in many different places, which can interact in a complex way. This complex interaction makes CSS powerful, but it can also make it confusing and difficult to debug.
Three main sources of style information form a cascade. They are:
- The browser's default styles for the markup language.
- Styles specified by a user who is reading the document.
- The styles linked to the document by its author. These can be specified in three places:
- In an external file: this tutorial primarily discusses this method of defining styles.
- In a definition at the beginning of the document: use this method only for styles that are used only on that page.
- On a specific element in the body of the document: this is the least maintainable method, but can be used for testing.
The user's style modifies the browser's default style. The document author's style then modifies the style some more. In this tutorial, you are the author of your sample document, and you only work with author stylesheets.
When you read this document in a browser, part of the style that you see comes from your browser's defaults for HTML.
Part of the style might come from customized browser settings or a customized style definition file. In Firefox, settings can be customized in the Preferences dialog , or you can specify styles in a file named userContent.css file in your browser profile.
Part of the style comes from stylesheets linked to the document by the wiki server.
When you open your sample document in your browser, the <strong> elements are bolder than the rest of the text. This comes from the browser's default style for HTML.
The <strong> elements are red. This comes from your own sample stylesheet.
The <strong> elements also inherit much of the <p> element's style, because they are its children. In the same way, the <p> element inherits much of the <body> element's style.
For styles in the cascade, author stylesheets have priority, then reader stylesheets, then the browser's defaults.
For inherited styles, a child node's own style has priority over style inherited from its parent.
These are not the only priorities that apply. A later page in this tutorial will explain more.
CSS also provides a way for the reader to override the document author's style, by using the keyword !important.
This means that as a document author, you cannot always predict exactly what your readers will see.
If you want to know all the details of cascading and inheritance, see Assigning property values, Cascading, and Inheritance in the CSS Specification.
Action: Using inheritance
- Edit your sample CSS file.
- Add this line by copying and pasting it. It does not really matter whether you add it above or below the line that is already there. However, adding it at the top is more logical because in your document the
<p>element is the parent of the<strong>element:p {color: blue; text-decoration: underline;} - Now refresh your browser to see the effect on your sample document. The underlining affects all the text in the paragraph, including the initial letters. The
<strong>elements have inherited the underlined style from their parent<p>element.
But the
<strong>elements are still red. The red color is their own style, so it has priority over the blue color of their parent<p>element.
Before
HTML Content
<p> <strong>C</strong>ascading <strong>S</strong>tyle <strong>S</strong>heets </p>
CSS Content
strong {color:red}
After
HTML Content
<p> <strong>C</strong>ascading <strong>S</strong>tyle <strong>S</strong>heets </p>
CSS Content
p {color:blue; text-decoration:underline}
strong {color:red}
| Cascading Style Sheets |
Move the declaration for underlining from the rule for <p> to the one for <strong>. The resulting file looks like this:
p {color: blue; }
strong {color: red; text-decoration: underline;}
Hide solution
What next?
Go to Next Section:
SelectorsYour sample style sheet specifies styles for tags, <p> and <strong>, changing the style of the corresponding elements throughout your document. The next section describes how to specify style in more selective ways.