Create basic web page to copy n paste - uses a HTML / CSS code generator

CSS template generator to make a 3 column w header n footer layout (tableless)

PHP CSS HTML code maker for an entire web site with 2 column w header n footer layout

CSS HTML form layout code maker n generator to create a colorful box around the form

Dynamic PHP Menu Code - uses SSI n PHP to determine current page - then modifies the menu to show which page is current

CSS tutorial for external style sheet CSS

Grade - rate a web site by design rules - tutorial on using design rules for a professional web site

Tutorial and Tips for site submission to search engines - meta tag descriptions

Shack BBQ Recipe for vinegar based sauce - also mustard base recipe

CDAI Crohn's Disease Activity Index to gauge progress or lack of progress associated with crohns disease

Personal Site - about John Prince

My Life on Lake Conway - retired John Prince

Site Map for all ibdhost ibdprince web sites - plus other client sites

Webmaster Tutorials - complete index of various free tutorials offered by ibdhost or clients

Hosted by IBDhost

Contact us form with tutorial to create a contact form that hides email address from spam robots


See Blog

Valid XHTML 1.0!
Valid CSS!

Features of External Style Sheet


By using the Link Tag to load a basic external style sheet (CSS), it's possible to control the look n feel of multiply Websites by making changes to One style sheet. (More: 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 <head> and the </head> , add this code :

<link rel="stylesheet" type="text/css" href="style.css">

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

<span class="note"> Note: blah blah </span>

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.

(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;


An external style sheet (CSS) is perfect - when the same style / format / look n feel is required on numerous pages. With an external style sheet, the webmaster can change the look of the entire site - by changing one file.

It is easy to add special definitions (such as the .note - yes the Period is Required in the style sheet). Then use the <span class="note(Without Period)"> .... blah blah .... </span> in the code.

This tutorial is a basic example to make it easy for newbie / webmasters / web designers in training to see the value of external style sheets (CSS).


Updated: Sat, Apr 23, 2011

© 2001-2011