Designing simple style sheets is easy. One needs only to know a little HTML and some basic desktop publishing terminology. E.g., to set the text color of 'H1' elements to blue, one can say:

The example above is a simple CSS rule. A rule consists of two main parts: selector ('H1') and declaration ('color: blue'). The declaration has two parts: property ('color') and value ('blue'). While the example above tries to influence only one of the properties needed for rendering an HTML document, it qualifies as a style sheet on its own. Combined with other style sheets (one fundamental feature of CSS is that style sheets are combined) it will determine the final presentation of the document.

The selector is the link between the HTML document and the style sheet, and all HTML element types are possible selectors. HTML element types are defined in the HTML specification [2].

The 'color' property is one of around 50 properties that determine the presentation of an HTML document. The list of properties and their possible values is defined in this specification.

HTML authors need to write style sheets only if they want to suggest a specific style for their documents. Each User Agent (UA, often a "web browser" or "web client") will have a default style sheet that presents documents in a reasonable -- but arguably mundane -- manner. Appendix A contains a sample style sheet to present HTML documents as suggested in the HTML 2.0 specification [3].

The formal grammar for the CSS1 language is defined in Appendix B.

In order for the style sheets to influence the presentation, the UA must be aware of their existence. The HTML specification [2] define how to link HTML with style sheets. This section is therefore informative, but not normative:

The example shows four ways to combine style and HTML: using the 'LINK' element to link an external style sheet, a 'STYLE' element inside the 'HEAD' element, an imported style sheet using the CSS '@import' notation, and a 'STYLE' attribute on an element inside 'BODY'. The latter option mixes style with content and loses the corresponding advantages of traditional style sheets.

The 'LINK' element references alternative style sheets that the reader can select, while imported style sheets are automatically merged with the rest of the style sheet.

Traditionally, UAs have silently ignored unknown tags. As a result, old UAs will ignore the 'STYLE' element, but its content will be treated as part of the document body, and rendered as such. During a transition phase, 'STYLE' element content may be hidden using SGML comments:

Since the 'STYLE' element is declared as "CDATA" in the DTD (as defined in [2]), conforming SGML parsers will not consider the above style sheet to be a comment that is to be removed.

To reduce the size of style sheets, one can group selectors in comma-separated lists:

Similarly, declarations can be grouped:

In addition, some properties have their own grouping syntax:

which is equivalent to the previous example.

In the first example, the color of 'H1' elements was set to blue. Suppose there is an 'H1' element with an emphasized element inside:

If no color has been assigned to the 'EM' element, the emphasized "is" will inherit the color of the parent element, i.e. it will also appear in blue. Other style properties are likewise inherited, e.g. 'font-family' and 'font-size'.

To set a "default" style property for a document, one can set the property on an element from which all visible elements descend. In HTML documents, the 'BODY' element can serve this function:

This will work even if the author has omitted the 'BODY' tag (which is legal) since the HTML parser will infer the missing tag. The example above sets the text color to be black and the background to be an image. The background will be white if the image is not available. (See section 5.3 for more on this.)

Some style properties are not inherited from the parent element to the child element. Most often it is intuitive why this is not the case. E.g., the 'background' property does not inherit, but the parent element's background will shine through by default.

Often, the value of a property is a percentage that refers to another property:

For each property that allows percentage values, it is defined what property it refers to. Children elements of 'P' will inherit the computed value of 'line-height' (i.e. 12pt), not the percentage.

To increase the granularity of control over elements, a new attribute has been added to HTML [2]: 'CLASS'. All elements inside the 'BODY' element can be classed, and the class can be addressed in the style sheet:

The normal inheritance rules apply to classed elements; they inherit values from their parent in the document structure.

One can address all elements of the same class by omitting the tag name in the selector:

Only one class can be specified per selector. 'P.pastoral.marine' is therefore an invalid selector in CSS1. (Contextual selectors, described below, can have one class per simple selector)

CSS gives so much power to the CLASS attribute, that in many cases it doesn't even matter what HTML element the class is set on -- you can make any element emulate almost any other. Relying on this power is not recommended, since it removes the level of structure that has a universal meaning (HTML elements). A structure based on CLASS is only useful within a restricted domain, where the meaning of a class has been mutually agreed upon.

HTML [2] also introduces the 'ID' attribute which is guaranteed to have a unique value over the document. It can therefore be of special importance as a style sheet selector, and can be addressed with a preceding '#':

In the above example, the first selector matches the 'P' element due to the 'ID' attribute value. The second selector specifies both an element type ('H1') and an ID value, and will therefore not match the 'P' element.

By using the ID attribute as selector, one can set style properties on a per-element basis. While style sheets have been designed to augment document structure, this feature will allow authors to create documents that present well on the canvas without taking advantage of the structural elements of HTML. This use of style sheets is discouraged.

Inheritance saves CSS designers typing. Instead of setting all style properties, one can create defaults and then list the exceptions. To give 'EM' elements within 'H1' a different color, one may specify:

When this style sheet is in effect, all emphasized sections within or outside 'H1' will turn red. Probably, one wanted only 'EM' elements within 'H1' to turn red and this can be specified with:

The selector is now a search pattern on the stack of open elements, and this type of selector is referred to as a contextual selector. Contextual selectors consist of several simple selectors separated by whitespace (all selectors described up to now have been simple selectors). Only elements that match the last simple selector (in this case the 'EM' element) are addressed, and only if the search pattern matches. Contextual selectors in CSS1 look for ancestor relationships, but other relationships (e.g. parent-child) may be introduced in later revisions. In the example above, the search pattern matches if 'EM' is a descendant of 'H1', i.e. if 'EM' is inside an 'H1' element.

Here, the first selector matches 'LI' elements with at least one 'UL' ancestor. The second selector matches a subset of the first, i.e. 'LI' elements with at least two 'UL' ancestors. The conflict is resolved by the second selector being more specific because of the longer search pattern. See the cascading order (section 3.2) for more on this.

Contextual selectors can look for element types, CLASS attributes, ID attributes or combinations of these:

The first selector matches all 'P' elements that have a 'DIV' among the ancestors. The second selector matches all 'H1' elements that have an ancestor of class 'reddish'. The third selector matches all 'CODE' elements that are descendants of the element with 'ID=x78y'. The fourth selector matches all 'H1' elements that have a 'DIV' ancestor with class 'sidenote'.

Several contextual selectors can be grouped together:

Which is equivalent to:

Textual comments in CSS style sheets are similar to those in the C programming language [7]:

Comments cannot be nested. For a CSS1 parser, a comment is equivalent to whitespace.