cascading style sheets - | dittmerdan.net |

cascading style sheets is basicly a way to save space on your site.. if all your pages is layed out the same way, same colored font, background, scroll bars, headers.. etc etc..

and it saves time also.. space and time.. entering the same tags on each page over and over..

ok lets get started, first open up windows explorer.. (start, run, type explorer, press enter).. click tools at the top of windows explorer then click folder options.. click the view tab.. read whats there and find hide file extentions.. make sure thats unchecked.. and click ok..

right click on the desktop, goto new then click folder.. name it css.. now click into the css folder.. click file at the top.. goto new, click new text document.. right click on new text document.. click rename.. rename it to file.css.. then also do the same file new, text document.. and rename this file to index.html..

alright now you have a folder css with two files. file.css and index.html.. open up the file.css bye right clicking on it and click open with.. click on notepad.. it will open and be blank.. now type this following code into the notepad window..

body {
background-color: yellow;
}

ok now click file at the top of notepad then click save..

now click into index.html.. it will load a plain white page... right click out in the white area.. click view source.. now notepad will open again and be blank again..

type this into the notepad..

<html>
<head>

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

</head>

ok now reload the index.html file and now it should load with a yellow background.. as you can see the index.html file is getting the information from the file.css file..

alright now type this code into the file.css in notepad.. go ahead and delete the old one you got there the body background color yellow.. and replace it with all this..

body {
scrollbar-base-color : green;
scrollbar-highlight-color: white;
scrollbar-track-color: black;
scrollbar-arrow-color : blue;
background-color : yellow;
color: red;
}

now click file and save again on file.css and reload the index.html file again.. as you can see it looks like a rainbow.. makes you want to go disco'n..

open up index.html and edit it and add some text to it.. you will see the font is now red.. you changed the default text to red.. and the other 4 you can see what you did you changed colors on the page scroll bar..

ok now edit file.css file again.. and add this to it..

body {
a:link {color: blue; text-decoration: none}
a:visited { color: green; text-decoration: none}
a:active { color: black; text-decoration: none}
a:hover { color: red; text-decoration: underline}
}

now save that and reload index.html file.. you will have to add a link code to index.html if you are uncertain how.. see my basic website page.. and after you do that and save index.html reload it and you will see you just put in a mouse over for all links.. and it set colors for the link.. and put what you wanted it to do when you hover.. and i put underline..

ok heres to set a font for a certain header..

h1 {
font-family: times new roman; color: blue; text-align: right; font-size: 40pt;
}

ok that just set a h1 header default to times new roman.. font color blue... aligned right.. with font size 40pt..

now edit index.html again and put in this tag..

<h1>yo whats crackin dogg</h1>

you can also make classes and define them with css. heres an exsample.

<table class="myclass">
<td>

</td> </table>

in css type this..

.myclass {
background-color: #000000;
}

ok thats all im going to type for this subject.. there is a lot more stuff you can do with this.. use google and search for css tutorial.. or just css.. and you will find plenty of sites to help you on this..

and i also zipped up an exsample of how i use css on my site. you can see how much control i have over my whole site. with one file