Johann Sebastian Bach was a prolific composer.
To set the text color of the H1 elements to blue, you can write the
following CSS rule:
h1 { color: blue }
A CSS rule consists of two main parts: selector ('h1') and declaration
('color: blue'). In HTML, element names are case-insensitive so 'h1'
works just as well as 'H1'. The declaration has two parts: property
('color') and value ('blue'). While the example above tries to
influence only one of the properties needed for rendering an HTML
document, it qualifies as a style sheet on its own. Combined with
other style sheets (one fundamental feature of CSS is that style
sheets are combined) it will determine the final presentation of the
document.
The HTML 4.0 specification defines how style sheet rules may be
specified for HTML documents: either within the HTML document, or via
an external style sheet. To put the style sheet into the document, use
the STYLE element:
Bach's home page
Bach's home page
Johann Sebastian Bach was a prolific composer.
For maximum flexibility, we recommend that authors specify external
style sheets; they may be changed without modifying the source HTML
document, and they may be shared among several documents. To link to
an external style sheet, you can use the LINK element:
Bach's home page
Bach's home page
Johann Sebastian Bach was a prolific composer.
The LINK element specifies:
* the type of link: to a "stylesheet".
* the location of the style sheet via the "href" attribute.
* the type of style sheet being linked: "text/css".
To show the close relationship between a style sheet and the
structured markup, we continue to use the STYLE element in this
tutorial. Let's add more colors:
Bach's home page
Bach's home page
Johann Sebastian Bach was a prolific composer.
The style sheet now contains two rules: the first one sets the color
of the BODY element to 'red', while the second one sets the color of
the H1 element to 'blue'. Since no color value has been specified for
the P element, it will inherit the color from its parent element,
namely BODY. The H1 element is also a child element of BODY but the
second rule overrides the inherited value. In CSS there are often such
conflicts between different values, and this specification describes
how to resolve them.
CSS 2.1 has more than 90 different properties, including 'color'.
Let's look at some of the others:
Bach's home page
Bach's home page
Johann Sebastian Bach was a prolific composer.
The first thing to notice is that several declarations are grouped
within a block enclosed by curly braces ({...}), and separated by
semicolons, though the last declaration may also be followed by a
semicolon.
The first declaration on the BODY element sets the font family to
"Gill Sans". If that font isn't available, the user agent (often
referred to as a "browser") will use the 'sans-serif' font family
which is one of five generic font families which all users agents
know. Child elements of BODY will inherit the value of the
'font-family' property.
The second declaration sets the font size of the BODY element to 12
points. The "point" unit is commonly used in print-based typography to
indicate font sizes and other length values. It's an example of an
absolute unit which does not scale relative to the environment.
The third declaration uses a relative unit which scales with regard to
its surroundings. The "em" unit refers to the font size of the
element. In this case the result is that the margins around the BODY
element are three times wider than the font size.
2.2 A brief CSS 2.1 tutorial for XML
CSS can be used with any structured document format, for example with
applications of the eXtensible Markup Language [XML10]. In fact, XML
depends more on style sheets than HTML, since authors can make up
their own elements that user agents don't know how to display.
Here is a simple XML fragment:
Fredrick the Great meets BachJohann Nikolaus Forkel
One evening, just as he was getting his
flute ready and his
musicians were assembled, an officer brought him a list of
the strangers who had arrived.
To display this fragment in a document-like fashion, we must first
declare which elements are inline-level (i.e., do not cause line
breaks) and which are block-level (i.e., cause line breaks).
INSTRUMENT { display: inline }
ARTICLE, HEADLINE, AUTHOR, PARA { display: block }
The first rule declares INSTRUMENT to be inline and the second rule,
with its comma-separated list of selectors, declares all the other
elements to be block-level. Element names in XML are case-sensitive,
so a selector written in lowercase (e.g. 'instrument') is different
from uppercase (e.g. 'INSTRUMENT').
One proposal for linking a style sheet to an XML document is to use a
processing instruction:
Fredrick the Great meets BachJohann Nikolaus Forkel
One evening, just as he was getting his
flute ready and his
musicians were assembled, an officer brought him a list of
the strangers who had arrived.
A visual user agent could format the above example as:
Example rendering
Notice that the word "flute" remains within the paragraph since it is
the content of the inline element INSTRUMENT.
Still, the text isn't formatted the way you would expect. For example,
the headline font size should be larger than then the rest of the
text, and you may want to display the author's name in italic:
INSTRUMENT { display: inline }
ARTICLE, HEADLINE, AUTHOR, PARA { display: block }
HEADLINE { font-size: 1.3em }
AUTHOR { font-style: italic }
ARTICLE, HEADLINE, AUTHOR, PARA { margin: 0.5em }
A visual user agent could format the above example as:
Example rendering
Adding more rules to the style sheet will allow you to further
describe the presentation of the document.
2.3 The CSS 2.1 processing model
This section presents one possible model of how user agents that
support CSS work. This is only a conceptual model; real
implementations may vary.
In this model, a user agent processes a source by going through the
following steps:
1. Parse the source document and create a document tree.
2. Identify the target media type.
3. Retrieve all style sheets associated with the document that are
specified for the target media type.
4. Annotate every element of the document tree by assigning a single
value to every property that is applicable to the target media
type. Properties are assigned values according to the mechanisms
described in the section on cascading and inheritance.
Part of the calculation of values depends on the formatting
algorithm appropriate for the target media type. For example, if
the target medium is the screen, user agents apply the visual
formatting model. If the destination medium is the printed page,
user agents apply the page model. If the destination medium is an
aural rendering device (e.g., speech synthesizer), user agents
apply the aural rendering model.
5. From the annotated document tree, generate a formatting structure.
Often, the formatting structure closely resembles the document
tree, but it may also differ significantly, notably when authors
make use of pseudo-elements and generated content. First, the
formatting structure need not be "tree-shaped" at all -- the
nature of the structure depends on the implementation. Second, the
formatting structure may contain more or less information than the
document tree. For instance, if an element in the document tree
has a value of 'none' for the 'display' property, that element
will generate nothing in the formatting structure. A list element,
on the other hand, may generate more information in the formatting
structure: the list element's content and list style information
(e.g., a bullet image).
Note that the CSS user agent does not alter the document tree
during this phase. In particular, content generated due to style
sheets is not fed back to the document language processor (e.g.,
for reparsing).
6. Transfer the formatting structure to the target medium (e.g.,
print the results, display them on the screen, render them as
speech, etc.).
Step 1 lies outside the scope of this specification (see, for example,
[DOM]).
Steps 2-5 are addressed by the bulk of this specification.
Step 6 lies outside the scope of this specification.
2.3.1 The canvas
For all media, the term canvas describes "the space where the
formatting structure is rendered." The canvas is infinite for each
dimension of the space, but rendering generally occurs within a finite
region of the canvas, established by the user agent according to the
target medium. For instance, user agents rendering to a screen
generally impose a minimum width and choose an initial width based on
the dimensions of the viewport. User agents rendering to a page
generally impose width and height constraints. Aural user agents may
impose limits in audio space, but not in time.
2.3.2 CSS 2.1 addressing model
CSS 2.1 selectors and properties allow style sheets to refer to the
following parts of a document or user agent:
* Elements in the document tree and certain relationships between
them (see the section on selectors).
* Attributes of elements in the document tree, and values of those
attributes (see the section on attribute selectors).
* Some parts of element content (see the :first-line and
:first-letter pseudo-elements.
* Elements of the document tree when they are in a certain state
(see the section on pseudo-classes).
* Some aspects of the canvas where the document will be rendered.
* Some system information (see the section on user interface).
2.4 CSS design principles
CSS 2.1, as CSS2 and CSS1 before it, is based on a set of design
principles:
* Forward and backward compatibility. CSS 2.1 user agents will be
able to understand CSS1 style sheets. CSS1 user agents will be
able to read CSS 2.1 style sheets and discard parts they don't
understand. Also, user agents with no CSS support will be able to
display style-enhanced documents. Of course, the stylistic
enhancements made possible by CSS will not be rendered, but all
content will be presented.
* Complementary to structured documents. Style sheets complement
structured documents (e.g., HTML and XML applications), providing
stylistic information for the marked-up text. It should be easy to
change the style sheet with little or no impact on the markup.
* Vendor, platform, and device independence. Style sheets enable
documents to remain vendor, platform, and device independent.
Style sheets themselves are also vendor and platform independent,
but CSS 2.1 allows you to target a style sheet for a group of
devices (e.g., printers).
* Maintainability. By pointing to style sheets from documents,
webmasters can simplify site maintenance and retain consistent
look and feel throughout the site. For example, if the
organization's background color changes, only one file needs to be
changed.
* Simplicity. CSS is a simple style language which is human readable
and writable. The CSS properties are kept independent of each
other to the largest extent possible and there is generally only
one way to achieve a certain effect.
* Network performance. CSS provides for compact encodings of how to
present content. Compared to images or audio files, which are
often used by authors to achieve certain rendering effects, style
sheets most often decrease the content size. Also, fewer network
connections have to be opened which further increases network
performance.
* Flexibility. CSS can be applied to content in several ways. The
key feature is the ability to cascade style information specified
in the default (user agent) style sheet, user style sheets, linked
style sheets, the document head, and in attributes for the
elements forming the document body.
* Richness. Providing authors with a rich set of rendering effects
increases the richness of the Web as a medium of expression.
Designers have been longing for functionality commonly found in
desktop publishing and slide-show applications. Some of the
requested rendering effects conflict with device independence, but
CSS 2.1 goes a long way toward granting designers their requests.
* Alternative language bindings. The set of CSS properties described
in this specification form a consistent formatting model for
visual and aural presentations. This formatting model can be
accessed through the CSS language, but bindings to other languages
are also possible. For example, a JavaScript program may
dynamically change the value of a certain element's 'color'
property.
* Accessibility. Several CSS features will make the Web more
accessible to users with disabilities:
+ Properties to control font appearance allow authors to
eliminate inaccessible bit-mapped text images.
+ Positioning properties allow authors to eliminate mark-up
tricks (e.g., invisible images) to force layout.
+ The semantics of !important rules mean that users with
particular presentation requirements can override the
author's style sheets.
+ The 'inherit' value for all properties improves cascading
generality and allows for easier and more consistent style
tuning.
+ Improved media support, including media groups and the
braille, embossed, and tty media types, will allow users and
authors to tailor pages to those devices.
Note. For more information about designing accessible documents
using CSS and HTML, see [WAI-PAGEAUTH].
_________________________________________________________________
_________________________________________________________________
3 Conformance: Requirements and Recommendations
Contents
* 3.1 Definitions
* 3.2 Conformance
* 3.3 Error conditions
* 3.4 The text/css content type
3.1 Definitions
In this section, we begin the formal specification of CSS 2.1,
starting with the contract between authors, users, and implementors.
The key words "MUST", "MUST NOT", "REQUIRED", "SHALL", "SHALL NOT",
"SHOULD", "SHOULD NOT", "RECOMMENDED", "MAY", and "OPTIONAL" in this
document are to be interpreted as described in RFC 2119 (see
[RFC2119]). However, for readability, these words do not appear in all
uppercase letters in this specification.
At times, this specification recommends good practice for authors and
user agents. These recommendations are not normative and conformance
with this specification does not depend on their realization. These
recommendations contain the expression "We recommend ...", "This
specification recommends ...", or some similar wording.
Style sheet
A set of statements that specify presentation of a document.
Style sheets may have three different origins: author, user,
and user agent. The interaction of these sources is described
in the section on cascading and inheritance.
Valid style sheet
The validity of a style sheet depends on the level of CSS used
for the style sheet. All valid CSS1 style sheets are valid
CSS 2.1 style sheets, but some changes from CSS1 mean that a
few CSS1 style sheets will have slightly different semantics in
CSS 2.1. Some features in CSS2 are not part of CSS 2.1, so not
all CSS2 style sheets are valid CSS 2.1 style sheets.
A valid CSS 2.1 style sheet must be written according to the
grammar of CSS 2.1. Furthermore, it must contain only at-rules,
property names, and property values defined in this
specification. An illegal (invalid) at-rule, property name, or
property value is one that is not valid.
Source document
The document to which one or more style sheets refer. This is
encoded in some language that represents the document as a tree
of elements. Each element consists of a name that identifies
the type of element, optionally a number of attributes, and a
(possibly empty) content.
Document language
The encoding language of the source document (e.g., HTML, XHTML
or SVG).
Element
(An SGML term, see [ISO8879].) The primary syntactic constructs
of the document language. Most CSS style sheet rules use the
names of these elements (such as P, TABLE, and OL in HTML) to
specify how the elements should be rendered.
Replaced element
An element for which the CSS formatter knows only the intrinsic
dimensions. In HTML, IMG and OBJECT elements can be replaced
elements. For example, the content of the IMG element is often
replaced by the image that the "src" attribute designates.
Intrinsic dimensions
The width and height as defined by the element itself, not
imposed by the surroundings. CSS does not define how the
intrinsic dimensions are found. In CSS 2.1 it is assumed that
all replaced elements, and only replaced elements, come with
intrinsic dimensions.
Attribute
A value associated with an element, consisting of a name, and
an associated (textual) value.
Content
The content associated with an element in the source document;
not all elements have content in which case they are called
empty. The content of an element may include text, and it may
include a number of sub-elements, in which case the element is
called the parent of those sub-elements.
Rendered content
The content of an element after the rendering that applies to
it according to the relevant style sheets has been applied. The
rendered content of a replaced element comes from outside the
source document. Rendered content may also be alternate text
for an element (e.g., the value of the XHTML "alt" attribute),
and may include items inserted implicitly or explicitly by the
style sheet, such as bullets, numbering, etc.
Document tree
The tree of elements encoded in the source document. Each
element in this tree has exactly one parent, with the exception
of the root element, which has none.
Child
An element A is called the child of element B if and only if B
is the parent of A.
Descendant
An element A is called a descendant of an element B, if either
(1) A is a child of B, or (2) A is the child of some element C
that is a descendant of B.
Ancestor
An element A is called an ancestor of an element B, if and only
if B is a descendant of A.
Sibling
An element A is called a sibling of an element B, if and only
if B and A share the same parent element. Element A is a
preceding sibling if it comes before B in the document tree.
Element B is a following sibling if it comes after A in the
document tree.
Preceding element
An element A is called a preceding element of an element B, if
and only if (1) A is an ancestor of B or (2) A is a preceding
sibling of B.
Following element
An element A is called a following element of an element B, if
and only if B is a preceding element of A.
Author
An author is a person who writes documents and associated style
sheets. An authoring tool generates documents and associated
style sheets.
User
A user is a person who interacts with a user agent to view,
hear, or otherwise use a document and its associated style
sheet. The user may provide a personal style sheet that encodes
personal preferences.
User agent (UA)
A user agent is any program that interprets a document written
in the document language and applies associated style sheets
according to the terms of this specification. A user agent may
display a document, read it aloud, cause it to be printed,
convert it to another format, etc.
An HTML user agent is one that supports the HTML 2.x, HTML 3.x,
or HTML 4.x specifications. A user agent that supports XHTML
[XHTML], but not HTML (as listed in the previous sentence) is
not considered an HTML user agent for the purpose of
conformance with this specification.
Here is an example of a source document written in HTML:
My home page
My home page
Welcome to my home page! Let me tell you about my favorite
composers:
Elvis Costello
Johannes Brahms
Georges Brassens
This results in the following tree:
Sample document tree
According to the definition of HTML 4.0, HEAD elements will be
inferred during parsing and become part of the document tree even if
the "head" tags are not in the document source. Similarly, the parser
knows where the P and LI elements end, even though there are no
and tags in the source.
Documents written in XHTML (and other XML-based languages) behave
differently: there are no inferred elements and all elements must have
end tags.
3.2 Conformance
This section defines conformance with the CSS 2.1 specification only.
There may be other levels of CSS in the future that may require a user
agent to implement a different set of features in order to conform.
In general, the following points must be observed by a user agent
claiming conformance to this specification:
1. It must support one or more of the CSS 2.1 media types.
2. For each source document, it must attempt to retrieve all
associated style sheets that are appropriate for the supported
media types. If it cannot retrieve all associated style sheets
(for instance, because of network errors), it must display the
document using those it can retrieve.
3. It must parse the style sheets according to this specification. In
particular, it must recognize all at-rules, blocks, declarations,
and selectors (see the grammar of CSS 2.1). If a user agent
encounters a property that applies for a supported media type, the
user agent must parse the value according to the property
definition. This means that the user agent must accept all valid
values and must ignore declarations with invalid values. User
agents must ignore rules that apply to unsupported media types.
4. For each element in a document tree, it must assign a value for
every applicable property according to the property's definition
and the rules of cascading and inheritance.
5. If the source document comes with alternate style sheet sets (such
as with the "alternate" keyword in HTML 4.0 [HTML40]), the UA must
allow the user to select one from among these sets and apply the
selected one.
Not every user agent must observe every point, however:
* An application that reads style sheets without rendering any
content (e.g., a CSS 2.1 validator) must respect points 1-3.
* An authoring tool is only required to output valid style sheets
* A user agent that renders a document with associated style sheets
must respect points 1-5 and render the document according to the
media-specific requirements set forth in this specification.
Values may be approximated when required by the user agent.
The inability of a user agent to implement part of this specification
due to the limitations of a particular device (e.g., a user agent
cannot render colors on a monochrome monitor or page) does not imply
non-conformance.
UAs must allow users to specify a file that contains the user style
sheet. UAs that run on devices without any means of writing or
specifying files are exempted from this requirement. Additionally, UAs
may offer other means to specify user preferences, for example through
a GUI.
3.3 Error conditions
In general, this document does not specify error handling behavior for
user agents (e.g., how they behave when they cannot find a resource
designated by a URI).
However, user agents must observe the rules for handling parsing
errors.
Since user agents may vary in how they handle error conditions,
authors and users must not rely on specific error recovery behavior.
3.4 The text/css content type
CSS style sheets that exist in separate files are sent over the
Internet as a sequence of bytes accompanied by encoding information.
The structure of the transmission, termed a message entity, is defined
by RFC 2045 and RFC 2068 (see [RFC2045] and [RFC2068]). A message
entity with a content type of "text/css" represents an independent CSS
document. The "text/css" content type has been registered by RFC 2318
([RFC2318]).
_________________________________________________________________
_________________________________________________________________
4 CSS 2.1 syntax and basic data types
Contents
* 4.1 Syntax
+ 4.1.1 Tokenization
+ 4.1.2 Keywords
+ 4.1.3 Characters and case
+ 4.1.4 Statements
+ 4.1.5 At-rules
+ 4.1.6 Blocks
+ 4.1.7 Rule sets, declaration blocks, and selectors
+ 4.1.8 Declarations and properties
+ 4.1.9 Comments
* 4.2 Rules for handling parsing errors
* 4.3 Values
+ 4.3.1 Integers and real numbers
+ 4.3.2 Lengths
+ 4.3.3 Percentages
+ 4.3.4 URL + URN = URI
+ 4.3.5 Colors
+ 4.3.6 Strings
* 4.4 CSS document representation
+ 4.4.1 Referring to characters not represented in a character
encoding
4.1 Syntax
This section describes a grammar (and forward-compatible parsing
rules) common to any version of CSS (including CSS 2.1). Future
versions of CSS will adhere to this core syntax, although they may add
additional syntactic constraints.
These descriptions are normative. They are also complemented by the
normative grammar rules presented in Appendix D.
4.1.1 Tokenization
All levels of CSS -- level 1, level 2, and any future levels -- use
the same core syntax. This allows UAs to parse (though not completely
understand) style sheets written in levels of CSS that didn't exist at
the time the UAs were created. Designers can use this feature to
create style sheets that work with older user agents, while also
exercising the possibilities of the latest levels of CSS.
At the lexical level, CSS style sheets consist of a sequence of
tokens. The list of tokens for CSS 2.1 is as follows. The definitions
use Lex-style regular expressions. Octal codes refer to ISO 10646
([ISO10646]). As in Lex, in case of multiple matches, the longest
match determines the token.
Token Definition
_________________________________________________________________
IDENT {ident}
ATKEYWORD @{ident}
STRING {string}
HASH #{name}
NUMBER {num}
PERCENTAGE {num}%
DIMENSION {num}{ident}
URI url\({w}{string}{w}\)
|url\({w}([!#$%&*-~]|{nonascii}|{escape})*{w}\)
UNICODE-RANGE U\+[0-9A-F?]{1,6}(-[0-9A-F]{1,6})?
CDO
; ;
{ \{
} \}
( \(
) \)
[ \[
] \]
S [ \t\r\n\f]+
COMMENT \/\*[^*]*\*+([^/][^*]*\*+)*\/
FUNCTION {ident}\(
INCLUDES ~=
DASHMATCH |=
DELIM any other character not matched by the above rules, and neither
a single nor a double quote
The macros in curly braces ({}) above are defined as follows:
Macro Definition
_________________________________________________________________
ident {nmstart}{nmchar}*
name {nmchar}+
nmstart [_a-zA-Z]|{nonascii}|{escape}
nonascii [^\0-\177]
unicode \\[0-9a-f]{1,6}[ \n\r\t\f]?
escape {unicode}|\\[ -~\200-\4177777]
nmchar [_a-zA-Z0-9-]|{nonascii}|{escape}
num [0-9]+|[0-9]*\.[0-9]+
string {string1}|{string2}
string1 \"([\t !#$%&(-~]|\\{nl}|\'|{nonascii}|{escape})*\"
string2 \'([\t !#$%&(-~]|\\{nl}|\"|{nonascii}|{escape})*\'
nl \n|\r\n|\r|\f
w [ \t\r\n\f]*
Below is the core syntax for CSS. The sections that follow describe
how to use it. Appendix D describes a more restrictive grammar that is
closer to the CSS level 2 language.
stylesheet : [ CDO | CDC | S | statement ]*;
statement : ruleset | at-rule;
at-rule : ATKEYWORD S* any* [ block | ';' S* ];
block : '{' S* [ any | block | ATKEYWORD S* | ';' ]* '}' S*;
ruleset : selector? '{' S* declaration? [ ';' S* declaration? ]* '}' S*;
selector : any+;
declaration : property ':' S* value;
property : IDENT S*;
value : [ any | block | ATKEYWORD S* ]+;
any : [ IDENT | NUMBER | PERCENTAGE | DIMENSION | STRING
| DELIM | URI | HASH | UNICODE-RANGE | INCLUDES
| FUNCTION any* ')' | DASHMATCH | '(' any* ')' | '[' any* ']' ] S
*;
COMMENT tokens do not occur in the grammar (to keep it readable), but
any number of these tokens may appear anywhere between other tokens.
The token S in the grammar above stands for whitespace. Only the
characters "space" (Unicode code 32), "tab" (9), "line feed" (10),
"carriage return" (13), and "form feed" (12) can occur in whitespace.
Other space-like characters, such as "em-space" (8195) and
"ideographic space" (12288), are never part of whitespace.
4.1.2 Keywords
Keywords have the form of identifiers. Keywords must not be placed
between quotes ("..." or '...'). Thus,
red
is a keyword, but
"red"
is not. (It is a string.) Other illegal examples:
Illegal example(s):
width: "auto";
border: "none";
font-family: "serif";
background: "red";
4.1.3 Characters and case
The following rules always hold:
* All CSS style sheets are case-insensitive, except for parts that
are not under the control of CSS. For example, the
case-sensitivity of values of the HTML attributes "id" and
"class", of font names, and of URIs lies outside the scope of this
specification. Note in particular that element names are
case-insensitive in HTML, but case-sensitive in XML.
* In CSS 2.1, identifiers (including element names, classes, and IDs
in selectors) can contain only the characters [A-Za-z0-9] and ISO
10646 characters 161 and higher, plus the hyphen (-) and the
underscore (_); they cannot start with a hyphen or a digit. They
can also contain escaped characters and any ISO 10646 character as
a numeric code (see next item). For instance, the identifier
"B&W?" may be written as "B\&W\?" or "B\26 W\3F".
Note that Unicode is code-by-code equivalent to ISO 10646 (see
[UNICODE] and [ISO10646]).
* In CSS 2.1, a backslash (\) character indicates three types of
character escapes.
First, inside a string, a backslash followed by a newline is
ignored (i.e., the string is deemed not to contain either the
backslash or the newline).
Second, it cancels the meaning of special CSS characters. Any
character (except a hexadecimal digit) can be escaped with a
backslash to remove its special meaning. For example, "\"" is a
string consisting of one double quote. Style sheet preprocessors
must not remove these backslashes from a style sheet since that
would change the style sheet's meaning.
Third, backslash escapes allow authors to refer to characters they
can't easily put in a document. In this case, the backslash is
followed by at most six hexadecimal digits (0..9A..F), which stand
for the ISO 10646 ([ISO10646]) character with that number. If a
digit or letter follows the hexadecimal number, the end of the
number needs to be made clear. There are two ways to do that:
1. with a space (or other whitespace character): "\26 B" ("&B").
In this case, user agents should treat a "CR/LF" pair (13/10)
as a single whitespace character.
2. by providing exactly 6 hexadecimal digits: "\000026B" ("&B")
In fact, these two methods may be combined. Only one whitespace
character is ignored after a hexadecimal escape. Note that this
means that a "real" space after the escape sequence must itself
either be escaped or doubled.
* Backslash escapes are always considered to be part of an
identifier or a string (i.e., "\7B" is not punctuation, even
though "{" is, and "\32" is allowed at the start of a class name,
even though "2" is not).
4.1.4 Statements
A CSS style sheet, for any version of CSS, consists of a list of
statements (see the grammar above). There are two kinds of statements:
at-rules and rule sets. There may be whitespace around the statements.
In this specification, the expressions "immediately before" or
"immediately after" mean with no intervening whitespace or comments.
4.1.5 At-rules
At-rules start with an at-keyword, an '@' character followed
immediately by an identifier (for example, '@import', '@page').
An at-rule consists of everything up to and including the next
semicolon (;) or the next block, whichever comes first. A CSS user
agent that encounters an unrecognized at-rule must ignore the whole of
the at-rule and continue parsing after it.
CSS 2.1 user agents must ignore any '@import' rule that occurs inside
a block or that doesn't precede all rule sets.
Illegal example(s):
Assume, for example, that a CSS 2.1 parser encounters this style
sheet:
@import "subs.css";
h1 { color: blue }
@import "list.css";
The second '@import' is illegal according to CSS2. The CSS 2.1 parser
ignores the whole at-rule, effectively reducing the style sheet to:
@import "subs.css";
h1 { color: blue }
Illegal example(s):
In the following example, the second '@import' rule is invalid, since
it occurs inside a '@media' block.
@import "subs.css";
@media print {
@import "print-main.css";
body { font-size: 10pt }
}
h1 {color: blue }
4.1.6 Blocks
A block starts with a left curly brace ({) and ends with the matching
right curly brace (}). In between there may be any characters, except
that parentheses (( )), brackets ([ ]) and braces ({ }) must always
occur in matching pairs and may be nested. Single (') and double
quotes (") must also occur in matching pairs, and characters between
them are parsed as a string. See Tokenization above for the definition
of a string.
Illegal example(s):
Here is an example of a block. Note that the right brace between the
double quotes does not match the opening brace of the block, and that
the second single quote is an escaped character, and thus doesn't
match the first single quote:
{ causta: "}" + ({7} * '\'') }
Note that the above rule is not valid CSS 2.1, but it is still a block
as defined above.
4.1.7 Rule sets, declaration blocks, and selectors
A rule set (also called "rule") consists of a selector followed by a
declaration block.
A declaration-block (also called a {}-block in the following text)
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.
The selector (see also the section on selectors) consists of
everything up to (but not including) the first left curly brace ({). A
selector always goes together with a {}-block. When a user agent can't
parse the selector (i.e., it is not valid CSS 2.1), it must ignore the
{}-block as well.
CSS 2.1 gives a special meaning to the comma (,) in selectors.
However, since it is not known if the comma may acquire other meanings
in future versions of CSS, the whole statement should be ignored if
there is an error anywhere in the selector, even though the rest of
the selector may look reasonable in CSS 2.1.
Illegal example(s):
For example, since the "&" is not a valid token in a CSS 2.1 selector,
a CSS 2.1 user agent must ignore the whole second line, and not set
the color of H3 to red:
h1, h2 {color: green }
h3, h4 & h5 {color: red }
h6 {color: black }
Example(s):
Here is a more complex example. The first two pairs of curly braces
are inside a string, and do not mark the end of the selector. This is
a valid CSS 2.1 statement.
p[example="public class foo\
{\
private int x;\
\
foo(int x) {\
this.x = x;\
}\
\
}"] { color: red }
4.1.8 Declarations and properties
A declaration is either empty or consists of a property, followed by a
colon (:), followed by a value. Around each of these there may be
whitespace.
Because of the way selectors work, multiple declarations for the same
selector may be organized into semicolon (;) separated groups.
Example(s):
Thus, the following rules:
h1 { font-weight: bold }
h1 { font-size: 12px }
h1 { line-height: 14px }
h1 { font-family: Helvetica }
h1 { font-variant: normal }
h1 { font-style: normal }
are equivalent to:
h1 {
font-weight: bold;
font-size: 12px;
line-height: 14px;
font-family: Helvetica;
font-variant: normal;
font-style: normal
}
A property is an identifier. Any character may occur in the value, but
parentheses ("( )"), brackets ("[ ]"), braces ("{ }"), single quotes
(') and double quotes (") must come in matching pairs, and semicolons
not in strings must be escaped. Parentheses, brackets, and braces may
be nested. Inside the quotes, characters are parsed as a string.
The syntax of values is specified separately for each property, but in
any case, values are built from identifiers, strings, numbers,
lengths, percentages, URIs, colors, angles, times, and frequencies.
A user agent must ignore a declaration with an invalid property name
or an invalid value. Every CSS 2.1 property has its own syntactic and
semantic restrictions on the values it accepts.
Illegal example(s):
For example, assume a CSS 2.1 parser encounters this style sheet:
h1 { color: red; font-style: 12pt } /* Invalid value: 12pt */
p { color: blue; font-vendor: any; /* Invalid prop.: font-vendor */
font-variant: small-caps }
em em { font-style: normal }
The second declaration on the first line has an invalid value '12pt'.
The second declaration on the second line contains an undefined
property 'font-vendor'. The CSS 2.1 parser will ignore these
declarations, effectively reducing the style sheet to:
h1 { color: red; }
p { color: blue; font-variant: small-caps }
em em { font-style: normal }
4.1.9 Comments
Comments begin with the characters "/*" and end with the characters
"*/". They may occur anywhere between tokens, and their contents have
no influence on the rendering. Comments may not be nested.
CSS also allows the SGML comment delimiters ("") in
certain places, but they do not delimit CSS comments. They are
permitted so that style rules appearing in an HTML source document (in
the STYLE element) may be hidden from pre-HTML 3.2 user agents. See
the HTML 4.0 specification ([HTML40]) for more information.
4.2 Rules for handling parsing errors
In some cases, user agents must ignore part of an illegal style sheet.
This specification defines ignore to mean that the user agent parses
the illegal part (in order to find its beginning and end), but
otherwise acts as if it had not been there.
To ensure that new properties and new values for existing properties
can be added in the future, user agents are required to obey the
following rules when they encounter the following scenarios:
* Unknown properties. User agents must ignore a declaration with an
unknown property. For example, if the style sheet is:
h1 { color: red; rotation: 70minutes }
the user agent will treat this as if the style sheet had been
h1 { color: red }
* Illegal values. User agents must ignore a declaration with an
illegal value. For example:
img { float: left } /* correct CSS 2.1 */
img { float: left here } /* "here" is not a value of 'float' */
img { background: "red" } /* keywords cannot be quoted in CSS 2.1 */
img { border-width: 3 } /* a unit must be specified for length values */
A CSS 2.1 parser would honor the first rule and ignore the rest,
as if the style sheet had been:
img { float: left }
img { }
img { }
img { }
A user agent conforming to a future CSS specification may accept
one or more of the other rules as well.
* Invalid at-keywords. User agents must ignore an invalid at-keyword
together with everything following it, up to and including the
next semicolon (;) or block ({...}), whichever comes first. For
example, consider the following:
@three-dee {
@background-lighting {
azimuth: 30deg;
elevation: 190deg;
}
h1 { color: red }
}
h1 { color: blue }
The '@three-dee' at-rule is not part of CSS 2.1. Therefore, the
whole at-rule (up to, and including, the third right curly brace)
is ignored. A CSS 2.1 user agent ignores it, effectively reducing
the style sheet to:
h1 { color: blue }
4.3 Values
4.3.1 Integers and real numbers
Some value types may have integer values (denoted by ) or
real number values (denoted by ). Real numbers and integers
are specified in decimal notation only. An consists of one
or more digits "0" to "9". A can either be an , or
it can be zero or more digits followed by a dot (.) followed by one or
more digits. Both integers and real numbers may be preceded by a "-"
or "+" to indicate the sign.
Note that many properties that allow an integer or real number as a
value actually restrict the value to some range, often to a
non-negative value.
4.3.2 Lengths
Lengths refer to horizontal or vertical measurements.
The format of a length value (denoted by in this
specification) is a (with or without a decimal point)
immediately followed by a unit identifier (e.g., px, deg, etc.). After
the '0' length, the unit identifier is optional.
Some properties allow negative length values, but this may complicate
the formatting model and there may be implementation-specific limits.
If a negative length value cannot be supported, it should be converted
to the nearest value that can be supported.
There are two types of length units: relative and absolute. Relative
length units specify a length relative to another length property.
Style sheets that use relative units will more easily scale from one
medium to another (e.g., from a computer display to a laser printer).
Relative units are:
* em: the 'font-size' of the relevant font
* ex: the 'x-height' of the relevant font
* px: pixels, relative to the viewing device
Example(s):
h1 { margin: 0.5em } /* em */
h1 { margin: 1ex } /* ex */
p { font-size: 12px } /* px */
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. It may be used
for vertical or horizontal measurement. (This unit is also sometimes
called the quad-width in typographic texts.)
The 'ex' unit is defined by the font's 'x-height'. The x-height is so
called because it is often equal to the height of the lowercase "x".
However, an 'ex' is defined even for fonts that don't contain an "x".
Example(s):
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.
When specified for the root of the document tree (e.g., "HTML" in
HTML), 'em' and 'ex' refer to the property's initial value.
Pixel units are relative to the resolution of the viewing device,
i.e., most often a computer display. If the pixel density of the
output device is very different from that of a typical computer
display, the user agent should rescale pixel values. It is recommended
that the reference pixel be the visual angle of one pixel on a device
with a pixel density of 96dpi 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, 1px thus corresponds to about 0.26 mm
(1/96 inch). When printed on a laser printer, meant for reading at a
little less than arm's length (55 cm, 21 inches), 1px is about
0.20 mm. On a 300 dots-per-inch (dpi) printer, that may be rounded up
to 3 dots (0.25 mm); on a 600 dpi printer, it can be rounded to 5
dots.
The two images below illustrate the effect of viewing distance on the
size of a pixel and the effect of a device's resolution. In the first
image, a reading distance of 71 cm (28 inch) results in a px of
0.26 mm, while a reading distance of 3.5 m (12 feet) requires a px of
1.3 mm.
Showing that pixels must become larger if the viewing distance
increases
In the second image, an area of 1px by 1px is covered by a single dot
in a low-resolution device (a computer screen), while the same area is
covered by 16 dots in a higher resolution device (such as a 400 dpi
laser printer).
Showing that more device pixels (dots) are needed to cover a 1px by
1px area on a high-resolution device than on a low-res one
Child elements do not inherit the relative values specified for their
parent; they (generally) inherit the computed values.
Example(s):
In the following rules, the computed 'text-indent' value of "h1"
elements will be 36px, not 45px, if "h1" is a child of the "body"
element.
body {
font-size: 12px;
text-indent: 3em; /* i.e., 36px */
}
h1 { font-size: 15px }
Absolute length units are only useful when the physical properties of
the output medium are known. The absolute units are:
* in: inches -- 1 inch is equal to 2.54 centimeters.
* cm: centimeters
* mm: millimeters
* pt: points -- the points used by CSS 2.1 are equal to 1/72th of an
inch.
* pc: picas -- 1 pica is equal to 12 points.
Example(s):
h1 { margin: 0.5in } /* inches */
h2 { line-height: 3cm } /* centimeters */
h3 { word-spacing: 4mm } /* millimeters */
h4 { font-size: 12pt } /* points */
h4 { font-size: 1pc } /* picas */
In cases where the specified length cannot be supported, user agents
must approximate it in the actual value.
4.3.3 Percentages
The format of a percentage value (denoted by in this
specification) is a immediately followed by '%'.
Percentage values are always relative to another value, for example a
length. Each property that allows percentages also defines the value
to which the percentage refers. The value may be that of another
property for the same element, a property for an ancestor element, or
a value of the formatting context (e.g., the width of a containing
block). When a percentage value is set for a property of the root
element and the percentage is defined as referring to the inherited
value of some property, the resultant value is the percentage times
the initial value of that property.
Example(s):
Since child elements (generally) inherit the computed values of their
parent, in the following example, the children of the P element will
inherit a value of 12px for 'line-height', not the percentage value
(120%):
p { font-size: 10px }
p { line-height: 120% } /* 120% of 'font-size' */
4.3.4 URL + URN = URI
URLs (Uniform Resource Locators, see [RFC1738] and [RFC1808]) provide
the address of a resource on the Web. An expected new way of
identifying resources is called URN (Uniform Resource Name). Together
they are called URIs (Uniform Resource Identifiers, see [URI]). This
specification uses the term URI.
URI values in this specification are denoted by . The functional
notation used to designate URIs in property values is "url()", as in:
Example(s):
body { background: url("http://www.bg.com/pinkish.png") }
The format of a URI value is 'url(' followed by optional whitespace
followed by an optional single quote (') or double quote (") character
followed by the URI itself, followed by an optional single quote (')
or double quote (") character followed by optional whitespace followed
by ')'. The two quote characters must be the same.
Example(s):
An example without quotes:
li { list-style: url(http://www.redballs.com/redball.png) disc }
Parentheses, commas, whitespace characters, single quotes (') and
double quotes (") appearing in a URI must be escaped with a backslash:
'\(', '\)', '\,'.
Depending on the type of URI, it might also be possible to write the
above characters as URI-escapes (where "(" = %28, ")" = %29, etc.) as
described in [URI].
In order to create modular style sheets that are not dependent on the
absolute location of a resource, authors may use relative URIs.
Relative URIs (as defined in [RFC1808]) are resolved to full URIs
using a base URI. RFC 1808, section 3, defines the normative algorithm
for this process. For CSS style sheets, the base URI is that of the
style sheet, not that of the source document.
Example(s):
For example, suppose the following rule:
body { background: url("yellow") }
is located in a style sheet designated by the URI:
http://www.myorg.org/style/basic.css
The background of the source document's BODY will be tiled with
whatever image is described by the resource designated by the URI
http://www.myorg.org/style/yellow
User agents may vary in how they handle URIs that designate
unavailable or inapplicable resources.
4.3.5 Colors
A is either a keyword or a numerical RGB specification.
The list of keyword color names is: aqua, black, blue, fuchsia, gray,
green, lime, maroon, navy, olive, orange, purple, red, silver, teal,
white, and yellow. These 17 colors have the following values:
maroon #800000 red #ff0000 orange #ffA500 yellow #ffff00 olive #808000
purple #800080 fuchsia #ff00ff white #ffffff lime #00ff00 green
#008000
navy #000080 blue #0000ff aqua #00ffff teal #008080
black #000000 silver #c0c0c0 gray #808080
In addition to these color keywords, users may specify keywords that
correspond to the colors used by certain objects in the user's
environment. Please consult the section on system colors for more
information.
Example(s):
body {color: black; background: white }
h1 { color: maroon }
h2 { color: olive }
The RGB color model is used in numerical color specifications. These
examples all specify the same color:
Example(s):
em { color: #f00 } /* #rgb */
em { color: #ff0000 } /* #rrggbb */
em { color: rgb(255,0,0) }
em { color: rgb(100%, 0%, 0%) }
The format of an RGB value in hexadecimal notation is a '#'
immediately followed by either three or six hexadecimal characters.
The three-digit RGB notation (#rgb) is converted into six-digit form
(#rrggbb) by replicating digits, not by adding zeros. For example,
#fb0 expands to #ffbb00. This ensures that white (#ffffff) can be
specified with the short notation (#fff) and removes any dependencies
on the color depth of the display.
The format of an RGB value in the functional notation is 'rgb('
followed by a comma-separated list of three numerical values (either
three integer values or three percentage values) followed by ')'. The
integer value 255 corresponds to 100%, and to F or FF in the
hexadecimal notation: rgb(255,255,255) = rgb(100%,100%,100%) = #FFF.
Whitespace characters are allowed around the numerical values.
All RGB colors are specified in the sRGB color space (see [SRGB]).
User agents may vary in the fidelity with which they represent these
colors, but using sRGB provides an unambiguous and objectively
measurable definition of what the color should be, which can be
related to international standards (see [COLORIMETRY]).
Conforming user agents may limit their color-displaying efforts to
performing a gamma-correction on them. sRGB specifies a display gamma
of 2.2 under specified viewing conditions. User agents should adjust
the colors given in CSS such that, in combination with an output
device's "natural" display gamma, an effective display gamma of 2.2 is
produced. See the section on gamma correction for further details.
Note that only colors specified in CSS are affected; e.g., images are
expected to carry their own color information.
Values outside the device gamut should be clipped: the red, green, and
blue values must be changed to fall within the range supported by the
device. For a typical CRT monitor, whose device gamut is the same as
sRGB, the three rules below are equivalent:
Example(s):
em { color: rgb(255,0,0) } /* integer range 0 - 255 */
em { color: rgb(300,0,0) } /* clipped to rgb(255,0,0) */
em { color: rgb(255,-10,0) } /* clipped to rgb(255,0,0) */
em { color: rgb(110%, 0%, 0%) } /* clipped to rgb(100%,0%,0%) */
Other devices, such as printers, have different gamuts to sRGB; some
colors outside the 0..255 sRGB range will be representable (inside the
device gamut), while other colors inside the 0..255 sRGB range will be
outside the device gamut and will thus be clipped.
4.3.6 Strings
Strings can either be written with double quotes or with single
quotes. Double quotes cannot occur inside double quotes, unless
escaped (as '\"' or as '\22'). Analogously for single quotes ("\'" or
"\27").
Example(s):
"this is a 'string'"
"this is a \"string\""
'this is a "string"'
'this is a \'string\''
A string cannot directly contain a newline. To include a newline in a
string, use the escape "\A" (hexadecimal A is the line feed character
in Unicode, but represents the generic notion of "newline" in CSS).
See the 'content' property for an example.
It is possible to break strings over several lines, for esthetic or
other reasons, but in such a case the newline itself has to be escaped
with a backslash (\). For instance, the following two selectors are
exactly the same:
Example(s):
a[title="a not s\
o very long title"] {/*...*/}
a[title="a not so very long title"] {/*...*/}
4.4 CSS document representation
A CSS style sheet is a sequence of characters from the Universal
Character Set (see [ISO10646]). For transmission and storage, these
characters must be encoded by a character encoding that supports the
set of characters available in US-ASCII (e.g., ISO 8859-x, SHIFT JIS,
etc.). For a good introduction to character sets and character
encodings, please consult the HTML 4.0 specification ([HTML40],
chapter 5), See also the XML 1.0 specification ([XML10], sections 2.2
and 4.3.3, and Appendix F.
When a style sheet is embedded in another document, such as in the
STYLE element or "style" attribute of HTML, the style sheet shares the
character encoding of the whole document.
When a style sheet resides in a separate file, user agents must
observe the following priorities when determining a document's
character encoding (from highest priority to lowest):
1. An HTTP "charset" parameter in a "Content-Type" field.
2. The @charset at-rule.
3. Mechanisms of the language of the referencing document (e.g., in
HTML, the "charset" attribute of the LINK element).
At most one @charset rule may appear in an external style sheet -- it
must not appear in an embedded style sheet -- and it must appear at
the very start of the document, not preceded by any characters. After
"@charset", authors specify the name of a character encoding. The name
must be a charset name as described in the IANA registry (See [IANA].
Also, see [CHARSETS] for a complete list of charsets). For example:
Example(s):
@charset "ISO-8859-1";
This specification does not mandate which character encodings a user
agent must support.
Note that reliance on the @charset construct theoretically poses a
problem since there is no a priori information on how it is encoded.
In practice, however, the encodings in wide use on the Internet are
either based on ASCII, UTF-16, UCS-4, or (rarely) on EBCDIC. This
means that in general, the initial byte values of a document enable a
user agent to detect the encoding family reliably, which provides
enough information to decode the @charset rule, which in turn
determines the exact character encoding.
4.4.1 Referring to characters not represented in a character encoding
A style sheet may have to refer to characters that cannot be
represented in the current character encoding. These characters must
be written as escaped references to ISO 10646 characters. These
escapes serve the same purpose as numeric character references in HTML
or XML documents (see [HTML40], chapters 5 and 25).
The character escape mechanism should be used when only a few
characters must be represented this way. If most of a document
requires escaping, authors should encode it with a more appropriate
encoding (e.g., if the document contains a lot of Greek characters,
authors might use "ISO-8859-7" or "UTF-8").
Intermediate processors using a different character encoding may
translate these escaped sequences into byte sequences of that
encoding. Intermediate processors must not, on the other hand, alter
escape sequences that cancel the special meaning of an ASCII
character.
Conforming user agents must correctly map to Unicode all characters in
any character encodings that they recognize (or they must behave as if
they did).
For example, a document transmitted as ISO-8859-1 (Latin-1) cannot
contain Greek letters directly: "kouro*s" (Greek: "kouros") has to be
written as "\3BA\3BF\3C5\3C1\3BF\3C2".
Note. In HTML 4.0, numeric character references are interpreted in
"style" attribute values but not in the content of the STYLE element.
Because of this asymmetry, we recommend that authors use the CSS
character escape mechanism rather than numeric character references
for both the "style" attribute and the STYLE element. For example, we
recommend:
...
rather than:
...
_________________________________________________________________
_________________________________________________________________
5 Selectors
Contents
* 5.1 Pattern matching
* 5.2 Selector syntax
+ 5.2.1 Grouping
* 5.3 Universal selector
* 5.4 Type selectors
* 5.5 Descendant selectors
* 5.6 Child selectors
* 5.7 Adjacent sibling selectors
* 5.8 Attribute selectors
+ 5.8.1 Matching attributes and attribute values
+ 5.8.2 Default attribute values in DTDs
+ 5.8.3 Class selectors
* 5.9 ID selectors
* 5.10 Pseudo-elements and pseudo-classes
* 5.11 Pseudo-classes
+ 5.11.1 :first-child pseudo-class
+ 5.11.2 The link pseudo-classes: :link and :visited
+ 5.11.3 The dynamic pseudo-classes: :hover, :active, and
:focus
+ 5.11.4 The language pseudo-class: :lang
* 5.12 Pseudo-elements
+ 5.12.1 The :first-line pseudo-element
+ 5.12.2 The :first-letter pseudo-element
+ 5.12.3 The :before and :after pseudo-elements
5.1 Pattern matching
In CSS, pattern matching rules determine which style rules apply to
elements in the document tree. These patterns, called selectors, may
range from simple element names to rich contextual patterns. If all
conditions in the pattern are true for a certain element, the selector
matches the element.
The case-sensitivity of document language element names in selectors
depends on the document language. For example, in HTML, element names
are case-insensitive, but in XML they are case-sensitive.
The following table summarizes CSS 2.1 selector syntax:
Pattern Meaning Described in section
* Matches any element. Universal selector
E Matches any E element (i.e., an element of type E). Type selectors
E F Matches any F element that is a descendant of an E element.
Descendant selectors
E > F Matches any F element that is a child of an element E. Child
selectors
E:first-child Matches element E when E is the first child of its
parent. The :first-child pseudo-class
E:link
E:visited Matches element E if E is the source anchor of a hyperlink
of which the target is not yet visited (:link) or already visited
(:visited). The link pseudo-classes
E:active
E:hover
E:focus Matches E during certain user actions. The dynamic
pseudo-classes
E:lang(c) Matches element of type E if it is in (human) language c
(the document language specifies how language is determined). The
:lang() pseudo-class
E + F Matches any F element immediately preceded by an element E.
Adjacent selectors
E[foo] Matches any E element with the "foo" attribute set (whatever
the value). Attribute selectors
E[foo="warning"] Matches any E element whose "foo" attribute value is
exactly equal to "warning". Attribute selectors
E[foo~="warning"] Matches any E element whose "foo" attribute value is
a list of space-separated values, one of which is exactly equal to
"warning". Attribute selectors
E[lang|="en"] Matches any E element whose "lang" attribute has a
hyphen-separated list of values beginning (from the left) with "en".
Attribute selectors
DIV.warning HTML only. The same as DIV[class~="warning"]. Class
selectors
E#myid Matches any E element ID equal to "myid". ID selectors
5.2 Selector syntax
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. The simple selector
matches if all of its components match.
A selector is a chain of one or more simple selectors separated by
combinators. Combinators are: whitespace, ">", and "+". Whitespace may
appear between a combinator and the simple selectors around it.
The elements of the document tree that match a selector are called
subjects of the selector. A selector consisting of a single simple
selector matches any element satisfying its requirements. Prepending a
simple selector and combinator to a chain imposes additional matching
constraints, so the subjects of a selector are always a subset of the
elements matching the rightmost simple selector.
One pseudo-element may be appended to the last simple selector in a
chain, in which case the style information applies to a subpart of
each subject.
5.2.1 Grouping
When several selectors share the same declarations, they may be
grouped into a comma-separated list.
Example(s):
In this example, we condense three rules with identical declarations
into one. Thus,
h1 { font-family: sans-serif }
h2 { font-family: sans-serif }
h3 { font-family: sans-serif }
is equivalent to:
h1, h2, h3 { font-family: sans-serif }
CSS offers other "shorthand" mechanisms as well, including multiple
declarations and shorthand properties.
5.3 Universal selector
The universal selector, written "*", matches the name of any element
type. It matches any single element in the document tree.
If the universal selector is not the only component of a simple
selector, the "*" may be omitted. For example:
* *[lang=fr] and [lang=fr] are equivalent.
* *.warning and .warning are equivalent.
* *#myid and #myid are equivalent.
5.4 Type selectors
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.
Example(s):
The following rule matches all H1 elements in the document tree:
h1 { font-family: sans-serif }
5.5 Descendant selectors
At times, authors may want selectors to match an element that is the
descendant of another element in the document tree (e.g., "Match those
EM elements that are contained by an H1 element"). Descendant
selectors express such a relationship in a pattern. A descendant
selector is made up of two or more selectors separated by whitespace.
A descendant selector of the form "A B" matches when an element B is
an arbitrary descendant of some ancestor element A.
Example(s):
For example, consider the following rules:
h1 { color: red }
em { color: red }
Although the intention of these rules is to add emphasis to text by
changing its color, the effect will be lost in a case such as:
This headline is very important
We address this case by supplementing the previous rules with a rule
that sets the text color to blue whenever an EM occurs anywhere within
an H1:
h1 { color: red }
em { color: red }
h1 em { color: blue }
The third rule will match the EM in the following fragment:
This headline
is very important
Example(s):
The following selector:
div * p
matches a P element that is a grandchild or later descendant of a DIV
element. Note the whitespace on either side of the "*" is not part of
the universal selector; the whitespace is the descendant selector
indicating that the DIV must be the ancestor of some element, and that
that element must be an ancestor of the P.
Example(s):
The selector in the following rule, which combines descendant and
attribute selectors, matches any element that (1) has the "href"
attribute set and (2) is inside a P that is itself inside a DIV:
div p *[href]
5.6 Child selectors
A child selector matches when an element is the child of some element.
A child selector is made up of two or more selectors separated by ">".
Example(s):
The following rule sets the style of all P elements that are children
of BODY:
body > P { line-height: 1.3 }
Example(s):
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. Notice that the optional whitespace around the
">" combinator has been left out.
For information on selecting the first child of an element, please see
the section on the :first-child pseudo-class below.
5.7 Adjacent sibling selectors
Adjacent sibling selectors have the following syntax: E1 + E2, where
E2 is the subject of the selector. The selector matches if E1 and E2
share the same parent in the document tree and E1 immediately precedes
E2.
In some contexts, adjacent elements generate formatting objects whose
presentation is handled automatically (e.g., collapsing vertical
margins between adjacent boxes). The "+" selector allows authors to
specify additional style to adjacent elements.
Example(s):
Thus, the following rule states that when a P element immediately
follows a MATH element, it should not be indented:
math + p { text-indent: 0 }
The next example reduces the vertical space separating an H1 and an H2
that immediately follows it:
h1 + h2 { margin-top: -5mm }
Example(s):
The following rule is similar to the one in the previous example,
except that it adds an attribute selector. Thus, special formatting
only occurs when H1 has class="opener":
h1.opener + h2 { margin-top: -5mm }
5.8 Attribute selectors
CSS 2.1 allows authors to specify rules that match attributes defined
in the source document.
5.8.1 Matching attributes and attribute values
Attribute selectors may match in four ways:
[att]
Match when the element sets the "att" attribute, whatever the
value of the attribute.
[att=val]
Match when the element's "att" attribute value is exactly
"val".
[att~=val]
Match when the element's "att" attribute value is a
space-separated list of "words", one of which is exactly "val".
If this selector is used, the words in the value must not
contain spaces (since they are separated by spaces).
[att|=val]
Match when the element's "att" attribute value is a
hyphen-separated list of "words", beginning with "val". The
match always starts at the beginning of the attribute value.
This is primarily intended to allow language subcode matches
(e.g., the "lang" attribute in HTML) as described in RFC 1766
([RFC1766]).
Attribute values must be identifiers or strings. The case-sensitivity
of attribute names and values in selectors depends on the document
language.
Example(s):
For example, the following attribute selector matches all H1 elements
that specify the "title" attribute, whatever its value:
h1[title] { color: blue; }
Example(s):
In the following example, the selector matches all SPAN elements whose
"class" attribute has exactly the value "example":
span[class=example] { color: blue; }
Multiple attribute selectors can be used to refer to several
attributes of an element, or even several times to the same attribute.
Example(s):
Here, the selector matches all SPAN elements whose "hello" attribute
has exactly the value "Cleveland" and whose "goodbye" attribute has
exactly the value "Columbus":
span[hello="Cleveland"][goodbye="Columbus"] { color: blue; }
Example(s):
The following selectors illustrate the differences between "=" and
"~=". The first selector will match, for example, the value "copyright
copyleft copyeditor" for the "rel" attribute. The second selector will
only match when the "href" attribute has the value
"http://www.w3.org/".
a[rel~="copyright"]
a[href="http://www.w3.org/"]
Example(s):
The following rule hides all elements for which the value of the
"lang" attribute is "fr" (i.e., the language is French).
*[lang=fr] { display : none }
Example(s):
The following rule will match for values of the "lang" attribute that
begin with "en", including "en", "en-US", and "en-cockney":
*[lang|="en"] { color : red }
Example(s):
Similarly, the following aural style sheet rules allow a script to be
read aloud in different voices for each role:
DIALOGUE[character=romeo]
{ voice-family: "Lawrence Olivier", charles, male }
DIALOGUE[character=juliet]
{ voice-family: "Vivien Leigh", victoria, female }
5.8.2 Default attribute values in DTDs
Matching takes place on attribute values in the document tree. For
document languages other than HTML, default attribute values may be
defined in a DTD or elsewhere. Style sheets should be designed so that
they work even if the default values are not included in the document
tree.
Example(s):
For example, consider an element EXAMPLE with an attribute "notation"
that has a default value of "decimal". The DTD fragment might be
If the style sheet contains the rules
EXAMPLE[notation=decimal] { /*... default property settings ...*/ }
EXAMPLE[notation=octal] { /*... other settings...*/ }
then to catch the cases where this attribute is set by default, and
not explicitly, the following rule might be added:
EXAMPLE { /*... default property settings ...*/ }
Because this selector is less specific than an attribute selector, it
will only be used for the default case. Care has to be taken that all
other attribute values that don't get the same style as the default
are explicitly covered.
5.8.3 Class selectors
For style sheets used with HTML, authors may use the dot (.) notation
as an alternative to the "~=" notation when matching on the "class"
attribute. Thus, for HTML, "DIV.value" and "DIV[class~=value]" have
the same meaning. The attribute value must immediately follow the ".".
Example(s):
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:
Not green
Very green
To match a subset of "class" values, each value must be preceded by a
".", in any order.
Example(s):
For example, the following rule matches any P element whose "class"
attribute has been assigned a list of space-separated values that
includes "pastoral" and "marine":
p.pastoral.marine { color: green }
This rule matches when class="pastoral blue aqua marine" but does not
match for class="pastoral blue".
Note. CSS gives so much power to the "class" attribute, that authors
could conceivably design their own "document language" based on
elements with almost no associated presentation (such as DIV and SPAN
in HTML) and assigning style information through the "class"
attribute. Authors should avoid this practice since the structural
elements of a document language often have recognized and accepted
meanings and author-defined classes may not.
5.9 ID selectors
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. In HTML all
ID attributes are named "id"; XML applications may name ID attributes
differently, but the same restriction applies.
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.
Example(s):
The following ID selector matches the H1 element whose ID attribute
has the value "chapter1":
h1#chapter1 { text-align: center }
In the following example, the style rule matches the element that has
the ID value "z98y". The rule will thus match for the P element:
Match P
Wide text
In the next example, however, the style rule will only match an H1
element that has an ID value of "z98y". The rule will not match the P
element in this example:
Match H1 only
Wide text
ID selectors have a higher specificity than attribute selectors. For
example, in HTML, the selector #p123 is more specific than [id=p123]
in terms of the cascade.
Note. In XML 1.0 [XML10], the information about which attribute
contains an element's IDs is contained in a DTD. When parsing XML, UAs
do not always read the DTD, and thus may not know what the ID of an
element is. If a style sheet designer knows or suspects that this will
be the case, he should use normal attribute selectors instead:
[name=p371] instead of #p371. However, the cascading order of normal
attribute selectors is different from ID selectors. It may be
necessary to add an "!important" priority to the declarations:
[name=p371] {color: red ! important}. Of course, elements in XML 1.0
documents without a DTD do not have IDs at all.
5.10 Pseudo-elements and pseudo-classes
In CSS 2.1, style is normally attached to an element based on its
position in the document tree. This simple model is sufficient for
many cases, but some common publishing scenarios may not be possible
due to the structure of the document tree. For instance, in HTML 4.0
(see [HTML40]), no element refers to the first line of a paragraph,
and therefore no simple CSS selector may refer to it.
CSS introduces the concepts of pseudo-elements and pseudo-classes to
permit formatting based on information that lies outside the document
tree.
* 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).
* Pseudo-classes classify elements on characteristics other than
their name, attributes or content; in principle characteristics
that cannot be deduced from the document tree. Pseudo-classes may
be dynamic, in the sense that an element may acquire or lose a
pseudo-class while a user interacts with the document. The
exceptions are ':first-child', which can be deduced from the
document tree, and ':lang()', which can be deduced from the
document tree in some cases.
Neither pseudo-elements nor pseudo-classes appear in the document
source or document tree.
Pseudo-classes are allowed anywhere in selectors while pseudo-elements
may only appear after the subject of the selector.
Pseudo-elements and pseudo-class names are case-insensitive.
Some pseudo-classes are mutually exclusive, while others can be
applied simultaneously to the same element. In case of conflicting
rules, the normal cascading order determines the outcome.
Conforming HTML user agents may ignore all rules with :first-line or
:first-letter in the selector, or, alternatively, may only support a
subset of the properties on these pseudo-elements.
5.11 Pseudo-classes
5.11.1 :first-child pseudo-class
The :first-child pseudo-class matches an element that is the first
child of some other element.
Example(s):
In the following example, the selector matches any P element that is
the first child of a DIV element. The rule suppresses indentation for
the first paragraph of a DIV:
div > p:first-child { text-indent: 0 }
This selector would match the P inside the DIV of the following
fragment:
The last P before the note.
The first P inside the note.
but would not match the second P in the following fragment:
The last P before the note.
Note
The first P inside the note.
Example(s):
The following rule sets the font weight to 'bold' for any EM element
that is some descendant of a P element that is a first child:
p:first-child em { font-weight : bold }
Note that since anonymous boxes are not part of the document tree,
they are not counted when calculating the first child.
For example, the EM in:
abc default
is the first child of the P.
The following two selectors are equivalent:
* > a:first-child /* A is first child of any element */
a:first-child /* Same */
5.11.2 The link pseudo-classes: :link and :visited
User agents commonly display unvisited links differently from
previously visited ones. CSS provides the pseudo-classes ':link' and
':visited' to distinguish them:
* The :link pseudo-class applies for links that have not yet been
visited.
* The :visited pseudo-class applies once the link has been visited
by the user.
Note. After a certain amount of time, user agents may choose to return
a visited link to the (unvisited) ':link' state.
The two states are mutually exclusive.
The document language determines which elements are hyperlink source
anchors. For example, in HTML 4.0, the link pseudo-classes apply to A
elements with an "href" attribute. Thus, the following two CSS 2.1
declarations have similar effect:
a:link { color: red }
:link { color: red }
Example(s):
If the following link:
external link
has been visited, this rule:
a.external:visited { color: blue }
will cause it to be blue.
5.11.3 The dynamic pseudo-classes: :hover, :active, and :focus
Interactive user agents sometimes change the rendering in response to
user actions. CSS provides three pseudo-classes for common cases:
* The :hover pseudo-class applies while the user designates an
element (with some pointing device), but does not activate it. For
example, a visual user agent could apply this pseudo-class when
the cursor (mouse pointer) hovers over a box generated by the
element. User agents not supporting interactive media do not have
to support this pseudo-class. Some conforming user agents
supporting interactive media may not be able to support this
pseudo-class (e.g., a pen device).
* The :active pseudo-class applies while an element is being
activated by the user. For example, between the times the user
presses the mouse button and releases it.
* The :focus pseudo-class applies while an element has the focus
(accepts keyboard events or other forms of text input).
These pseudo-classes are not mutually exclusive. An element may match
several of them at the same time.
CSS doesn't define which elements may be in the above states, or how
the states are entered and left. Scripting may change whether elements
react to user events or not, and different devices and UAs may have
different ways of pointing to, or activating elements.
User agents are not required to reflow a currently displayed document
due to pseudo-class transitions. For instance, a style sheet may
specify that the 'font-size' of an :active link should be larger than
that of an inactive link, but since this may cause letters to change
position when the reader selects the link, a UA may ignore the
corresponding style rule.
Example(s):
a:link { color: red } /* unvisited links */
a:visited { color: blue } /* visited links */
a:hover { color: yellow } /* user hovers */
a:active { color: lime } /* active links */
Note that the A:hover must be placed after the A:link and A:visited
rules, since otherwise the cascading rules will hide the 'color'
property of the A:hover rule. Similarly, because A:active is placed
after A:hover, the active color (lime) will apply when the user both
activates and hovers over the A element.
Example(s):
An example of combining dynamic pseudo-classes:
a:focus { background: yellow }
a:focus:hover { background: white }
The last selector matches A elements that are in pseudo-class :focus
and in pseudo-class :hover.
For information about the presentation of focus outlines, please
consult the section on dynamic focus outlines.
Note. In CSS1, the ':active' pseudo-class was mutually exclusive with
':link' and ':visited'. That is no longer the case. An element can be
both ':visited' and ':active' (or ':link' and ':active') and the
normal cascading rules determine which properties apply.
5.11.4 The language pseudo-class: :lang
If the document language specifies how the human language of an
element is determined, it is possible to write selectors in CSS that
match an element based on its language. For example, in HTML [HTML40],
the language is determined by a combination of the "lang" attribute,
the META element, and possibly by information from the protocol (such
as HTTP headers). XML uses an attribute called xml:lang, and there may
be other document language-specific methods for determining the
language.
The pseudo-class ':lang(C)' matches if the element is in language C.
Here C is a language code as specified in HTML 4.0 [HTML40] and
RFC 1766 [RFC1766]. It is matched the same way as for the '|='
operator.
Example(s):
The following rules set the quotation marks for an HTML document that
is either in French or German:
html:lang(fr) { quotes: '« ' ' »' }
html:lang(de) { quotes: '»' '«' '\2039' '\203A' }
:lang(fr) > Q { quotes: '« ' ' »' }
:lang(de) > Q { quotes: '»' '«' '\2039' '\203A' }
The second pair of rules actually set the 'quotes' property on Q
elements according to the language of its parent. This is done because
the choice of quote marks is typically based on the language of the
element around the quote, not the quote itself: like this piece of
French "à l'improviste" in the middle of an English text uses the
English quotation marks.
5.12 Pseudo-elements
5.12.1 The :first-line pseudo-element
The :first-line pseudo-element applies special styles to 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". However, the selector "P:first-line" does not
match any real HTML element. It does match a pseudo-element that
conforming user agents will insert at the beginning of every
paragraph.
Note that the length of the first line depends on a number of factors,
including the width of the page, the font size, etc. Thus, an ordinary
HTML paragraph such as:
This is a somewhat long HTML
paragraph that will be broken into several
lines. The first line will be identified
by a fictional tag sequence. The other lines
will be treated as ordinary lines in the
paragraph.
the lines of which happen to be broken as follows:
THIS IS A SOMEWHAT LONG HTML PARAGRAPH THAT
will be broken into several lines. The first
line will be identified by a fictional tag
sequence. The other lines will be treated as
ordinary lines in the paragraph.
might be "rewritten" by user agents to include the fictional tag
sequence for :first-line. This fictional tag sequence helps to show
how properties are inherited.
This is a somewhat long HTML
paragraph that will be broken into several
lines. The first line will be identified
by a fictional tag sequence. The other lines
will be treated as ordinary lines in the
paragraph.
If a pseudo-element breaks up a real element, the desired effect can
often be described by a fictional tag sequence that closes and then
re-opens the element. Thus, if we mark up the previous paragraph with
a SPAN element:
This is a somewhat long HTML
paragraph that will be broken into several
lines. The first line will be identified
by a fictional tag sequence. The other lines
will be treated as ordinary lines in the
paragraph.
the user agent could generate the appropriate start and end tags for
SPAN when inserting the fictional tag sequence for :first-line.
This is a
somewhat long HTML
paragraph that will be
broken into several
lines. The first line will be identified
by a fictional tag sequence. The other lines
will be treated as ordinary lines in the
paragraph.