How Styles Cascade and Inherit

The browser uses cascading and inheritance to determine which values should be used for properties. The browser needs to navigate through all of the sources of styles it has.

There are five source of styles:

  • inline
  • embedded
  • an external stylesheet
  • Browser Styles
  • User Styles

Browser Styles

The browser styles, which is also called the user agent styles, are the default styles a browser applies to an element.

The following HTML Document has No Styles:

 
<!DOCTYPE HTML> 
<html> 
    <head> 
        <title>Example</title> 
    </head> 
    <body> 
        <a href="http://java2s.com">Visit the website</a> 
        <p>I like <b>HTML</b> and CSS.</p> 
    </body> 
</html>
Click to view the demo

When loading the above html document to browser you can see the default browser styles. The text content of the link is displayed in blue and is underlined.

User Styles

Most browsers allow users to define their own stylesheets. These stylesheets are called user styles.

Each browser has its own mechanism for user styles.

How Styles Cascade

The order to apply styles:

  1. Inline styles (styles that are defined using the style global attribute on an element)
  2. Embedded styles (styles that are defined in a style element)
  3. External styles (styles that are imported using the link element)
  4. User styles (styles that have been defined by the user)
  5. Browser styles (the default styles applied by the browser)

The inline styles, embedded styles, and stylesheets are referred to as the author styles.

Tweaking the Order with !important

You can override the normal cascade order by marking your property values as !important.

 
<!DOCTYPE HTML> 
<html> 
    <head> 
        <title>Example</title> 
        <style type="text/css"> 
        a { 
        color: black !important; 
        } 
        </style> 
    </head> 
    <body> 
        <a style="color:red" href="http://java2s.com">Visit the website</a> 
    </body> 
</html>
Click to view the demo

You mark individual values as important by appending !important to the declaration. The browser gives preference to important styles, regardless of where they are defined.

Inheritance

If the browser can't find a value for a property, it will use inheritance. Inheritance means taking the value for the property from the parent element.

 
<!DOCTYPE HTML> 
<html> 
    <head> 
        <title>Example</title> 
        <style type="text/css"> 
        p { 
        color:white; 
        background:grey; 
        border: medium solid black; 
        } 
        </style> 
    </head> 
    <body> 
        
        <p>I like <span>HTML</span> and CSS.</p> 
    </body> 
</html>
Click to view the demo

In the code above the span element's parent is a p element. The color property from p is applied to the span element. This color value is inherited from the parent p element.

CSS attributes that relate to the appearance are inherited (text color, font details, and so forth). CSS attributes that relate to the layout are not inherited(width, height).

You can force inheritance by using the special value inherit in a style. inherit explicitly instructs the browser to use the parent element's value.

 
<!DOCTYPE HTML> 
<html> 
    <head> 
        <title>Example</title> 
        <style type="text/css"> 
        p { 
            color:white; 
            background:grey; 
            border: medium solid black; 
        } 
        span { 
            border: inherit; 
        } 
        </style> 
    </head> 
    <body> 
        <p>I like <span>HTML</span> and CSS.</p> 
    </body> 
</html>
Click to view the demo
Home 
  HTML CSS Book 
    CSS  

Introduction:
  1. What is Cascading Style Sheets (CSS)
  2. Adding Styles to HTML
  3. Specifying the Character Encoding of a Stylesheet
  4. How Styles Cascade and Inherit
  5. Element Classification
  6. Cascading Style Sheets prefixes for the most popular browsers
Related: