" . date ("M d, Y", getlastmod()) . "
©
2002 - " . date("Y"); ?>
" . date ("M d, Y", getlastmod()) . "
©
2002 - " . date("Y"); ?>
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).
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">
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).
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.
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: Tue, Jan 29, 2008
© 2001-2008