Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in a markup language. It’s most common application is to style web pages written in HTML and XHTML.
CSS can be used locally by the readers of web pages to define colors, fonts, layout, and other aspects of document presentation. It is designed primarily to enable the separation of document content (written in HTML or a similar markup language) from document presentation (written in CSS). This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, and reduce complexity and repetition in the structural content (such as by allowing for tableless web design). CSS can also allow the same markup page to be presented in different styles for different rendering methods, such as on-screen, in print, by voice (when read out by a speech-based browser or screen reader) and on Braille-based, tactile devices.
CSS Structure and Rules
Selectors:
Any HTML element is a possible CSS1 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, an author may wish to display code in a different color depending on its language:
code.html { color: #191970 }
code.css {color: #4b0082}
The above example has created two classes, css and html for use with HTML's CODE element. The CLASS attribute is used in HTML to indicate the class of an element, e.g.,
Only one class is allowed per selector.
For example, code.html.proprietary is invalid.
Classes may also be declared without an associated element:
.note {font-size: small}
ID Selectors:
ID selectors are individually assigned for the purpose of defining on a per-element basis. This selector type should only be used sparingly due to its inherent limitations. An ID selector is assigned by using the indicator "#" to precede a name. For example, an ID selector could be assigned as such:
# {text-indent: 3em}
This would be referenced in HTML by the ID attribute:
Grouping:
In order to decrease repetitious statements within style sheets, grouping of selectors and declarations is allowed. For example, all of the headings in a document could be given identical declarations through a grouping:
H1, H2, H3, H4, H5, H6 {color: red; font-family: sans-serif}
Inheritance:
Virtually all selectors which are nested within selectors will inherit the property values assigned to the outer selector unless otherwise modified. For example, a color defined for the BODY will also be applied to text in a paragraph.
There are some cases where the inner selector does not inherit the surrounding selector's values, but these should stand out logically. For example, the margin-top property is not inherited; intuitively, a paragraph would not have the same top margin as the document body.
