CSS Tutorial - CSS Styles Cascade

Browser uses the following order to look for a property value.

Inline styles - styles that are defined using the style global attribute on an element
Embedded styles - styles that are defined in a style element
External styles - styles that are imported using the link element
User styles - styles that have been defined by the user
Browser styles - the default styles applied by the browser

For example, to choose color of the text for an a element.

Browser will need to find a value for the CSS color property.

First, it will check to see if the element it is trying to render has an inline style that defines a value for color, like this:

<a style="color:red" href="http://java2s.com">Visit the website</a>

If there is no inline style, the browser will look for a style element that contains a style that applies to the element, like this:

<style type="text/css">
a  {
   color: red;
}
</style>

If there is no such style element, the browser looks at the stylesheets that have been loaded via the link element.

If still cannot find the color property the the default browser styles are used.

Note

The first three sources of properties (inline styles, embedded styles, and stylesheets) are collectively referred to as the author styles.

The styles defined in the user stylesheet are known as the user styles, and the styles defined by the browser are known as the browser styles.

Important Styles

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

You mark individual values as important by appending !important to the declaration.

<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style type="text/css">
a  {<!--   w ww  .java 2  s. c  o  m-->
   color:  black !important;
}
</style>
</head>
<body>
    <a style="color:red" href="http://java2s.com">Visit the  website</a>
    <p>This is a text.</p>
    <a href="http://w3c.org">Visit the   W3C  website</a>
</body>
</html>

Click to view the demo

The browser gives preference to important styles, regardless of where they are defined.

You can see the effect of property importance. The embedded value for the color property overrides the inline value.

Specificity and Order Assessments

What if there are two styles applied to an element defined at the same level and they both contain values for the CSS property the browser is looking for.

To decide which value to use, the browser assesses the specificity of each style and selects the one that is most specific.

The browser determines the specificity of a style by counting three different characteristics:

The number of id values in the style's selector
The number of other attributes and pseudo-classes in the selector
The number of element names and pseudo-elements in the selector

The browser combines the values from each assessment and applies the property value from the most specific style.

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
a  {<!--from  ww  w.j a v a  2s  .  co m-->
   color: black;
}
a.myclass  {
    color:white;
    background:grey;
}
</style>
</head>
<body>
    <a href="http://java2s.com">Visit the  website</a>
    <p>The is a test.</p>
    <a class="myclass" href="http://w3c.org">Visit the W3C website</a>
</body>
</html>

Click to view the demo

When assessing specificity, you create a number in the form of a-b-c, where each letter is the total from one of the three characteristics.

Only if the a values are equal does the browser compare b values.

Only if both the a and b values are the same does the browser consider the c value.

A specificity score of 1-0-0 is more specific than 0-2-2.

In the code above, selector a.myclass includes a class attribute, which means that the specificity of the style is 0-1-0. 0 is for id values, 1 is for other attributes, 0 is for element names.

The browser finds a value for the color property when rendering an a element that has been assigned to the myclass class. For all other a elements, the value from the other style will be used.

When there are values defined in styles with the same specificity, the browser selects the value based on the order.

Example

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
a.myclass1 {<!--  w w  w  .  java  2s . c o m-->
   color: black;
}
a.myclass2  {
    color:white;
    background:grey;
}
</style>
</head>
<body>
    <a href="http://java2s.com">website</a>
    <p>This is a paragraph.</p>
    <a class="myclass1  myclass2" href="http://w3c.org">W3C</a>
</body>
</html>

Click to view the demo

Inheritance

If the browser can't find a value in one of the available styles, it will use inheritance.

Inheritance means taking the value for the property defined by the parent element.

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
p  {<!--from w w  w  .  j a  va2 s  .  c om-->
    color:white;
    background:grey;
    border: medium solid black;

}
</style>
</head>
<body>
    <a href="http://java2s.com">website</a>
    <p>This is a <span>test</span>.</p>
    <a href="http://w3c.org">W3C</a>
</body>
</html>

Click to view the demo

The span element's parent is a p element.

span element inherits the color property from the parent p element.

Not all CSS properties are inherited.

Only the appearance related are inherited, including text color, font details, and so forth.

Layout related are not inherited.

inherit keyword

You can force inheritance by using the inherit in a style,

inherit explicitly tells the browser to use the parent element's value for the property.

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
p  {<!--  w  w  w. j  a v  a 2  s.c o m-->
    color:white;
    background:grey;
    border: medium solid black;
}
span  {
    border: inherit;
}
</style>
</head>
<body>
    <a href="http://java2s.com">website</a>
    <p>This is a <span>test</span> from java2s.com.</p>
    <a href="http://w3c.org">W3C</a>
</body>
</html>

Click to view the demo