Anatomy of a style declaration

by Joe Gillespie — Apr 1, 2002

Here, I've just added a 'body' style into the <head> ... </head> section of the page. This is a fairly ordinary style, but serves its purpose. It goes like this: -

1. <style type="text/css" media="screen"><!--

2. body

3. {

4. font-size:0.8em;

5. line-height:1.4em;

6. font-family: Georgia, "Times New Roman", Times;

7. background-color:#fffff1;

8. margin-top:20px;

9. margin-right:50px;

10. margin-left:50px

11. }

12. --></style>

I've split this all out onto separate lines for clarity but normally they would just join up into one log line.

The first line
1 <style type="text/css" media="screen"><!-- tells the browser that there is a style that it must use. Its 'type' attribute is 'text/css' because we are asking it to apply the style to all the text in the Web page.

The media="screen" part is there because you can have media other than 'screen' such as 'print', 'aural', 'Braille' or 'tv' each with separate style sheets. For now, we are only concerned with a regular computer screen.

The <!-- is a comment tag that, together with its end tag 12 -->, stops the style declarations from displaying as text on the page in stupid, old browsers.

The next line, 2 body is the name of the style, called then 'selector' and because it is a 'reserved word', part of the structure of a page, it becomes the default style for the whole page - the big daddy.

All the following 'property' declarations take place between two curly braces 3 {...} 11 and take the form:-

property: value ;

If there is more than one, as I have here, they are separated by semi-colons but the final item doesn't need one.

4 font-size: 0.8em means that the default size for the text on this page should be 0.8 (80%) of the user's default font size. 1 em is the user's default size (usually about 12 points, but point sizes are different on Macs and PCs, that's why we never use points as measurement for text on a Web page. ) You can use ems, and fractions thereof, as I have here for the font-size and line-height, or you can use pixels - px which are more absolute and give more or less the same result on all computers.

5 font-family: Like the old <font> tag, you have to provide a list of fonts. The preferred one, and a few similar alternatives that kick-in if the preferred one is not available on the user's machine. Where a font name is more than a single word, it has to be enclosed in quotes - "Times New Roman" - and commas separate the alternatives.

6 background-color: #fffff1 is the pale yellow background color specified in hexadecimal RGB values. ff(red), ff, (green) and f1, (blue) is almost white but with a little less blue - giving pale yellow. Note that when the three pairs of these values are the same eg (#00ff00), you can leave off one of one set. The value for white then becomes #fff and green #0f0. The three margin declarations 8, 9, 10, simply specify the margins on the left, right and top of the page in pixels.

And, to finish up, the ending 12 </style> tag just terminates the body style definition.

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