CSS Constants - The CSS standard compliant approach
(Page 2 of 7 )
CSS in itself is something like a constant. By defining the styles in classes and IDs or for the elements themselves, we spare ourselves the excruciating work of adding a lot of visual elements and attributes in the markup. In the days before CSS we had to do the following:
<td valign=”top” align=”right”><font size=”+1”><font color=”blue”>
<b>Foo</b></font></font></td>
CSS allows us to define that as:
td {vertical-align:top;
text-align:right;
font-size:100%;
color:blue;
font-weight:bold;
}
These constant settings are applied to each TD element. Another way:
td.special {vertical-align:top;
text-align:right;
font-size:100%;
color:blue;
font-weight:bold;
}
The class special is a definition that can be reused for all elements, rather like a constant.
Using Classes
CSS classes could be one approach to mimic real CSS constants. Our box example above could be:
.box {background:#ccc;
border-top:1px solid #eee;
border-left:1px solid #eee;
border-right:1px solid #aaa;
border-bottom:1px solid #aaa;
padding:.5em;
margin:.5em 0’;
}
We can add this class to any element to apply its definitions. It is also perfectly valid to add several classes, separated by spaces, to one element.
<h1 class=”box”>
<div class=”box warning”>
What we should avoid doing is to name the classes according to how they look, as it can be pretty confusing to see a <div class=”blue bold underline”> that is yellow, of normal weight and without an underline, after a new style guide came along and got applied.
Next: Using ID Selectors and Descendent Selectors >>
More Style Sheets Articles
More By Chris Heilmann
/ 11 
