Summary Page
Not Enhanced with Style Sheet

This should be enough to get you started with Style Sheets.

Remember to include comment tags around your rules to hide them from older browsers.

For your first style sheet, lets keep it simple. We'll design a style sheet using HTML elements as selectors, inserting it into the HEAD element of a single document. Linking to an external style sheet will come later.

Start with the Style element, adding comment tags right away so you don't forget them.

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

Now lets decide 'how' we want our document to look. Remember, use Style Sheets to enhance your web page, but don't design so that the page depends on them.

We can add a little color by specifying the color of different elements, a burgundy to header elements, brown for regular text, blue to italic and red to bold. A body background color of light yellow to set the whole thing off. None of these colors will in any way affect how the page is displayed in non-capable browsers, but will enhance the over all affect in browsers capable of viewing them. We'll add a touch of class with an Arial font throughout. Notice that the font-family element is specified in both the header element Selectors and the P Selector. The totally correct way would have been to put the font-family into the BODY declaration, but not all browsers will display it properly whereas if it is placed in the more specific Selectors, it will display. There was no need to put the font-family into the B and I Selectors as they inherit the property from the P Selector.

If you check the Document Source, you'll notice that even though I've specified H1 and H3 headers should be centered in the style sheet, I've also put them between the <CENTER> tags within the document. This ensures that your headers will be centered even in browsers that do not support Style Sheets. There will come a time that this method will not validate, but during the transitional phase it will. Once CSS is more widely supported and more firmly established, you will have to decide which is more important, writing valid HTML, or displaying centered text on non-CSS capable browsers.

	<STYLE TYPE="text/css">
	<!--
	
	BODY   {background	: #FFFFCC;
		color		: #663300
		}		
				
	H1, H3 {background	: transparent;
		color		: #660000;			
		text-align	: center;
		font-family	: Arial, Helvetica, sans-serif;
		}
	
	P	{font-family	: Arial, Helvetica, sans-serif;
		}
	
	B	{color		: red;
		background	: transparent;
		}
				
	I	{color		: blue;
		background	: transparent;
		}			
	
	 -->
	</STYLE>

Notice in the above style sheet, that the B and I Selectors have a background property in their Declaration. The background property sets the color of the background behind the text. While it is not essential that the background property be used, it is recommended when the color property has been specified.

The same is true of the various font alternatives in the P Declaration. It is not essential to have alternate fonts, but it is recommended. Also recommended is the generic font as the last alternative in the Declaration.