Cascading Style Sheets &
Server Side Includes...
The Crash Course

Requirements: NoteTab Pro, Notepad or any text editor

CSS & SSI are great ways to control your websites. They allow you to propagate global site wide changes from single files.

In a nutshell a CSS is a file that your web pages can reference via a link in the head for all sorts of formatting information. Colors, margins, background tiles, paragraph & heading text attributes for your entire site and more can be controlled from a single file. Make the change in that single CSS & viola' no more editing every single html file in your site.

SSI is a nifty little tag that browsers use to insert other files into your source. For example the header navigation & graphics for this site are in their own separate html file that each page of this site references. This way, when I change a graphic or ad an item to the nav bar I do it in only one place.

Let's get started!



Cascading Style Sheets

This link, <link rel="stylesheet" href="myfirstcss.css" type="text/css">, placed in the <head> of your web pages tells the browser to find the file "myfirstcss.css" and reference it for page formatting information.

Here's a simple html document referencing my css.

<html>

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

<body>
<table border=0 cellspacing=0 cellpadding=0>
<tr>
<td>Simple html doc.
</td>
</tr>
</table>
</body>
</html>

Although most of these parameters are pretty self explanatory, let's break them down just for grins.

Open Style tag.

<style type="text/css">
<!--

Defines the web pages body color & background tile if any.

body {

background-color: 7D00FF;
background-image: url(background.gif); background-repeat: no-repeat;

This how all those nifty colored scrollbars everyone is using is done.

(More on Colored Scrollbars)

scrollbar-face-color: 6400CC;
scrollbar-3dlight-color: CB99FF;
scrollbar-highlight-color: CB99FF;
scrollbar-shadow-color: 34006A;
scrollbar-darkshadow-color: 34006A;
scrollbar-arrow-color: white;
scrollbar-track-color: BAA7CE;

Defines page margins.

margin-top: 10px;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 20px; }

Defines the anchor text between the <a href> and </a> tags.

a{color:black; text-decoration:none;}
a:visited{color:black; text-decoration:none;}
a:hover{color:00FFFF; text-decoration: none;}

Defines the header text between the <h1> and </h1> tags. My browser, (IE) only sees up to 6 of these. They must be h1, h2, h3, h4, h5 & h6.

h1 {font-family: verdana; font-size: 12px; color:black}
h1 {text-align: center}
h1 {margin-top: 4px}
h1 {margin-left: 7px}
h1 {margin-right: 7px}
h1 {margin-bottom: 0px}

Defines the text between the
<p class="p1"> and </p> tags.

p1 is the name in the css that the shtml doc looks for. As far as I know the name can be anything, ie; p.source,
p.courier
or p.paragraph1.

These would be referenced by
<p class="source">,
<p class="courier"> or
<p class="paragraph1"> tags
respectively.

p.p1{
font-family: arial; font-size: 16px;
text-align: justify;
text-indent: 30px;
color: black;
font-weight: normal;
padding-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
margin-top: 0px;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 0px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: C3DCED;
border-right-color: C3DCED;
border-bottom-color: C3DCED;
border-left-color: C3DCED;}

Close style tag

-->
</style>

( Return to Top )




Server Side Includes

This tag <!--#include file="navigation.html"-->, placed in your shtml doc tells the browser to find the file "navigation.html" and quiet literally, character for character, insert that source in place of the tag. It can be placed within <td> tags or it can stand alone.

The rules for SSI are simple:

1. Any file that is to use SSI MUST be saved with the .shtml file extension or it will not work.

2. SSI cannot be tested locally. The website must actually be viewed on a server to see SSI in effect.


Colored Scrollbars

scrollbar-highlight-color: red;
scrollbar-face-color: green;
scrollbar-shadow-color: blue;
scrollbar-3dlight-color: yellow;
scrollbar-track-color: tan;
scrollbar-darkshadow-color: purple;
scrollbar-arrow-color: orange;


That's it short & sweet, enough information to get you in trouble. Getting out is your business! If you want to learn about CSS in greater detail the web is crawling with great web resources, just do a search.

If you want to see actual working examples of these you can download my zip file HERE .Just download & unzip into an empty folder & have fun ripping them apart! Need Winzip? Get it here:

( Return to Top )