Understanding the C in CSS

Topic status automatically displays here - do not remove.

Add me to your favorites! Bookmark this topic Print me! Print this topic

This topic explores the ins-and-outs of cascading style sheets, and in particular how cascading rules are applied.

CSS order of precedence

According to the W3C CSS 2 and HTML 4 standards, the CSS order of precedence for the presentation of HTML is: "author style sheets override user style sheets which override the default style sheet".

There are several ways in which style presentation information can be applied to an HTML document including:

Author embedded inline directly into the HTML tags—e.g. '<P style="text-align:center">'
Author included elsewhere in the HTML page—e.g. '<STYLE> P{align:center;} </STYLE>'
Author imported from external stylesheets—e.g. '<LINK rel="stylesheet" href="../../LotechSolutions.css">
Author inherited from parent HTML elements
User defined stylesheet
Browser default stylesheet

From highest to lowest, this listing is the order of preference for determining which style is applied to a particular element on the page.

Browser default stylesheet

Starting with the lowest, if no other style information is supplied or available, the browser's default stylesheet will be used to render (display) the page. Every browser has a built-in default stylesheet for this purpose. The rendered appearance of the page is dependant upon which browser and version is being used.

Note Note

The W3C provide a standard stylesheet for HTML 4.0—see Jump to separate internet site height: 11 'W3C sample style sheet for HTML 4.0'

HTML standards Quality Assurance (QA) is found at: http://www.w3.org/QA/2002/04/valid-dtd-list.html

User-defined stylesheet

Modern browsers allow the user to specify a default stylesheet to be applied to all pages that they view. This option is usually available through the Options dialog box of the browser. This default style sheet will be applied to the document before any author defined styles. If any stylesheets are defined in the document, they will override the user-defined stylesheet.

Note Note

User-defined style sheets specified by the user in the Options box dialog of the browser are not listed in the styleSheets collection of the browser or document objects.

Inherited styles

Each element in the HTML flow inherits the style properties of its parent element.

<BODY>
   Body text goes here.
   <DIV>
      Div text goes here.
      <P>
         Paragraph text goes here.
      </P>
      More Div text goes here.
   </DIV>
   More Body text goes here.
</BODY>

For example, in the nested structure above, the text within the paragraph will inherit the style properties of the child <P> tag, the parent <DIV> tag, and the grand-parent <BODY> tag until a valid value is found. If in this example, the Body has a color property of blue, and the Div has no color property value, all the text content of the DIV and its children elements will inherit the color value of the Body, and display textual content in blue.

Alternatively, if the Div has a color assigned, lets say green, only the text within the Body will display blue, and the text within the Div and its child elements will display green. If the Paragraph has a color assigned, lets say Red, then only the paragraph text will display red.

Understanding the C in CSS

CSS order of precedence

Browser default stylesheet

User-defined stylesheet

Inherited styles

External stylesheet

Included styles

Inline styles

See Also