Style Sheets

If you need to format large amounts of text, you should consider using cascading style sheets.  These sheets allow you to declare certain the exact features of the appearance of a specific kind of text.

As you prepare your document in Netscape, label text elements that should have the same appearance with a similar Netscape Heading level.  Don't worry about the appearance that they will give your document at the moment, since we will overwrite Netscape's built-in styles when we declare our styles.  When you've finished your document using Composer, save your document, and close the Composer window.

Since Netscape's Composer does not allow the user to set up Style Sheets, we will need to add that information independently, by opening the document up in a plain word processor, editing it, and saving it as a plain text file again, with the".html" extension.

To see what simple changes in the style sheet can do to the same text information, click on the links below

Style Sheet 1    Style Sheet 2    Style Sheet 3

To see a document where style sheets have been implemented AND you can study the code of the style sheet, check out this sample style sheet document.

Basic Elements that can be controlled in a style sheet.
 
Property
Possible Values
Sample Syntax
font-family Arial 
Times		 font-family: Arial; 
font-family: Times;
font-style normal 
italic 
oblique		 font-style: normal; 
font-style: italic; 
font-style: oblique;
font-weight normal 
bold 
bolder 
lighter		 font-weight: normal; 
font-weight: bold;
font-size xx-small 
small 
medium 
large 
x-large 
xx-large 
10pt 
12pt		 font-size: xx-small; 
font-size: 18pt; 
font-size: medium;
color Black 
Navy 
Blue 
Green 
teal 
Lime 
Aqua 
Maroon 
Purple 
Olive 
Gray 
Silver 
Red 
Fuchsia 
Yellow 
White 
#F0FFFF (the number for azure; there are published lists of these "Hex Pair Values" for color names)		 color: black; 
color: purple; 
color: #F0FFFF; 
 
background-color White 
  etc. 
#F0FFFF		 background-color: white;
text-decoration none 
underline 
overline 
line-through 
blink		 text-decoration: underline; 
text-decoration: blink; 
 
text-align left 
right 
center		 text-align: left;
margin-left 0.4in 
1.0in 
<length> 
10% 
20% 
<percentage>		 margin-left: 0.4in; 
margin-left: 10%;
margin-right 0.4in 
1.0in 
<length> 
10% 
20% 
<percentage>		 margin-right: 0.4in; 
margin-right: 10%;
Format of style sheet declaration
The style sheet information must be inserted into the head of the HTML document (that is between the tags <Head> and </Head>)
You can declare the style for the Body of the text; as well as for the specific level headings.

<head>
   .............
<style type="text/css">

Body { margin-left: 15%; margin-right: 10%; color: yellow; font-family: Arial; background: #FFFFFF; }
H1 { text-align: center; color: red}
H2 { clear: left; margin-top: 1em; margin-bottom: 1em; margin-left: 10%; text-align: left; color: red; text-decoration: underline; font-size: medium; font-family: Arial}
H3 { clear: left; margin-top: 1em; text-align: right; color: green;}
H4 { clear: left; margin-top: 1em; text-align: left; color: purple;}
H5 {margin-left: 40%; text-align: left; margin-right: 2%; color: blue; text-decoration: underline; font-size: medium; font-family: Times;}

</style>
</head>

The declaration of styles for each level must be surrounded by squiggly brackets { }
Each element of the style needs to end with a semi-colon ;

To make things simpler, you can highlight the style declaration above, copy it and paste it directly into the document that you are working on.
 
 
 
 

Top of Page | Back to LAS 740 Syllabus | Back to LAS 740 Schedule

Page Created by William J. Comer