Cascading Styleref. CSS 2.1

Cascading style sheets is actually a collection of rules or styles collected when loading a document. In general, styling rules of a document can be saved in .css files, be embedded into the head of a HTML file, be specified through the attributes of HTML tags, and be assigned by the user agent. These style rules are cascaded together with priority.

Data Values of Property Rules

The data values of property rules are only the information used by a user agent to derive the actual value used for rendering a document properly. A specified value is

Specified Value

Specified value is usually the data value of a property specified by auther of the document. In order to simplify the implement of style sheet, all user agents must assign specified values to properties of standard HTML tags such that all HTML tags can be rendered with all necessay information. User can also specify some specified values of properties through user agent for a particular document.

A specified value of each propery of an element is assigned by user agents according to the priority of the value. The value of a property of an element is obtained with the highest priority from the cascading result for the same property of the corresponding element. The values of unassigned properties of an element other then the root element can be obtained with lower priority from the calculated values of the corresponding properties of the same element respectively. Finally, all values of unassigned properties of each element is assigned a default value by user agent. The default value of a property of an element is the preset value assigned by the user agent following the browser style of HTML element which may be different from the initial value of each property specified in the CSS property's definition.

Calculated Value

Besides determining the specified values of every properties of all HTML tags, all user agents also have the capability to compute the correct values of every properties of all HTML tags such that all HTML tags can be rendered properly.

The specified value will first be resolved into a computered value according to the computered value of each property specified in the CSS property's definition. The computered value is also computed according to other specifications, e.g. inherit values. applies to, specified in the CSS property's definition. Since not all computed values can be used for formatting the document directly, or some computed values needed to be verified or determined when the document is being formatted, a further computation is need for all computed value in order to accept the computed value as is or to resolve any distorting and dependencies related with. Although a used value is always the value used for rendering, a used value must be further resolved to an actual value that match with the media rending environment. In other words, an actual value is the convertion or approximation of the used value according to the media environment.

Controls of Property Rules

Since styling property rules can be specified by more than one method or one origin, a mechanism should be used by a user agent to decide the priority of a property rule.

Cascade

Besides the style sheets specified by the author and user agent, user may also specify a style sheet for a particular document. In other words, three source of style sheets that are used to render the same document.

Order and Inheritance

 

Types of Styles

There are a few ways to attach rendering information to a HTML document.

Inline Stylesine Styles

Style element attributes are used to implement the rendering style as the attributes of an element.

<h2 style="color: blue">

Embedded Styles

A style section is included in the head section of HTML document for grouping all rendering styles

<style type="text/css">h2  { color: blue }</style>

External Style Sheets

All the rendering styles are grouped into an style sheet and is linked to the HTML document by a link in the head section after the <title> element.

<link rel="stylesheet" type="text/css" href="external.css" />

Importing Style Sheets

External style sheet is imported to a cascading style sheet by an importing rule at the beginning of a cascading style sheet.

@import url("external.css");