13 October 2007

More on Cascading Style Sheets: Style Sheet Rules


Click to enlarge
This section is about the rules one encounters in a style sheet. A style sheet is not merely a listing of rules; it includes a virtual map of any possible document that is likely to be hosted in that domain. For example, the figure on the right is a schematic of this blog. There's a header, a main column, and a sidebar (the XHTML used to code the page appears in that order). The main column is further subdivided into a date-header header, and the .post; and the .post is further subdivided into a post-title, post-body, and post-footer. This could go on indefinitely.

The rules are constructed thus:
selector{property1:value1; property2:value2;}
or, somewhat more commonly
where property1:value1; is a declaration.

Rules are typically categorized by the types of selectors used. For content management software, the number of selectors is usually large; there are elements with different classes, such as p.body, which designates the default paragraph formating for the body of a post; "p" is the element, and "body" is the class. There can be a several classes for each element. Here's an example.
padding:2px 14px 2px 29px;
Another common rule has an ID selector. Here, the class is replaced by an ID attribute: p#footer, or div#maclean. CSS allows one to not include the element: in both class and ID selectors, one can write the rule without them.

.post {
margin:.3em 0 25px;
padding:0 13px;
border:1px dotted #bb9;
border-width:1px 0;

#sidebar {
margin:15px 0 0;
The :link selector is used for hyperlinks that have not been visited. Notice the use of the colon rather than a semi-colon. This is because it's a pseudo-class. 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.
a:link {
The :visited selector is used for hyperlinks that have been visited.
a:visited {
The :active selector is used for all elements selected by the user.
a:active {
And so on.
SOURCE: Eric A. Meyer, Cascading Style Sheets 2.0 Programmer's Reference,
Osborne/McGraw-Hill (2001).

Selectutorial, MaxDesign

See also: Definitions, Cascading Style Sheets, level 2



Post a Comment

<< Home