Classes and Elements

by Joe Gillespie — May 1, 2002

The main spec for the text on this page is the .bodytext class:-

.bodytext {color: silver; font-style:normal; font-size:11px; line-height:19px; font-family: Verdana, Geneva, Arial, sans-serif }

Note that a 'class' declaration always begins with a period whereas an 'element' declaration is just the name of an existing HTML tag.

body is an element .body is a class

So as not to confuse the two, I call the class .bodytext

If you view the source of the page, you won't see this declaration anywhere. That's because I have used an 'external style sheet.' External style sheets are just plain text files with a .css affix containing all the styles for a multiplicity of pages or even a whole Web site. The magic ingredient that is just a single line in the <head> section of the page:-

By changing any part of the .bodytext class declaration in the external style sheet, the color or font spec of every section of type that is enclosed within a <div class="bodytext"> This is bodytext </div> in any page on the site automatically reflects that change.

If I want to make a minor change to my bodytext spec, like making it bold or a different color, all I have to do is make a new class for each variant.

.bold { font-weight:bold }

.green {color: #00ff00 }

Del.icio.us

Digg

Technorati

Blinklist

Furl

Design Float