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.
|
Recent Hits:
United States
China
Viet nam
Russian Federation
France
Hungary
Canada
Ukraine
United Kingdom
Netherlands
Germany
Poland
Italy
Taiwan, Province of China
Seychelles
Romania
Indonesia
Sweden
Thailand
Brazil
Japan
South Africa
Lithuania
India
Spain
Luxembourg
Chile
Turkey
Moldova, Republic of
Korea, Republic of
Venezuela
Malaysia
unknown
Australia
Switzerland
Singapore
Colombia
Hong Kong
Mexico
Argentina
Belize
Greece
Honduras
Estonia
Czech Republic
Latvia
Bangladesh
Bulgaria
Pakistan
Albania
