Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting of a document written in a markup language. While most often used to style web pages and interfaces written in HTML and XHTML, the language can be applied to any kind of XML document, including plain XML, SVG andXUL.

CSS is designed primarily to enable the separation of document content from document presentation, including elements such as the layout, colors, and fonts.^[1] This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple pages to share formatting, 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. It can also be used to allow the web page to display differently depending on the screen size or device on which it is being viewed. While the author of a document typically links that document to a CSS file, readers can use a different style sheet, perhaps one on their own computer, to override the one the author has specified. However if the author or the reader did not link the document to a specific style sheet the default style of the browser will be applied.

CSS specifies a priority scheme to determine which style rules apply if more than one rule matches against a particular element. In this so-called cascade, priorities orweights are calculated and assigned to rules, so that the results are predictable.

The CSS specifications are maintained by the World Wide Web Consortium (W3C). Internet media type (MIME type) text/css is registered for use with CSS byRFC 2318 (March 1998), and they also operate a free CSS validation service.^[2]

Syntax[edit]

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.

Selector[edit]

In CSS, selectors are used to declare which part of the markup a style applies to, a kind of match expression. Selectors may apply to:

• all elements of a specific type, e.g. the second level headers h2
• to elements specified by attribute, in particular:
  • id: an identifier unique to the document
  • class
• to elements depending on how they are placed relative to, or nested within, others in the document tree.

Pseudo-classes are used in CSS selectors to permit formatting based on information that is outside the document tree. An often-used example of a pseudo-class is :hover, which identifies content 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 a:hover or #elementid:hover. A pseudo-class classifies document elements, such as :link or :visited, whereas apseudo-element makes a selection that may consist of partial elements, such as :first-line or :first-letter.^[3]

Selectors may be combined in many ways, especially in CSS 2.1, to achieve great specificity and flexibility.^[4]

Declaration block[edit]

A declaration block consists of a list of declarations in braces. Each declaration itself consists of a property, a colon (:), and a value. If there are multiple declarations in a block, a semi-colon (;) must be inserted to separate each declaration.^[5]

Use[edit]

Before 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 another file, the style sheet, resulting in considerably simpler HTML.

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

Before CSS, document authors who wanted to assign such typographic characteristics to, say, all h2 headings had to repeat HTML presentational markup for each occurrence of that heading type. This made documents more complex, larger, and more error-prone and difficult to maintain. CSS allows the separation of presentation from structure. CSS can define color, font, text alignment, size, borders, spacing, layout and many other typographic characteristics, and 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 W3C has now deprecated the use of all presentational HTML markup.^{[citation needed]}

For example, under pre-CSS HTML, a header element defined with red text would be written as:

<h1><font color="red"> Chapter 1. </font></h1>

Using CSS, the same element can be coded using style properties instead of HTML presentational attributes:

<h1 style="color:red"> Chapter 1. </h1>

An "external" CSS file, as described below, can be associated with an HTML document using the following syntax:

<link href="path/to/file.css" rel="stylesheet">

An internal CSS code can be typed in the head section of the code. The coding is started with the style tag. For example,

<style type="text/css">