Cascading Style Sheet

The introduction of cascading style sheet (CSS) to the HTML document is to separate the rendering information from the HTML document contents. The presentation attributes of elements are rearrange into cascading styles separately. However, the CSS specification is still very flexible in applying CSS to HTML because all HTML tags always have their own initial value preset by browser and all browsers have their own rendering engine.

CSS Processing Model

The key purpose of CSS is to generate a cascading style model from the source document. The output of the cascading style model is the canvas. Selectors and properties are used by the CSS engine to address the HTML document and to parse the source document.

The CSS canvas

In general, the canvas is a virtual space on which the cascading style model is rendered. The canvas is infinite for each dimension of the space, however user agents may impose limits on the dimnsions of the viewport. The virtual space is arranged in layer form in the z-dimension. While each layer is the virtual flat canvas where the cascading style model is rendered.

CSS Addressing Model

Selectors and properties are used as CSS rules by CSS to address the elements of the source document. CSS properties can be directly assign to elements in the document. Or CSS properties can be assign through selector matching to elements in the document.

CSS Syntax

The CSS language has a very simple form with a few elements.

CSS PropertyThe basic item of CSS is rendering properties which are used to replace the rendering attributes of a HTML tag. Rending properties can either be used as the parameter of style attributes of a element tag for rendering a specified tag, or be a property declaration of a CSS rule set. For example, CSS property color with value blue: <h2 style="color: blue"> h2 {color: blue;} CSS DeclarationA CSS declaration is to assign a legal value to a specified CSS property. A declaration may be empty or consists of a property name, followed by a colon ':" and the specipied property value. For example, a declaration of property color with value blue: "color: blue" {color: blue;} CSS Rule SetThe basic component of CSS is CSS rule sets or CSS rules. A CSS rule consists of a selector and a declaration. A declaration comprises of a rendering property and a rendering value. Rendering rules are then applied to a particular element tag by selector matching. For example, a selector, h2 with a declaration consists of properties, color with value blue and background-color with value cyan. h2 { color: blue; background-color:cyan; } important ruleBy default, an ordinary author CSS rule declarations have a more weight than an ordinary user CSS rule declarations. A type of important CSS rule declaration is introduced such that an important CSS rule declaration always has more weight than ordinary normal CSS rule declaration and an user important CSS rule declaration always reversively has more wight than author or other important CSS rule claration. An important declaration is specified by a dellimier token '!' and keyword 'important' following the normal CSS rule declaration. <h2 style="color: blue !important"> h2 {color: blue !important;} at-ruleAn at-rule is a rule set for the CSS engine instead of matching with the element tag. An at-rule can therefore be used to instructs how the CSS engine to behave. An at-rule begins with at-sign, '@' with unicode U+0040, and immediately followed by a keyword identifier. @charset "utf-8; CommentLike other language, a comment block allows author to enter notes into CSS that will not be interpreted as CSS rules. A comment begins with "/*" and ends with "*/", and all stuff in between are CSS comments. /* comment */ /* comment1 comment2 */

CSS Rule

According to the source of CSS rules, there are two types of CSS rules

Direct Specifying CSS Rule

Properties of CSS rule declaration are directly assigned to the 'style' attribute of the elements of a document.

<h2 style="color:red">

Indirect Matching CSS Rule

Properties of CSS rule declaration are indirectly assigned to the elements of a document through cascaded selector matching mechanism in form of CSS rule set.

A CSS rule set consists of a selector and a declaration block. The selector is used to match the element of the document and the declaration block is then assigned to the element accordingly. The declaration block contains one or more declarations of format, CSS property name and corresponding value pair.

h2 {color: blue}

Example

HTML Document Input:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
p {background-color:cyan;border:1px solid black;margin:5px;padding:5px}
</style>
<title>Sample Page</title>
    </head>
    <body>
<h2 style="color:red">Example of direct specifying CSS rule</h2>
<p>Example of indirect matching CSS rule</p>
    </body>
</html>

HTML Web Page Embedded Output:

CSS Styling Method

Style rules of CSS can be specified directly to an element through an inline style attribute or be specified indirectly through matching with a selector.

Method of Direct Specifying

For method of specifying CSS rules using 'style' attribute in an element, the CSS styling method is rigid. CSS rules are declared as the paraemeter of the 'style' attribute. Multiple CSS rules can be declarated by separating each declaration with a delimiter ';'.

<p style="color:blue">
<h2 style="background color:cyan;color:red">

Although CSS rules can be applied to individual element in the HTML document directly, this is not the best way of using CSS to render a source document.

Method of Indirect Matching

For method of matching selectors with an element according to pattern, the CSS styling method is more flexible and powerful. The matching mechanism is based on matching all rule sets against all available CSS of the document. A rule set consists of a selector followed by a declaration block. The selector is actually the CSS pattern matching rules used to determine which declaration block to be applied to elements of the source document. According to the type of matching pattern, selector can be divided in simple selector, compound selector, complex selector, and selector list. A declaration block is a set of CSS declarations enclosed by a pair of curly brace, '{}'. The set of CSS declarations is a list of zero or more semicolon-separated, ';' declarations.

h1, h2 { font-weight: bold }
p { font-weight: bold;font-size: 12px }

The Creator

Style sheets may have three different creators, author, user, and user agent.

Author:The author may specify style sheets for a source document. User:A user may also be able to specify style information for a particular document. User agent:A user agent must apply a default style sheet according to the CSS specification such that the presentation of the document can satisfy general presentation expectations for the document language.

Types of Style Sheet

In general, there are a few ways for author to attach rendering information to a HTML document.

Inline Style style element attributes are used to implement the rendering style as the attributes of an element. <h2 style="color: blue"> Embedded Style 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 Sheet 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 Sheet 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");

CSS Standard

CSS References..........

HTML 4.01 Specification (1999-12-24)
Cascading Style Sheets (CSS1) Level 1 Specification (2008-04-11)
Cascading Style Sheets, level 2 CSS2 Specification (2008-04-11)
Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification (2008-09-08)