Putting It All Together

Okay, let's see if we can put this all together and come up with a decent style sheet.

Two new elements
DIV and SPAN

First, I'd like to introduce two new elements that you will find extremely useful for specifiying styles not defined elsewhere in your style sheet.

The DIV and SPAN elements, combined with style sheets will change the display in a style sheet enabled browser, but have no effect whatsoever in non-capable browsers. It will, however, cause an odd break in a paragraph if used incorrectly.

DIV is a block element; placing it within the P element will result in the odd formatting I mentioned. See what happens when you put the DIV element where

Use SPAN for inline content. Not only will it eliminate odd breaks in your text, but will retain the style specified for the P element.

Inappropriate Use of the P Element

One of the main factors in styles not displaying properly is the inappropriate use of the P  element. If you have specified an attribute that suddenly disappears from your page, check your P elements first to ensure that you have used them properly.

• P is a container element, it should not be used as a separator.
• Paragraph text should not begin immediately after the header element, the P element should be place in between the header and the text.
• P cannot contain block-level elements (including P itself). This also means P cannot contain DIV, which is a block element. On the other hand, style may be retained by including the P element within the DIV element.¹

The Style Sheet

Alright, I've gone on long enough. Here's the style sheet I used to create this page.

<STYLE TYPE="text/css">
<!--

BODY  		{ color		:	Maroon;
		background	:	Wheat;
		}

H1, H2, H3	{ font-family	:	Arial, Helvetica, sans-serif;
		color		:	black;
		background	:	LightSlateGray;
		text-align	:	center;
		}	
	


P		{ font-family	:	Arial, Helvetica, sans-serif;
		font-size	:	small;
		color		:	Maroon;
		}	

B		{ text-transform:	uppercase;
		font-weight	:	bold;
		background	: 	WhiteSmoke;
		}


EM		{ font-style	:	none;
		font-weight	:	bold;
		color		:	red;
		background	:	WhiteSmoke
		}

UL		{ font-family	:	cursive;
		font-size	:	small;
		}

DL		{ font-family	: 	serif;
		font-size	:	small;
		}

DT		{ font-family	: 	serif;
		font-size	:	small;
		}

.attn		{color		: 	red;
		background	:	WhiteSmoke;
		font-weight	:	bold;
		font-size	:	larger;
		}
		

.notes		{background	:	transparent;
		font-family	:	Arial, Verdana, sans-serif;
		font-size	:	xx-small;
		text-decoration	:	none;
		}

PRE		{font-family	:	monospace;
		color		:	black;
		background	: 	transparent;
		}

A:link 	{ 	color	: MediumBlue }
A:visited { 	color	: Purple }
A:hover { 	color	: red }
A:active { 	color	: red }


-->
</STYLE>

Notes:
1. W3C: 7.5.4 Grouping elements: the DIV and SPAN elements

Additional Resources:

• Style Sheets & Guides
• W3C: 15.2 Font specification

Putting Style Sheets in Perspective: text-transform
Putting Style Sheets in Perspective: Table of Contents
Putting Style Sheets in Perspective