Basic concepts
Basic concepts
Designing simple style sheets is easy. One needs only to know a little HTML
and some basic desktop publishing terminology. E.g., to set the text color of
'H1' elements to blue, one can say:
H1 { color: blue }
The example above is a simple CSS rule. A rule consists of two main parts:
selector ('H1') and declaration ('color: blue'). 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 selector is the link between the HTML document and the style sheet, and
all HTML element types are possible selectors.
HTML authors need to write style sheets only if they want to suggest a
specific style for their documents. Each User Agent (UA, often a "web browser"
or "web client") will have a default style sheet that presents documents in a
reasonable -- but arguably mundane -- manner.
Containment in HTML
In order for the style sheets to influence the presentation, the UA must be
aware of their existence. This section is therefore informative, but not
normative:
<HTML>
<HEAD>
<TITLE>title</TITLE>
<LINK REL=STYLESHEET TYPE="text/css"
HREF="http://style.com/cool"
TITLE="Cool">
<STYLE
TYPE="text/css">
@import
url(http://style.com/basic);
H1 { color: blue }
</STYLE>
</HEAD>
<BODY>
<H1>Headline is
blue</H1>
<P STYLE="color: green">While the
paragraph is green.
</BODY>
</HTML>
The example shows four ways to combine style and HTML: using the 'LINK'
element to link an external style sheet, a 'STYLE' element inside the 'HEAD'
element, an imported style sheet using the CSS '@import' notation, and a 'STYLE'
attribute on an element inside 'BODY'. The latter option mixes style with
content and loses the corresponding advantages of traditional style sheets.
The 'LINK' element references alternative style sheets that the reader can
select, while imported style sheets are automatically merged with the rest of
the style sheet.
Traditionally, UAs have silently ignored unknown tags. As a result, old UAs
will ignore the 'STYLE' element, but its content will be treated as part of the
document body, and rendered as such. During a transition phase, 'STYLE' element
content may be hidden using SGML comments:
<STYLE
TYPE="text/css"><!--
H1 { color: green }
--></STYLE>
Since the 'STYLE' element is declared as "CDATA" in the DTD conforming
SGML parsers will not consider the above style sheet to be a comment that is to
be removed.
Grouping
To reduce the size of style sheets, one can group selectors in
comma-separated lists:
H1, H2, H3 { font-family: helvetica
}
Similarly, declarations can be grouped:
H1 {
font-weight: bold;
font-size: 12pt;
line-height: 14pt;
font-family: helvetica;
font-variant: normal;
font-style: normal;
}
In addition, some properties have their own grouping syntax:
H1 { font: bold 12pt/14pt helvetica
}
which is equivalent to the previous example.
Inheritance
In the first example, the color of 'H1' elements was set to blue. Suppose
there is an 'H1' element with an emphasized element inside:
<H1>The headline <EM>is</EM>
important!</H1>
If no color has been assigned to the 'EM' element, the emphasized "is" will
inherit the color of the parent element, i.e. it will also appear in blue. Other
style properties are likewise inherited, e.g.
'font-family' and
'font-size'. To set a "default" style property for a document, one can set the property
on an element from which all visible elements descend. In HTML documents, the
'BODY' element can serve this function:
BODY {
color: black;
background: url(texture.gif)
white;
}
This will work even if the author has omitted the 'BODY' tag (which is
legal) since the HTML parser will infer the missing tag. The example above sets
the text color to be black and the background to be an image. The background
will be white if the image is not available.
Some style properties are not inherited from the parent element to the
child element. Most often it is intuitive why this is not the case. E.g., the
'background' property does not
inherit, but the parent element's background will shine through by default.
Often, the value of a property is a percentage that refers to another
property:
P { font-size: 10pt }
P { line-height: 120% } /* relative to
'font-size', i.e. 12pt */
For each property that allows percentage values, it is defined what
property it refers to. Children elements of 'P' will inherit the computed value
of 'line-height' (i.e. 12pt),
not the percentage.
Class as selector
To increase the granularity of control over elements, a new attribute has
been added to HTML [2]: 'CLASS'. All
elements inside the 'BODY' element can be classed, and the class can be
addressed in the style sheet: <HTML>
<HEAD>
<TITLE>Title</TITLE>
<STYLE
TYPE="text/css">
H1.pastoral { color: #00FF00
}
</STYLE>
</HEAD>
<BODY>
<H1 CLASS=pastoral>Way too
green</H1>
</BODY>
</HTML>
The normal inheritance rules apply to classed elements; they inherit values
from their parent in the document structure.
One can address all elements of the same class by omitting the tag name in
the selector:
.pastoral { color: green } /* all elements
with CLASS pastoral */
Only one class can be specified per selector. 'P.pastoral.marine' is
therefore an invalid selector in CSS1. (Contextual selectors, described below,
can have one class per simple selector)
CSS gives so much power to the CLASS attribute, that in many cases it
doesn't even matter what HTML element the class is set on -- you can make any
element emulate almost any other. Relying on this power is not recommended,
since it removes the level of structure that has a universal meaning (HTML
elements). A structure based on CLASS is only useful within a restricted domain,
where the meaning of a class has been mutually agreed upon.
ID as selector
HTML also introduces the 'ID' attribute which is guaranteed to have a
unique value over the document. It can therefore be of special importance as a
style sheet selector, and can be addressed with a preceding '#':
#z98y { letter-spacing: 0.3em
}
H1#z98y { letter-spacing: 0.5em
}
<P ID=z98y>Wide
text</P>
In the above example, the first selector matches the 'P' element due to the
'ID' attribute value. The second selector specifies both an element type ('H1')
and an ID value, and will therefore not match the 'P' element.
By using the ID attribute as selector, one can set style properties on a
per-element basis. While style sheets have been designed to augment document
structure, this feature will allow authors to create documents that present well
on the canvas without taking advantage of the structural elements of HTML. This
use of style sheets is discouraged.
Contextual selectors
Inheritance saves CSS designers typing. Instead of setting all style
properties, one can create defaults and then list the exceptions. To give 'EM'
elements within 'H1' a different color, one may specify:
H1 { color: blue }
EM { color: red }
When this style sheet is in effect, all emphasized sections within or
outside 'H1' will turn red. Probably, one wanted only 'EM' elements within 'H1'
to turn red and this can be specified with:
H1 EM { color: red }
The selector is now a search pattern on the stack of open elements, and
this type of selector is referred to as a contextual selector. Contextual
selectors consist of several simple selectors separated by whitespace (all
selectors described up to now have been simple selectors). Only elements that
match the last simple selector (in this case the 'EM' element) are addressed,
and only if the search pattern matches. Contextual selectors in CSS1 look for
ancestor relationships, but other relationships (e.g. parent-child) may be
introduced in later revisions. In the example above, the search pattern matches
if 'EM' is a descendant of 'H1', i.e. if 'EM' is inside an 'H1' element.
UL LI { font-size: small }
UL UL LI { font-size: x-small
}
Here, the first selector matches 'LI' elements with at least one 'UL'
ancestor. The second selector matches a subset of the first, i.e. 'LI' elements
with at least two 'UL' ancestors. The conflict is resolved by the second
selector being more specific because of the longer search pattern.
Contextual selectors can look for element types, CLASS attributes, ID
attributes or combinations of these:
DIV P { font: small sans-serif
}
.reddish H1 { color: red
}
#x78y CODE { background: blue
}
DIV.sidenote H1 { font-size: large
}
The first selector matches all 'P' elements that have a 'DIV' among the
ancestors. The second selector matches all 'H1' elements that have an ancestor
of class 'reddish'. The third selector matches all 'CODE' elements that are
descendants of the element with 'ID=x78y'. The fourth selector matches all 'H1'
elements that have a 'DIV' ancestor with class 'sidenote'.
Several contextual selectors can be grouped together:
H1 B, H2 B, H1 EM, H2 EM { color: red
}
Which is equivalent to:
H1 B { color: red }
H2 B { color: red }
H1 EM { color: red }
H2 EM { color: red }
Comments
Textual comments in CSS style sheets are similar to those in the C
programming language :
EM { color: red } /* red, really red!!
*/
Comments cannot be nested. For a CSS1 parser, a comment is equivalent to
whitespace.
|
