Cascading Style Sheets

== Syntax ==

CSS has a simple syntax and uses a number of English keywords to specify the names of various style properties.

A style sheet consists of a list of ''rules''. Each rule or rule-set consists of one or more ''selectors'' and a ''declaration block''. A declaration-block consists of a list of ''declarations'' in braces. Each declaration itself consists of a ''property'', a colon (<code>:</code>), a ''value'', then a semi-colon (<code>;</code>).<ref>{{Cite_web|url=http://www.w3.org/TR/CSS21/syndata.html#q10 |title=W3C CSS2.1 specification for rule sets, declaration blocks, and selectors |publisher=W3.org |date= |accessdate=2009-06-20}}</ref>

In CSS, ''selectors'' are used to declare which of the markup elements a style applies to, a kind of match expression. Selectors may apply to all elements of a specific type, or only those elements which match a certain attribute; elements may be matched depending on how they are placed relative to each other in the markup code, or on how they are nested within the document object model.

''Pseudo-classes'' are another form of specification used in CSS to identify markup elements, and in some cases, specific user actions, to which a particular declaration block applies. An often-used example is the <code>:hover</code> pseudo-class that applies a style only when the user 'points to' the visible element, usually by holding the mouse cursor over it. It is appended to a selector as in <code>a:hover</code> or <code>#elementid:hover</code>. Other pseudo-classes and ''pseudo-elements'' are, for example, <code>:first-line</code>, <code>:visited</code> or <code>:before</code>. A special pseudo-class is <code>:lang(c)</code>, "c".

A ''pseudo-class'' selects entire elements, such as <code>:link</code> or <code>:visited</code>, whereas a ''pseudo-element'' makes a selection that may consist of partial elements, such as <code>:first-line</code> or <code>:first-letter</code>.

Selectors may be combined in other ways too, especially in CSS 2.1, to achieve greater specificity and flexibility.<ref>see [http://www.w3.org/TR/CSS21/selector.html the complete definition of selectors at the W3C Web site].</ref>

Here is an example summing up the rules above:
<source lang="css">
selector [, selector2, ...]:pseudo-class {
property: value;
}
/* comment*/
</source>
=== Use of CSS ===

Prior to CSS, nearly all of the presentational attributes of HTML documents were contained within the HTML markup; all font colors, background styles, element alignments, borders and sizes had to be explicitly described, often repeatedly, within the HTML. CSS allows authors to move much of that information to a separate style sheet resulting in considerably simpler HTML markup.

Headings (<code>h1</code> elements), sub-headings (<code>h2</code>), sub-sub-headings (<code>h3</code>), etc., are defined structurally using HTML. In print and on the screen, choice of font, size, color and emphasis for these elements is ''presentational''.

Prior to CSS, document authors who wanted to assign such typographic characteristics to, say, all <code>h2</code> headings had to use the HTML <code>font</code> and other presentational elements for each occurrence of that heading type. The additional presentational markup in the HTML made documents more complex, and generally more difficult to maintain. In CSS, presentation is separated from structure. In print, CSS can define color, font, text alignment, size, borders, spacing, layout and many other typographic characteristics. It can do so independently for on-screen and printed views. CSS also defines non-visual styles such as the speed and emphasis with which text is read out by aural text readers. The [http://www.w3.org/ W3C] now considers the advantages of CSS for defining all aspects of the presentation of HTML pages to be superior to other methods. It has therefore deprecated the use of all the original presentational HTML markup.

=== Sources ===
CSS information can be provided by various sources. CSS style information can be either attached as a separate document or embedded in the HTML document. Multiple style sheets can be imported. Different styles can be applied depending on the output device being used; for example, the screen version can be quite different from the printed version, so that authors can tailor the presentation appropriately for each medium.

Priority scheme for CSS sources (from highest to lowest priority):
* '''Author styles''' (style information provided by the web page author), in the form of
** inline styles, inside the HTML document, style information on a single element, specified using the "style" attribute.
** embedded style, blocks of CSS information inside the HTML document itself
** external style sheets, i.e. a separate CSS-file referenced from the document
* '''User style'''
** a local CSS-file specified by the user using options in the web browser, and acting as an override, to be applied to all documents.
* '''User agent style'''
** the default style sheet applied by the user agent, e.g. the browser's default presentation of elements.

The style sheet with the highest priority gets used to display the content. Declarations that are not set in the highest priority source, will get passed on by a source of lower priority such as the user agent style. This process is called ''cascading''.

One of the goals of CSS is also to allow ''users'' a greater degree of control over presentation; those who find the red italic headings difficult to read may apply other style sheets to the document. Depending on their browser and the web site, a user may choose from various style sheets provided by the designers, may remove all added style and view the site using his or her browser's default styling or may perhaps override just the red italic heading style without altering other attributes.

File <tt>highlightheaders.css</tt> containing:

<source lang="css">
h1 { color: white; background: orange !important; }
h2 { color: white; background: green !important; }
</source>

Such a file is stored locally and is applicable if that has been specified in the browser options. "!important" means that it prevails over the author specifications.