Spanning Classes

by Joe Gillespie — May 1, 2002

Notice that I have only changed one attribute of the type spec in each new class - the boldness and the color. So, now I can do this:-

<div class="bodytext"> This is <span class="green">green </span> bodytext and this is <span class="bold"> bold </span> </div>

Which displays as green bodytext and bold.

<span class> over-rides the parent class that envelops it. It inherits all the attributes of the parent except the one that it is over-riding.
        I can change the .bodytext class declaration in the external style sheet to 12 pixel Georgia with 16 pixel line spacing and the green type will become green, 12 pixel Georgia and the bold <span class> will give me bold Georgia.

Every cell in my table that contains bodytext, or variants of it, has an all-encompassing <div class="bodytext"> and any text that is not the default bodytext spec is surrounded by a <span class>. You can also nest span classes inside one another like this:-

<div class="bodytext"> This is <span class="bold"><span class="green"> bold green </span> </span> bodytext </div>

Unless I want to make significant changes to the type specs, I use this .bodytext class along with its modifying span classes.
.headings { color:#0f0; font-style:normal; font-size: 12px; line-height:19px; font-family: Verdana, Geneva, Arial, sans-serif; text-align: right }

This is a slightly different class used for some headings in the second column. They are ranged right and a little larger than the plain bodytext. It shares the same line height - 19px - because I want to be certain that the text in the two columns aligns horizontally.

This is a situation where there are minor differences in the way that browsers handle line spacing. Horizontal alignment like this can vary by a pixel or two in different browsers but provided that they aren't too close together, few will notice.

Del.icio.us Digg Technorati Blinklist Furl reddit Design Float