External Style Sheet , a guideline for Webmasters

Introduction

By using the Link Tag to load a basic external style sheet (CSS), it’s possible to control the look n feel of multiply WebPages by making changes to One style sheet. (Alternate: Advanced CSS Generator)

This means that it is easy to change font, bgcolor, background, etc on ALL pages - just by changing one external style sheet (CSS).

Types of external CSS.

The three types of external style sheets (persistent, preferred, or alternate) are explained in Detail at The World Wide Web Consortium (W3C) (section 14.3). The most common external style sheet is the persistent link. The ‘link’ is always added to the Head Section i.e anywhere between the and the , add this code :

Example with code

This example is ’short n sweet’ because most other tutorials are overloaded with details.

Just create a text (ASCII) file named (style.css) that contains the code shown below. Put the style.css file in the same folder / directory as the file (or change the path in the href of the link).

Special Elements

To use special definitions, such as the .note shown at the end of the example, just use the Span tag to set the format around a section. For example, the .note defined in the example can be used for all footnotes on ALL pages by using this code

Note: blah blah

Note: The use of different definitions and the span tag is a powerful feature - allowing a consistent look n feel on all pages. Notice the period in the .note is required in the style sheet code. But when using the span tag, use just the name “note” without the period - as shown above.
style.css
(Sample Style Sheet)

body {
background-color: #FFFFF0;
font-family: Arial, Verdana, sans-serif;
font-size: 18px;
color: #00008B;
}

a { font-family: Arial, Verdana, sans-serif; font-size: 18px; color: #483D8B; text-decoration: underline}

a:hover { font-family: Arial, Verdana, sans-serif; font-size: 18px; color: #A52A2A; background-color: #FAEBD7}

h1 { font-family: Arial, Verdana, sans-serif; font-size: 32px; color: #A52A2A }
h2 { font-family: Arial, Verdana, sans-serif; font-size: 24px; color: #A52A2A }

hr{ color:brown; background-color:tan; width:90%; height:2px; }

table {
font-family: Arial, Verdana, sans-serif;
font-size: 18px;
color: #00008B;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}

.note {
font-family: Arial, Verdana, sans-serif;
font-size: 14px;
color: purple;
font-weight: bold;
}