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.

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.

Home »
HTML CSS »
CSS »