CSS: Style Sheets

Ok, what the heck is CSS? Undoubtedly you've asked that before. Admit it. I sure have -- and look at me know! Overly CSS obsessive. Yes, I know this layout isn't too CSS crazy, but did you really want an overflow? Ok nevermind...anyways, here's a basic CSS stylesheet. Then we'll pick it apart to itty bitty pieces.

<style type="text/css"> body, div, td, p{ font-family: verdana; font-size: 11pt; color: #9E1693; line-height: 18pt; } textarea, input, select, option, xmp { bgcolor: #FFFFF1; border: 1px dotted #0F0F0F; font: monaco 11pt #000000; } a:link { color: #0A0A0A; border-bottom: 1px dotted #000000; text-decoration: none; } a:visited { color: #0B0B0B; text-decoration: bold; } a:hover, a:active { color: #FFCCFF; text-decoration: italic; text-transform: uppercase; border-left: 15px #0BF0BF; } </style>

Ok, yeah that doesn't look too easy at first. We'll start with the basics though.

1. The Starting Tag

   
   See that very first thing there? It tells the computer what type of code it is. It has to do that since the actual CSS is not contained within any tags. But the style tags tell it that it IS a code. Get it?

2. Now why does it say body, div, td, p, etc.?

   
   It says that so that the computer knows what to apply the attributes (we'll learn about that in a second) to. Like, you wouldn't want all of your text to look like a link, right? Well that makes it so that it doesn't do that. Body is like the main part of your page, div is the stuff in blogs, and p is everything that you put a paragraph tag around. You have to do that because in other types of HTML all tags are closed.

3. Ok I get that, but what's with the brackets and the big space?

   
   Ok the brackets tell your computer that whatever is inside are the attributes for that part of the page. If you don't close the brackets (or don't open them for that matter) it won't work at all. And the big space...well I don't really know why other than to make it look nice and organized. I put in 8 spaces...why 8 I shall never know...

4. Ok so how do you decide what to put in...and what are these attribute things?

   
   Ok well let's go in reverse and start with the attributes. They are what decide happens to that part of the page that you have specified. If you look at the CSS it's pretty basic to know what to put in -- font: stands for the font and all of it's little attributes. And you close everything with a ; just like when you open and close with the brackets. Pretty simple, eh?

5. Um...whatever but why does it have those a:somethings?

   
   Ahh, you've reached the links my friend! Whenever something has a: in front of it, that means it has to do with some sort of link. So if it says a:link that means, obviously, that it is going to be the attributes about the links. If it says a:visited, then it will be for the links that the user has visited. If it says a:active, then it's for the active links, and a:hover is for when you hover over a link. As you can see, I combined a:active and a:hover because I wanted the link to look the same when it was active and when you hovered. Does that make sense?

6. Ok. But are those the only things that I can change?

   
   No way! You can add tons more! You can change all sorts of things! Like the headers (h1, h2, h3, h4, h5, h6), or you can even make your own! All you would do is, if you had something called, say, MYSITEROCKS, then just make a thing that says either .MYSITEROCKS or #MYSITEROCKS, add the brackets and attributes, then somewhere on your page put the following <div id="MYSITEROCKS"> Put all the MYSITEROCKS stuff right in here! </div> and there you go!

   It doesn't have to be MYSITEROCKS. It could be anything you want!

7. Ok great! But now what's that last part?

   
   Remember how we had the style tag at the beginning? Well it won't work if we don't end it, so there it is!

Well I hope this helps. I will gladly add stuff. If it didn't help at all, I'm REALLY sorry.

Oh, click here to see what the above CSS looks like!