Table of Contents:
I. Introduction
II. Starting your stylesheet
--A. Starting syntax with font-family
--B. Defining classes
--C. Using classes
III. The STYLE tag
IV. Comments in CSS
V. The "a" tag
VI. A quick list of common attributes
VII. Notes
--A. Universal classes
--B. Grouping
--C. Multiple instances
VIII. Finding other attributes
IX. Closing

I. Introduction
Firstly, to begin using a stylesheet, you must have one. Open up your text editor and save as (something).css. I know NotePad doesn't need quotes for a stylesheet, but I'm not sure about other programs.

Now what good is a stylesheet if you don't know how to use it? to include a CSS document in an HTML page, simply put this in the head:Where (location) is, you guessed it, the location of the file. If it's in the very top directory you can use "/stylesheet.css" or you can make it relative like "../stylesheet.css" or whatever (for those who don't know "." is current directory and ".." is up one level).

II. Starting your stylesheet

II. A. Starting syntax with font-family
Now for the actual CSS:
To change the style that something appears in, you put the tag followed by a bracket, then the styles, then a closing bracket. For example, you specify a font with the font-family attribute, and if you wanted your entire page in Wingdings (and who wouldn't?) you could put:Now, you don't have to have it spaced like that, it'll still work fine if you don't, but it's sort of the convention. You always end an attribute with a semicolon. But suppose not everyone that visits your site has Wingdings installed on their computer. Since it's the font family, you can specify multiple fonts in order of preference, separated with commas:I added Sans-Serif in there because the W3C likes it when you end with a really really general family. There are a lot of different attributes that deal with font, but I'll get to those later.

II. B. Defining classes
You can change attributes for pretty much any tag, p, i, h1-6, div, td, form, hr, just to name a few. You can't make your own tags, though. But what happens if you run out of tags? You can assign classes to most tags, but if you're not basing the attributes on anything, P or DIV is best. To assign a class, you just put the tag followed by a period followed by the class.Here I've stated that when I use a div tag with the class "error," the text will be Arial, red, italic, and 12 pt. Color is font color, and you can also use hex values with it.

II. C. Using classes
So how do you use this? When you want to display an error, just put this:It will appear like this:
An error has occured (or your text)
(or as close as I can get, having only the numbers 1-7 at my disposal for size). Your class can be any name you want. Also, if you base it off another tag, like <h2 class="announcement">, then it will have all the properties of h2 and also the ones you specify. You also probably shouldn't change properties of a tag drastically that will appear a lot (I once made "i" red for errors, then turned some text red with i inadvertantly).

III. The STYLE tag
Now if you don't want something to appear in the stylesheet but you need it for one page, you can put this in the head:You can do all the same things in the STYLE tag that you can in a stylesheet.

IV. Comments in CSS
Comments, like in programming and HTML, are stuff that is ignored when the thing is actually run. I only know of one way to comment in CSS that won't make the W3C validator mad at you, and that's /* and */. You can place one line or multiple line comments between /* and */. I thought that you had to start each non /* or */ line with a *, but after another W3C validator check it seems not to be the case.

V. The "a" tag
The a tag has a few different things you can do with it, because it has different states. There's normal, hover, visited, and active. To change the attributes of normal you just do "a," for hover you do "a:hover," visited is "a:visited," and active is "a:active." You can change the attributes of each independently of one another. Say, for example, you want a link to be blue and have no underline, but on hover you want it to turn yellow, have an underline, and be bold. Then you want a visited link to look like the normal but be grey, you could do this:

VI. A quick list of common attributes
Some attributes you might need:

font-family - set fonts in order of preference
font-weight - normal, bold, or a number 100-900 (normal is 400 and bold is 700)
font-style - normal, italic, oblique (don't know what oblique is)
text-decoration - none, underline, overline, line-through, blink
text-transform - none, uppercase, lowercase, capitalize
text-align - left, center, right, justify
color - font color in rgb ("rgb(x,y,z)"), hex ("#UVWXYZ") or color name
text-indent - sets indent in pixels (px) or % of page
line-height - "normal," relative to font (#em), length, or % of font size (double spacing would be "2em"
background-color - sets background color in rgb, hex, or color name
background-image: usually defined under BODY, usage is " url("YOURURLHERE") "
width - auto (browser calculates), % of page, or length (px, cm etc.)

But that's just a few simple ones, there are many more.

VII. Notes

VII. A. Universal classes
If you want to have a few common things between tags, you may omit the tag for a class, and only put the tag name. For example, if you want to have several things centered but do not want to make a new class for each, you can just put this: Since you didn't specify a tag, you can now use class="center" on any tag and it will be centered.

VII. B. Grouping
If you don't want to type the same attributes over and over again for multiple tags or classes, you can group them together. Let's say you want all your headings to be centered, no matter what. You could make a class for each or make a universal class to save some typing, but you could save even more by grouping them together: That way, you don't have to type class="center" for every one.

VII. C. Multiple instances
If you want to make it so that something doesn't happen the first time but happens every other time, you could use, for example, "p+p." If you were going to write a long essay or something, you don't have to indent the first paragraph because of some weird convention, so you could do this: This makes it so every "p" tag with a "p" tag right before it is indented. The first paragraph won't be, because there isn't a "p" proceding it.

VIII. Finding other attributes
I have almost certainly not covered all the attributes that you will use with CSS. When I need to find a new one or look up how to use it correctly, all I do is go to Google and type "CSS (attribute I need to find) site:w3schools.com" (without the quotes). This returns everything containing the attribute I need from the w3schools CSS tutorial. W3schools has really good documentation of the attributes and how to use them.

IX. Closing
So why use CSS? Because the w3c tells us to, of course! But seriously, it will work better in most browsers and it is a LOT more customizable than just HTML. Sometimes I actually do my homework in CSS, because it doesn't try to autoformat all my stuff like Word does. I hope that this tutorial helped whoever read this far, and I'll answer any questions about it that I can.

Nice tutorial there. If i didn't know CSS already I would have found that very helpful. That's some good work right there.

Very helpfull tutorial, too bad i just learned all that tool. lol But i bet is definately going to help a lot of people

Very nice tutorial,
Easy to follow,
Good to apply, you motivated me


Just a question, i used a stylesheet, in that stylesheet I included some "absolute" positions for my website tables (main menu, stats, shoutbox, etc..) and it shows fine in Firefox, but in IE it looks like crap, the tables are overlapping each other (main menu and stats) so what do i need to do?

Short answer: don't use IE
I guess you could try to replicate the absolute lengths with percentages, but absolute lengths are weird and don't go across different browsers well.

I think it would be hard editing them with percentages instead of px positoning, what about relative positioning instead of absolute? (wait, relative=%? )

anywayz...I seem to have fixed, it's showing correctly now , but the question stays whats best to use, it seems absolute positioning works good enough?

Huge un-needed quote deleted


thanks....this is very "interesting" lol.....CSS isnt used very much these days exept for like basic websites.....But i still like css as u have the right to choose which colour and so forth......the only problem about it is that it can only do a certain thing.....u cant go beyond that point which is anoying because if css has more syntax involved then it would be better and you could make it look more professional and make a site that people would like....but overall i gave this tutorial a 9/10

This post has been edited by NilsC: Mar 11 2005, 06:16 PM

Really? I'd think it's used a lot more than it used to be. It also helps with browsers that don't know HTML *coughIEcough* You can do a lot more than I put there, there's a huge number of attributes.