CSS

Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting of a document written in a markup language. Although most often used to change the style of web pages and user interfaces written in HTML and XHTML, the language can be applied to any kind of XML document, including plain XML, SVG and XUL. Along with HTML and JavaScript, CSS is a cornerstone technology used by most websites to create visually engaging webpages, user interfaces for web applications, and user interfaces for many mobile applications. At its most basic level, CSS consists of two building blocks:

• Properties: Human-readable identifiers that indicate which stylistic features (e.g. font, width, background color) you want to change.
• Values: Each specified property is given a value, which indicates how you want to change those stylistic features (e.g. what you want to change the font, width or background color to.)

A property paired with a value is called a CSS declaration. CSS declarations are put within CSS Declaration Blocks. And finally, CSS declaration blocks are paired with selectors to produce CSS Rulesets (or CSS Rules).

An element may be matched by several selectors, therefore several rules may set a given property multiple times. CSS defines which one has precedence over the others and must be applied: this is called the cascade algorithm.

CSS statements

CSS Rules are the main building blocks of a style sheet — the most common block you'll see in CSS. But there are other types of block that you'll come across occasionally — CSS rules are one type of so-called CSS statements. An at-rule is a CSS statement beginning with an at sign, '@' (U+0040 COMMERCIAL AT), followed by an identifier and includes everything up to the next semi-colon, ';' (U+003B SEMICOLON), or the next CSS block, whichever comes first.

There are several at-rules, designated by their identifiers, each with a different syntax:

• @charset: Defines the character set used by the style sheet.
• @import: Tells the CSS engine to include an external style sheet.
• @namespace: Tells the CSS engine that all its content must be considered prefixed with an XML namespace.
• Nested at-rules: A subset of nested statements, which can be used as a statement of a style sheet as well as inside of conditional group rules:
  • @media: A conditional group rule which will apply its content if the device meets the criteria of the condition defined using a media query.
  • @supports: A conditional group rule which will apply its content if the browser meets the criteria of the given condition.
  • @document: A conditional group rule which will apply its content if the document in which the style sheet is applied meets the criteria of the given condition. (deferred to Level 4 of CSS Spec)
  • @page: Describes the aspect of layout changes which will be applied when printing the document.
  • @font-face: Describes the aspect of an external font to be downloaded.
  • @keyframes: Describes the aspect of intermediate steps in a CSS animation sequence.
  • @viewport: Describes the aspects of the viewport for small screen devices.

One example:

@media (min-width: 801px) {
  body {
    margin: 0 auto;
    width: 800px;
  }
}

import

The @import CSS at-rule is used to import style rules from other style sheets. These rules must precede all other types of rules, except @charset rules; as it is not a nested statement, @import cannot be used inside conditional group at-rules.

charset

The @charset CSS at-rule specifies the character encoding used in the style sheet. It must be the first element in the style sheet and not be preceded by any character; as it is not a nested statement, it cannot be used inside conditional group at-rules. If several @charset at-rules are defined, only the first one is used, and it cannot be used inside a style attribute on an HTML element or inside the