HARDSTAR.ORG . Fly hard, you're a hardstar.

Style Sheets (CSS)

Style sheets are critical to a well designed/good-looking website. The style sheet can control and change all of your CSS (colored pages, links, backgrounds, forms, etc) all at once with just one tweak to it's coding. With a style sheet you won't have to bother with changing every single page of your site ever again when putting up a new layout.

Copy and paste the following code onto a new document. Save and name it style.css.

body {

background: url(http://image.gif);

background-attachment: fixed;

background-color: #color;

font: 11px font, sans-serif;

color: #color;

line-height: 12px; 

}

a, a:link, a:visited, a:active {

color: #color;

text-decoration: none; 

}

a:hover {

color: #color;

text-decoration: none; 

}

textarea, input, select {

font: 11px font, sans-serif;

color: #color;

line-height: 12px; 

background: #color; 

border-style: solid; 

border-color: #color; 

}

A note about colors. You'll need the help of Lisa for an introductory list of hex codes. You can also get your own by using a paint program.

Body
There are 2 background codes. The first two lines are for an image code. The image code will tell your background to stay completely still and not have it repeat itself when pages scroll (handy for long blogs made of tables/div or iframe layouts). The other code is for a simple color background. Choose one or the other and take the other out (I usually keep a copy of the one I didn't choose just incase I need the code for a next layout).

Next, edit in your font size, type, and color. Leave in sans-serif. Put your font type only where it says "font" after your size. Common sizes are around 8 - 12 and some general types are arial, verdana, tahoma. Common line heights are usually between 10 - 13 but if you don't want to specify you can take it out.

A, A:Links, Hover
These are your link colors. I usually keep the link, active and visited colors the same so that is why they are all put together under one color but you can seperate them if you'd like. The link is the main color links will be. Active is what color the link will change to when it has been clicked and is loading the next page. Visited is a link you've already visited. Hover is what the link will change to when the mouse is over it. Text decoration takes away the underline you get with default links.

Click here for a list of different cursors (add cursor: name; to your CSS). If you would like to know how to add background colors or font-weights to your links, click here.

Textarea, Input, Select
The only new settings we have here are the background color and style. Leave the style as is. Background color and border color are self-explanitory.

3. What we will do now is connect every page to your Cascading Style Sheet. In the HEAD of your documents, place this simple code (and get rid of all your other CSS on the individual subpages).

<link rel="stylesheet" href="http://you.com/style.css" type="text/css">