Cascading and inheritance

  • Revision slug: CSS/Getting_Started/Cascading_and_inheritance
  • Revision title: Cascading and inheritance
  • Revision id: 302761
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment

Revision Content

{{ CSSTutorialTOC() }}

{{ previousPage("/en-US/docs/CSS/Getting_Started/How_CSS_works", "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.

Example

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 {{ HTMLElement("strong") }} elements are bolder than the rest of the text. This comes from the browser's default style for HTML.

The {{ HTMLElement("strong") }} elements are red. This comes from your own sample stylesheet.

The {{ HTMLElement("strong") }} elements also inherit much of the {{ HTMLElement("p") }} element's style, because they are its children. In the same way, the {{ HTMLElement("p") }} element inherits much of the {{ HTMLElement("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.

More details

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

  1. Edit your sample CSS file.
  2. 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 {{ HTMLElement("p") }} element is the parent of the {{ HTMLElement("strong") }} element:
    p {color: blue; text-decoration: underline;}
    
  3. 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 {{ HTMLElement("strong") }} elements have inherited the underlined style from their parent {{ HTMLElement("p") }} element.

    But the {{ HTMLElement("strong") }} elements are still red. The red color is their own style, so it has priority over the blue color of their parent {{ HTMLElement("p") }} element.

Before
Cascading Style Sheets
After
Cascading Style Sheets
Challenge
Change your stylesheet so that only the red letters are underlined:
Cascading Style Sheets

See a solution to this challenge.

What next?

{{ nextPage("/en-US/docs/CSS/Getting_Started/Selectors", "Selectors")}}Your 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.

Revision Source

<p>{{ CSSTutorialTOC() }}</p>
<p>{{ previousPage("/en-US/docs/CSS/Getting_Started/How_CSS_works", "How CSS works.")}}<span class="seoSummary">This is the fourth section of the <a href="/en-US/docs/CSS/Getting_Started" title="en/CSS/Getting Started">CSS&nbsp;Getting Started</a> 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.</span></p>
<h2 class="clearLeft" id="Information.3A_Cascading_and_inheritance">Information: Cascading and inheritance</h2>
<p>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.</p>
<p>Three main sources of style information form a <em>cascade</em>. They are:</p>
<ul>
  <li>The browser's default styles for the markup language.</li>
  <li>Styles specified by a user who is reading the document.</li>
  <li>The styles linked to the document by its author. These can be specified in three places:
    <ul>
      <li>In an external file: this tutorial primarily discusses this method of defining styles.</li>
      <li>In a definition at the beginning of the document: use this method only for styles that are used only on that page.</li>
      <li>On a specific element in the body of the document:&nbsp;this is the least maintainable method, but can be used for testing.</li>
    </ul>
  </li>
</ul>
<p>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.</p>
<div class="tuto_example">
  <div class="tuto_type">
    Example</div>
  <p>When you read this document in a browser, part of the style that you see comes from your browser's defaults for HTML.</p>
  <p>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 <code>userContent.css</code> file in your browser profile.</p>
  <p>Part of the style comes from stylesheets linked to the document by the wiki server.</p>
</div>
<p>When you open your sample document in your browser, the {{ HTMLElement("strong") }} elements are bolder than the rest of the text. This comes from the browser's default style for HTML.</p>
<p>The {{ HTMLElement("strong") }} elements are red. This comes from your own sample stylesheet.</p>
<p>The {{ HTMLElement("strong") }} elements also inherit much of the {{ HTMLElement("p") }} element's style, because they are its children. In the same way, the {{ HTMLElement("p") }} element inherits much of the {{ HTMLElement("body") }} element's style.</p>
<p>For styles in the cascade, author stylesheets have priority, then reader stylesheets, then the browser's defaults.</p>
<p>For inherited styles, a child node's own style has priority over style inherited from its parent.</p>
<p>These are not the only priorities that apply. A later page in this tutorial will explain more.</p>
<div class="tuto_details">
  <div class="tuto_type">
    More details</div>
  <p>CSS also provides a way for the reader to override the document author's style, by using the keyword <code>!important</code>.</p>
  <p>This means that as a document author, you cannot always predict exactly what your readers will see.</p>
  <p>If you want to know all the details of cascading and inheritance, see <a class="external" href="http://www.w3.org/TR/CSS21/cascade.html">Assigning property values, Cascading, and Inheritance</a> in the CSS Specification.</p>
</div>
<h2 id="Action.3A_Using_inheritance">Action: Using inheritance</h2>
<ol>
  <li>Edit your sample CSS file.</li>
  <li>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 {{ HTMLElement("p") }} element is the parent of the {{ HTMLElement("strong") }} element:
    <pre class="brush:css">
p {color: blue; text-decoration: underline;}
</pre>
  </li>
  <li>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 {{ HTMLElement("strong") }} elements have inherited the underlined style from their parent {{ HTMLElement("p") }} element.<br />
    <br />
    <p>But the {{ HTMLElement("strong") }} elements are still red. The red color is their own style, so it has priority over the blue color of their parent {{ HTMLElement("p") }} element.</p>
  </li>
</ol>
<table style="border:1px solid #36b; padding:1em; background-color:#f4f4f4;">
</table>
<table style="border:2px outset #36b; padding:1em;margin-right:2em;">
  <caption style="font-weight:bold; text-align:left;">
    Before</caption>
  <tbody>
    <tr>
      <td><strong style="color:red;">C</strong>ascading <strong style="color:red;">S</strong>tyle <strong style="color:red;">S</strong>heets</td>
    </tr>
  </tbody>
</table>
<table style="border:2px outset #36b; padding:1em;">
  <caption style="font-weight:bold; text-align:left;">
    After</caption>
  <tbody>
    <tr>
      <td style="color:blue; text-decoration: underline;"><strong style="color:red;">C</strong>ascading <strong style="color:red;">S</strong>tyle <strong style="color:red;">S</strong>heets</td>
    </tr>
  </tbody>
</table>
<div class="tuto_example">
  <div class="tuto_type">
    Challenge</div>
  Change your stylesheet so that only the red letters are underlined:
  <table style="border:2px outset #36b; padding:1em;">
    <tbody>
      <tr>
        <td style="color:blue;"><strong style="color:red; text-decoration: underline;">C</strong>ascading <strong style="color:red; text-decoration: underline;">S</strong>tyle <strong style="color:red; text-decoration: underline;">S</strong>heets</td>
      </tr>
    </tbody>
  </table>
</div>
<p><a href="/en/CSS/Getting_Started/Challenge_solutions#Cascading_and_inheritance_Inherited_styles" title="en/CSS/Getting Started/Challenge solutions#Cascading and inheritance Inherited styles">See a solution to this challenge.</a></p>
<h2 id="What_next.3F">What next?</h2>
<p>{{ nextPage("/en-US/docs/CSS/Getting_Started/Selectors", "Selectors")}}Your sample style sheet specifies styles for tags, <code>P</code> and <code>STRONG</code>, changing the style of the corresponding elements throughout your document. The next section describes how to specify style in more <a href="/en-US/docs/CSS/Getting_Started/Selectors" title="/en-US/docs/CSS/Getting_Started/Selectors">selective ways</a>.</p>
Revert to this revision