Using CSS in a linked page

A style sheet is basically a text page, it has no start or end tags.
You add your CSS code and link to it on each page using

<LINK rel="stylesheet" href="delta.css" type="text/css">

Important part is linking to a CSS sheet where in example above "delta.css" is the name I use on this site.
If this page was in a folder then "delta.css" would not work, I need to specify where "delta.css" is.

I would use "../delta.css" the ../ is used to tell browser that CSS sheet is out side that folder,
If the CSS sheet was in another folder called site ?, then I would use "../site/delta.css"

A few common values

color : #DCD4C2; .............Text Colour

font-family : "Times New Roman"; .......Font Style, you will notice Times New Roman is enclosed in ""

font-size : 14px; ............Font Size can be set to px or pt, higher the number, the larger the text

font-weight : 600; ............Font Weight you can use normal, bolder, bold, lighter, or numeric values from 100 to 900, in multiples of 100

text-decoration : underline , overline; ................ This text-decoration is mostly used for links but can be used for all text, underline, overline, line-through, blink, none.

---

This is what makes the scroll bar on right coloured, but remember it only works in internet explorer

body {
scrollbar-3dlight-color : #FFFFFF;
scrollbar-arrow-color : #1C01E5;
scrollbar-darkshadow-color : #660000;
scrollbar-face-color : #F3E6D5;
scrollbar-highlight-color : #FBF4A7;
scrollbar-shadow-color : #FFCC99;
scrollbar-track-color : #F3E6D5;
}

---

This makes the links on the pages look and act the way they do,

a {
font-family : "Times New Roman";
font-size : 14px;
font-weight : 600;
text-decoration : none;
}

a:link {
color : #DCD4C2;
font-family : "Times New Roman";
font-size : 14px;
font-weight : 600;
}

a:visited {
color : #DCD4C2;
font-family : "Times New Roman";
font-size : 14px;
font-weight : 600;
}

a:hover {
color : #DCD4C2;
font-family : "Times New Roman";
font-size : 14px;
font-weight : 600;
text-decoration : underline , overline;
}

---

This makes anything using input tag blue, with black border 1 pixel wide, white text
change this to this

input {
background-color : #0066FF;
border-color : #FFFAFA;
border-width : 1px;
color : #FFFFFF;
font-family : verdana, arial, helvetica, sans-serif;
font-size : 12px;
font-weight : 500;
width : 150px;
}

Buttons also use the input tag
change this to this ? I do not think so!
To over come this, we will use a class which will over ride main input CSS.
to do this you just add class="inputr" to the tag as shown below.
<INPUT class="inputr" type="submit" name="Submit2" value="Submit">
change this to this much nicer

to make a class you add a period . to the name as shown below, I have called it .inputr, but you could call it jack, sally, what ever you like, just add a period to the name .jack or .sally then to call it you use class="jack" or class="sally", you will notice that when I used the class I removed the period.
<INPUT class="jack" type="submit" name="Submit2" value="Submit">

.inputr {
background-color : #0066FF;
border-color : #FFFAFA;
border-width : 1px;
color : #FFFFFF;
font-family : verdana, arial, helvetica, sans-serif;
font-size : 12px;
font-weight : 500;
width : 75px;
}