28.3. The syntax of CSS
Cascading Style Sheets (CSS) are files that contain presentational information. They are associated wit an HTML or XHTML file and help us separate presentation from content, thus rendering the management of our pages much easier and our code much cleaner.
CSS files work as follows: they contain a series of rules, to every rule is appended a group of formatting instructions. The formatting instructions are only applied by the client's browser to those parts of the HTML page specified by the preceding rule. With a CSS we can do everything that we could do with the deprecated HTML tags, like setting the font, the font size or colour (<font> tag), the font face (bold with the <b> tag or italics with the <i> tag), link colour and much more that was not previously possible.
In the following we will examine some examples. In PHP-Nuke, the CSS file is contained in a file called style.css, located in the style folder of the corresponding theme. For the NukeNews theme, for example, the CSS file is themes/NukeNews/style/style.css.
For the HTML <body> tag, we can set up its attributes in the CSS as follows:
body {background: #FFF; color:#003366; margin-left: 0; margin-top: 0;} |
This rule specifies a few attributes that will be valid through the whole HTML body (unless overriden by a more specific rule):
background: assigns a background colour to the page.
color: defines the text colour.
margin-left and margin-top: define the space between the margin of the page and the margin of the content.
The concepts of margin, border and padding follow a page model that is described in W3C's working draft CSS3 Paged Media Module, version of Dec. 18th 2003. Figure 28-1, taken from this document (Copyright © 2003 W3C (MIT, ERCIM, Keio), All Rights Reserved) illustrates the various geometric notions of this page model. Note that the XSL area model is deliberately very similar to the CSS one.
CSS allows for the creation of whole sets of rules that will be applied to the parts of the page those rules specify. Such a rule could for example look like:
.headercoldx {
vertical-align: top;
width:500px;
background-image: url(http://yoursite.com/themes/sometheme/images/bgheader.png);
background-color:#ffffff;
font: 11px arial, verdana, helvetica;
color: #000
} |
The .headercoldx part is a so-called CSS Selector, specifically a class selector. It selects (applies to) HTML elements of the class “headercoldx”. If we had an element name in front of the dot, the selector would apply only to that element and only if it were of the headercoldx class. Since in the above example there is no element name in front of the dot, the formatting instructions that follow are applied to all HTML elements of the headercoldx class (see also Class selectors). Thus, all HTML elements that are of class headercoldx will
be vertically aligned to the top of the box that contains them,
have a width of 500 pixels,
display bgheader.png as background image,
use white as the background colour,
use a 11 pixel font, preferably arial, or, if arial is not available, verdana, or, if verdana is also missing, helvetica,
use black for the text colour.
What remains to be seen, is how to mark HTML elements as being members of a certain class, like headercoldx above. This is easily done through the use of the class attribute, as the following example demonstrates for the table we constructed in Section 28.2.4:
<table class="headercoldx">
<tr>
<td width="200">PHP-Nuke</td>
<td></td>
</tr>
<tr>
<td width="200"></td>
<td></td>
</tr>
</table> |
As you can see, all attributes of the table tag have been removed and replaced by the class attribute. The formatting information that was contained in the replaced attributes is now contained in the group of formatting instructions that follows the class selector for the headercoldx class.
In the following example, a different selector is used, one that selects the pseudo-class :link and one that selects the dynamic pseudo-class :hover:
A:link {BACKGROUND: none; COLOR: #003366; FONT-SIZE: 11px; FONTFAMILY:
Verdana, Helvetica; TEXT-DECORATION: underline}
A:hover {color:003366; background-color:#FFCC33; FONT-SIZE: 11px; FONTFAMILY:
Verdana, Helvetica; TEXT-DECORATION: underline } |
The first rule specifies the formatting of a link, the second overrides the first one for the case that the user hovers with the mouse over the link.
Conflicting rules are intrinsic to the CSS mechanism. To find the value for an element/property combination, the following algorithm must be followed (see The cascade):
Find all declarations that apply to the element/property in question. Declarations apply if the selector matches the element in question. If no declarations apply, the inherited value is used. If there is no inherited value (this is the case for the 'HTML' element and for properties that do not inherit), the initial value is used.
Sort the declarations by explicit weight: declarations marked '!important' carry more weight than unmarked (normal) declarations.
Sort by origin: the author's style sheets override the reader's style sheet which override the UA's default values. An imported style sheet has the same origin as the style sheet from which it is imported.
Sort by specificity of selector: more specific selectors will override more general ones. To find the specificity, count the number of ID attributes in the selector (a), the number of CLASS attributes in the selector (b), and the number of tag names in the selector (c). Concatenating the three numbers (in a number system with a large base) gives the specificity. Some examples:
LI {...} /* a=0 b=0 c=1 -> specificity = 1 */
UL LI {...} /* a=0 b=0 c=2 -> specificity = 2 */
UL OL LI {...} /* a=0 b=0 c=3 -> specificity = 3 */
LI.red {...} /* a=0 b=1 c=1 -> specificity = 11 */
UL OL LI.red {...} /* a=0 b=1 c=3 -> specificity = 13 */
#x34y {...} /* a=1 b=0 c=0 -> specificity = 100 */
Pseudo-elements and pseudo-classes are counted as normal elements and classes, respectively.
Sort by order specified: if two rules have the same weight, the latter specified wins. Rules in imported style sheets are considered to be before any rules in the style sheet itself.
 | CSS of this HOWTO |
|---|---|
This HOWTO uses a special CSS file (well, at least in its original version that you can always find in PHP-Nuke HOWTO), tailored to the classes created by the DocBook stylesheets, which are used for its creation (see Section 1.8). If you like the formatting, you can read more about it in CSS file for DocBook. |