[W3C] Feuilles de style CSS

A rule set (also called "rule") consists of a selector followed by a declaration block.

A declaration block starts with a left curly brace ({) and ends with the matching right curly brace (}). In between there must be a list of zero or more semicolon-separated (;) declarations.

…

A selector always goes together with a declaration block.

A declaration […] consists of a property name, followed by a colon (:), followed by a property value.

The format of a length value […] is a number (with or without a decimal point) immediately followed by a unit identifier (e.g., px, em, etc.).

Some properties allow negative length values…

Relative length units specify a length relative to another length property.

The 'em' unit is equal to the computed value of the 'font-size' property of the element on which it is used. The exception is when 'em' occurs in the value of the 'font-size' property itself, in which case it refers to the font size of the parent element.

…

The rule:

h1 { line-height: 1.2em }

means that the line height of "h1" elements will be 20% greater than the font size of the "h1" elements. On the other hand:

h1 { font-size: 1.2em }

means that the font-size of "h1" elements will be 20% greater than the font size inherited by "h1" elements.

Absolute length units are fixed in relation to each other. They are mainly useful when the output environment is known. The absolute units consist of the physical units (in, cm, mm, pt, pc) and the px unit:

• in (inches): 1 in is equal to 2.54 cm.
• cm (centimeters).
• mm (millimeters).
• pt: points (the points used by CSS are equal to 1/72nd of 1 in).
• pc: picas (1 pc is equal to 12 pt).
• px: pixel units (1 px is equal to 0.75 pt).

For lower-resolution devices, and devices with unusual viewing distances, it is recommended […] that the anchor unit be the pixel unit. For such devices it is recommended that the pixel unit refer to the whole number of device pixels that best approximates the reference pixel.

The reference pixel is the visual angle of one pixel on a device with a pixel density of 96 dpi and a distance from the reader of an arm's length. For a nominal arm's length of 28 inches, the visual angle is therefore about 0.0213 degrees.

For reading at arm's length, 1 px thus corresponds to about 0.26 mm (1/96 inch).

...

A reading distance of 71 cm (28 inches) results in a reference pixel of 0.26 mm, while a reading distance of 3.5 m (12 feet) results in a reference pixel of 1.3 mm.

The format of a URI value is 'url(' followed by [...] the URI itself […] followed by ')'.

color is either a keyword or a numerical RGB specification.

The list of color keywords is: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, and yellow.

…

The format of an RGB value in hexadecimal notation is a '#' immediately followed by either three or six hexadecimal characters.

A simple selector is either a type selector or universal selector followed immediately by zero or more attribute selectors, ID selectors, or pseudo-classes, in any order.

…

One pseudo-element may be appended to the last simple selector in a chain.

A type selector matches the name of a document language element type. A type selector matches every instance of the element type in the document tree.

The following rule matches all H1 elements in the document tree:

h1 { font-family: sans-serif }

Working with HTML, authors may use the period (.) notation as an alternative to the ~= notation when representing the class attribute. Thus, for HTML, div.value and div[class~=value] have the same meaning.

…

For example, we can assign style information to all elements with class~="pastoral" as follows:

*.pastoral { color: green }  /* all elements with class~=pastoral */

or just

.pastoral { color: green }  /* all elements with class~=pastoral */

The following assigns style only to H1 elements with class~="pastoral":

H1.pastoral { color: green }  /* H1 elements with class~=pastoral */

Given these rules, the first H1 instance below would not have green text, while the second would:

<H1>Not green</H1>
<H1 class="pastoral">Very green</H1>

Document languages may contain attributes that are declared to be of type ID. What makes attributes of type ID special is that no two such attributes can have the same value; whatever the document language, an ID attribute can be used to uniquely identify its element.

The ID attribute of a document language allows authors to assign an identifier to one element instance in the document tree. CSS ID selectors match an element instance based on its identifier. A CSS ID selector contains a "#" immediately followed by the ID value, which must be an identifier.

The following ID selector matches the H1 element whose ID attribute has the value "chapter1":

h1#chapter1 { text-align: center }

Pseudo-classes classify elements on characteristics other than their name, attributes or content; in principle characteristics that cannot be deduced from the document tree.

a:visited { color: blue } /* visited links */
a:hover { color: yellow } /* user hovers */
a:active { color: lime } /* active links */

Pseudo-elements create abstractions about the document tree beyond those specified by the document language. For instance, document languages do not offer mechanisms to access the first letter or first line of an element's content. CSS pseudo-elements allow style sheet designers to refer to this otherwise inaccessible information. Pseudo-elements may also provide style sheet designers a way to assign style to content that does not exist in the source document (e.g., the :before and :after pseudo-elements give access to generated content).

The :first-line pseudo-element applies special styles to the contents of the first formatted line of a paragraph. For instance:

p:first-line { text-transform: uppercase }

The above rule means "change the letters of the first line of every paragraph to uppercase".

The following example combines descendant selectors and child selectors:

div ol > li p

It matches a p element that is a descendant of an li; the li element must be the child of an ol element; the ol element must be a descendant of a div.

Glyphs of serif fonts, as the term is used in CSS, tend to have finishing strokes, flared or tapering ends, or have actual serifed endings (including slab serifs). Serif fonts are typically proportionately-spaced.

Glyphs in sans-serif fonts, as the term is used in CSS, tend to have stroke endings that are plain -- with little or no flaring, cross stroke, or other ornamentation. Sans-serif fonts are typically proportionately-spaced.

The sole criterion of a monospace font is that all glyphs have the same fixed width. (This can make some scripts, such as Arabic, look most peculiar.) The effect is similar to a manual typewriter, and is often used to set samples of computer code.