CSS Syntax

A style sheet is made up of style rules that tell a browser how to present a document.

Each rule is made up of a selector -- usually an HTML element such as BODY, P or I -- and the style to be applied to the selector.

The syntax rules are as follows:

selector { property: value }

To assign multiple declarations to a selector

selector { property: value; property: value }

To assign multiple values to a property

selector { property: value, value }

Selectors

Any HTML element can be a CSS selector. The selector is simply the element that is linked to a particular style. For example, the selector in

P { text-indent: 3em }

is P.

Class Selectors

A simple selector can have different classes, thus allowing the same element to have different styles. For example, you might want to have paragraphs be different colors.

P.red { color: red }
P.blue { color: blue }

In the above example two classes, red and blue for use with HTML's P element. A class can be used as shown below.

<P CLASS=red>Only one class is allowed per selector</P>

Classes may also be defined without an associated element.

.note { font-size: small }

In this case .note may be used with any element.

ID Selectors

ID Selectors are individually assigned for the purpose of defining on a per-element basis.

#red { color: red }

This would be referenced in the following manner:

<P ID=red>this text would be red</P>

Contextual Selectors

Contextual selectors are merely strings of two or more simple selectors separated by white space.

P I { color: blue }

This rule says that italicized text inside a paragraph should be blue; italicized text in a heading would be unaffected.

Grouping

Selectors can be grouped together, to decrease repetitious statements. For example all the H1 and H2 in a documents could be given the same declarations.

H1, H2 { color: green }

Inheritance

Virtually all selectors which are nested within selectors will inherit the property values assigned to the outer selector unless otherwise modified.

Pseudo-classes and Pseudo-elements

Pseudo-classes and Pseudo-elements are special classes and elements that are automatically recognized by the browser. Pseudo-classes distinguish among different element types (e.g., visited links and active links). Pseudo-elements refer to sub-parts of elements, such as the first letter of a paragraph. Pseudo-classes and pseudo-elements should not be specified using the CLASS attribute. Pseudo-classes and pseudo-elements can take the following forms.

selector:pseudo-class { property: value }

selector:pseudo-element { property: value }

class.selector:pseudo-class { property: value }

class.selector:pseudo-element { property: value }

Cascade Order

When multiple style sheets are used, they may fight over control of a selector. The following rules will determine the outcome of these situations.

! important

If a rule contains ! important it will be used in the case of a conflict. An example of ! important follows.

P.red { color: red ! important }

Author vs Reader

Since the author and reader can both specify style sheets confilct resolution rules are needed. If the author's and the reader's rules conflict then the author's win. Since the author's rules win in the case of a conflict author's should be wary of using ! important as this will override the reader's settings.

Selector Rules: calculating specificity

Conflicts between style sheets can be resolved based on levels of specificity, where a more specific style wins. To calculate the specificity the browser counts the following in a selector:

a - Count the number of ID attributes
b - Count the number of CLASS attributes
c - Count the number of HTML tags in the selector

Write the three numbers as abc with no spaces or commas to obtain a number. Higher numbers win out over lower numbers.

Order of specification

When all else fails, the last one wins.