Understanding cascading styles

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 structure and usage of cascading styles and Cascading Style Sheets (CSS) as defined by the W3C CSS 2 and HTML 4 standards. See http://www.w3.org/TR/CSS21/cover.html.

CSS 2.1 is a style sheet language that allows authors and users to attach style (e.g., fonts and spacing) to structured documents (e.g., HTML documents and XML applications). By separating the presentation style of documents from the content of documents, CSS 2.1 simplifies Web authoring and site maintenance.

CSS 2.1 builds on CSS2 [CSS2] which builds on CSS1 [CSS1]. It supports media-specific style sheets so that authors may tailor the presentation of their documents to visual browsers, aural devices, printers, braille devices, handheld devices, etc. It also supports content positioning, table layout, features for internationalization and some properties related to user interface.

CSS 2.1 corrects a few errors in CSS2 (the most important being a new definition of the height/width of absolutely positioned elements, more influence for HTML's "style" attribute and a new calculation of the 'clip' property), and adds a few highly requested features which have already been widely implemented. But most of all CSS 2.1 represents a "snapshot" of CSS usage: it consists of all CSS features that are implemented interoperably at the date of publication of the Recommendation.

CSS 2.1 is derived from and is intended to replace CSS2. Some parts of CSS2 are unchanged in CSS 2.1, some parts have been altered, and some parts removed. The removed portions may be used in a future CSS3 specification.

[to be continued]

This topic finishes with a demonstration of how a difference in style location can make a dramatic difference in the display of HTML topics.

It is possible to dynamically change the linked style sheet to an HTML page, thus dramatically altering the appearance of your pages on the fly. For an example, see:
http://msdn.microsoft.com/library/default.asp?url=/workshop/author/css/reference/css_ref_entry.asp?

Before we delve into the nitty-gritty details of CSS design, we need to define some terms used when describing CSS. See CSS definitions.

CSS definitions

[As sourced from: http://www.w3.org/TR/CSS21/conform.html].

Standard Numbering: 'CSS 2.1' specification represents 'Cascading Style Sheets, level 2 revision 1'.
See http://www.w3.org/TR/CSS21/cover.html.
Style sheet: A set of statements that specify presentation of a document. Style sheets may have three different origins: author, user, and user agent. The interaction of these sources is described in the section on cascading and inheritance.
Author: An author is a person who writes documents and associated style sheets. An authoring tool is a User Agent that generates style sheets.
User: A user is a person who interacts with a User Agent to view, hear, or otherwise use a document and its associated style sheet. The user may provide a personal style sheet that encodes personal preferences.
User agent (UA): A user agent is any program that interprets a document written in the document language and applies associated style sheets according to the terms of this specification. A user agent may display a document, read it aloud, cause it to be printed, convert it to another format, etc.; An HTML user agent is one that supports the HTML 2.x, HTML 3.x, or HTML 4.x specifications. A user agent that supports XHTML [XHTML], but not HTML (as listed in the previous sentence) is not considered an HTML user agent for the purpose of conformance with this specification.
Property: CSS defines a finite set of parameters, called properties, that direct the rendering of a document. Each property has a name (e.g., 'color', 'font' or border') and a value (e.g., 'red', '12pt Times' or 'dotted'). Properties are attached to various parts of the document and to the page on which the document is to be displayed by the mechanisms of specificity, cascading and inheritance (see the chapter on Assigning property values, Cascading, and Inheritance).
Element: The primary syntactic constructs of the document language. Most CSS style sheet rules use the names of these elements (such as P, TABLE, and OL in HTML) to specify how the elements should be rendered.
Attribute: A value associated with an element, consisting of a name, and an associated (textual) value.
Content: The content associated with an element in the source document. Some elements have no content, in which case they are called empty. The content of an element may include text, and it may include a number of sub-elements, in which case the element is called the parent of those sub-elements.
Rendered content: The content of an element after the rendering that applies to it according to the relevant style sheets has been applied. The rendered content of a replaced element—such as an image, embedded document, or applet: (for example, the content of the HTML IMG element is often replaced by the image that its "src" attribute designates)—comes from outside the source document. Rendered content may also be alternate text for an element (e.g., the value of the XHTML "alt" attribute), and may include items inserted implicitly or explicitly by the style sheet, such as bullets, numbering, etc.
Intrinsic dimensions: The width and height as defined by the element itself, not imposed by the surroundings. CSS does not define how the intrinsic dimensions are found. In CSS 2.1 only replaced elements can come with intrinsic dimensions.

CSS 2.1 does not define which properties apply to form controls and frames, or how CSS can be used to style them. User agents may apply CSS properties to these elements.

CSS tips

CSS rule names are case sensitive—"case", "Case", and "CASE" refer to different rules.

CSS rules must be exclusive—do not duplicate names.

CSS rules are strict (not misgiving)—a single invalid property value (error) will invalidate the whole rule.

When using multiple values in a compound rule, for example:
margin: 1px 10px 1px 20px;
or
border: 1px solid;
do NOT separate the elements with commas.

Understanding cascading styles

CSS definitions

CSS tips

See Also