Style Sheets

Save those fingers! Style Sheets save you a lot of formatting of documents. With Style Sheets you set up all the code attributes once, in the style sheet, and they all define the object when you call the particular style out.

Here is the Paragraph Style for this document:

p {
font-size: 10pt;
color: #000000;
background: #fff7ef;
text-indent: 1.5em;
font-family: "verdana", "arial", "geneva", sans-serif;
letter-spacing: 0pts;
line-height: 16px;
text-align: justify;
text-transform: None;
word-spacing: normal;
}

Now all of that information comes into play every time I type the code <p>. That saves a lot of keystrokes. It also allows me to change the entire web site by updating one file, the style file. Styles are saved with a file extension of .css which stands for Cascading Style Sheet.

pre.toc {
font-size: 10pt;
color: #0000ff;
background: #f7deb5;
font-family: "times new roman";
}

Above is a style for the <pre> command. I comes into play when called out like this; <pre class="toc">. The toc part of this could be anything, in this case it's called toc, but it could be named anything. In this case the code was for the Table of Contents, hence, toc. The font, font size, font color and background color are defined in this style. All come into play when it is called out.

All styles are constructed the same. The name, then an open bracket, the style definitions, and then a closing bracket. The definitions within the style are always setup with the name a colon the definition and a semi-colon.

The way you type in a Style is pretty much up to you. The two examples below will both work.

h3 {
text-align: center;
font-size: 16pt;
}

or

h3 { text-align: center; font-size: 16pt; }

Here is the style sheet I have set up for this tutorial (well it's how I had it set up at the time of this writing. Whatever changes I made in it since this writing are not reflected). You can copy this and paste it into a new document in NoteTab and save it as style.css (or whatever filename you wish to use). You'll be able to change it and use it over and over.

body {
color: #000000;
background: url(bg-tutor4.gif);
font-family: "verdana", "arial", "geneva", sans-serif;
}

p {
font-size: 10pt;
color: #000000;
background: #fff7ef;
text-indent: 1.5em;
font-family: "verdana", "arial", "geneva", sans-serif;
letter-spacing: 0pts;
line-height: 16px;
text-align: justify;
text-transform: None;
word-spacing: normal;
}

pre.toc {
font-size: 10pt;
color: #0000ff;
background: #f7deb5;
font-family: "times new roman";
}

pre {
font-size: 10pt;
color: #000000;
background: #fff7ef;
font-family: "verdana", "arial", "geneva", sans-serif;
}

pre.code {
font-size: 10pt;
color: #0000ff;
background: #fff7ef;
font-family: "verdana", "arial", "geneva", sans-serif;
}

a:link {
font-size: 10pt;
color: #0000ff;
background: #fff7ef;
font-weight: normal;
font-family: "verdana", "arial", "geneva", sans-serif;
TEXT-DECORATION: underline
}

a:visited {
font-size: 10pt;
color: #0000ff;
background: #fff7ef;
font-weight: normal;
font-family: "verdana", "arial", "geneva", sans-serif;
TEXT-DECORATION: underline
}

a:active {
font-size: 10pt;
color: #f7deb5;
background: #fff7ef;
font-weight: normal;
font-family: "verdana", "arial", "geneva", sans-serif;
TEXT-DECORATION: underline
}

a:hover {
font-size: 10pt;
color: #FF6666;
background: #fff7ef;
font-weight: normal;
font-family: "verdana", "arial", "geneva", sans-serif;
TEXT-DECORATION: underline
}

a.nav:link {
font-size: 8pt;
color: #0000ff;
background: #f7deb5;
font-weight: normal;
font-family: "verdana", "arial", "geneva", sans-serif;
TEXT-DECORATION: none
}

a.nav:visited {
font-size: 8pt;
color: #0000ff;
background: #f7deb5;
font-weight: normal;
font-family: "verdana", "arial", "geneva", sans-serif;
TEXT-DECORATION: none
}

a.nav:active {
color: #f7deb5;
background: #f7deb5;
font-weight: normal;
font-family: "verdana", "arial", "geneva", sans-serif;
TEXT-DECORATION: none
}

a.nav:hover {
font-size: 8pt;
color: #FF6666;
background: #f7deb5;
font-weight: normal;
font-family: "verdana", "arial", "geneva", sans-serif;
TEXT-DECORATION: none
}

a.glossary:link {
font-size: 10pt;
color: #d6a521;
background: #fff7ef;
font-weight: normal;
font-family: "verdana", "arial", "geneva", sans-serif;
TEXT-DECORATION: none
}

a.glossary:visited {
font-size: 10pt;
color: #d6a521;
background: #fff7ef;
font-weight: normal;
font-family: "verdana", "arial", "geneva", sans-serif;
TEXT-DECORATION: none
}

a.glossary:active {
font-size: 10pt;
color: #d6a521;
background: #fff7ef;
font-weight: normal;
font-family: "verdana", "arial", "geneva", sans-serif;
TEXT-DECORATION: none
}

a.glossary:hover {
font-size: 10pt;
color: #d6a521;
background: #fff7ef;
font-weight: normal;
font-family: "verdana", "arial", "geneva", sans-serif;
TEXT-DECORATION: none
}

small.copyright {
font-size: 7pt;
color: #999999;
background: #f7deb5;
text-align: center;
font-family: "verdana", "arial", "geneva", sans-serif;
}

small.attribution {
font-size: 7pt;
color: #999999;
background: #ffff7ef;
text-align: center;
font-family: "verdana", "arial", "geneva", sans-serif;
}

font.littlelink {
font-size: 7pt;
color: #0000ff;
background: #fff7ef;
font-family: "verdana", "arial", "geneva", sans-serif;
TEXT-DECORATION: underline
}

font.codetext {
font-size: 8pt;
color: #0000ff;
background: #fff7ef;
font-family: "courier";
}

font.exampletext {
font-size: 7pt;
color: #0000ff;
background: #fff7ef;
font-family: "verdana", "arial", "geneva", sans-serif;
}

font.codeexample {
font-size: 8pt;
color: #0000ff;
background: #ffffff;
font-family: "courier";
}

font.example {
font-size: 8pt;
color: #000000;
background: #ffffff;
font-family: "verdana", "arial", "geneva", sans-serif;
}

font.examplet {
font-size: 8pt;
color: #000000;
font-family: "verdana", "arial", "geneva", sans-serif;
}

font.toc {
font-size: 12pt;
color: #0000ff;
font-family: "times new roman";
}

h1 {
text-align: center;
font-size: 24pt;
color: #0000ff;
background: #fff7ef;
font-family: "times new roman";
}

h1.exampleleft {
text-align: left;
font-size: 24pt;
color: #000000;
background: #ffffff;
font-family: "times new roman";
}

h1.examplecenter {
text-align: center;
font-size: 24pt;
color: #000000;
background: #ffffff;
font-family: "times new roman";
}

h1.exampleright {
text-align: right;
font-size: 24pt;
color: #000000;
background: #ffffff;
font-family: "times new roman";
}

h3 {
text-align: center;
font-size: 16pt;
color: #000000;
background: #fff7ef;
font-family: "times new roman";
}

h3.exampleleft {
text-align: left;
font-size: 16pt;
color: #000000;
background: #ffffff;
font-family: "times new roman";
}

h3.examplecenter {
text-align: center;
font-size: 16pt;
color: #000000;
background: #ffffff;
font-family: "times new roman";
}

Study this file and see how things work. I actually added a bunch of stuff to this for you to see. Notice the different headings with alignment changes.

Using the above Style Sheet, saved as style.css you would call it out in your HTML documents with the line below which you place somewhere between the <head> and </head> tags.

<STYLE type="text/css">
<!-- 
h1 { font-family: arial; font-size: 20pt; font-style: bold; color: black }
h2 { font-family: times new roman; font-size 16pt; }
-->
</STYLE>

<FONT STYLE="font-weight: bold; font-family: arial">Text Goes Here</font>