Hi, and welcome! This is just a simple tutorial I put together to give a beginner an idea on how CSS works. Basicly, it takes a simple stylesheet and breaks it down for you so that you can see what does what. This is not a full tutorial, and it really only covers basic formatting, not positioning and all the various tricks you can do with CSS. It's simply a little introduction to show you how it works to get you started.

The tutorial is over to the right. Below are links to a FAQ page I put together for this, as well as links to various resources you can use to learn more. Happy building!

FAQs Page - A quick list of some questions you might have from reading this tutorial.

The W3's reference sheet - A very handy reference of the tags and the attributes you can use with them.

Tizag.com - Has a lot of really good tutorials, not only for CSS but for various other things. I've used the database tutorials a lot and found them really helpful!

Graphics by Dubird, JadeSlash Graphics and dubird.net © Dubird 2000-2010.

Below, I've listed some questions that you might have. If you think of one and it's not on here, just contact me and I'll add it. ^_^


What does CSS actually stand for?

CSS stands for Cascading Style Sheet.

What's the difference between external and internal stylesheets?

Internal stylesheets are hard coded into the page. Meaning, it's typed into the actual file itself. External means you insert one line of code on all your pages, and it calls to one file. This is really the prefered method, espically for larger sites. Makes changing the layout a lot easier!

I've seen other stylesheets, and they're not spaced out like these. What gives?

Spacing out the different parts is just to make it easier later on. Yes, you can have them all on the same line (as long as the attributes are within the curly brackets), but spacing them out makes it easier to find mistakes and change them later on. It doesn't affect the performance of them.

Can I format other HTML tags?

Sure can! <b>, <i>, <hr>, and pretty much any standard HTML tag. Even table tags can be formatted with CSS, though in my experience, it works better to set them to a class like you do DIV tags. But that's a personal preferance.

I've see # in front of tags, what does that mean?

'#' identifies an ID instead of a class. ID tags are used for unique DIV sections, and can be a good way to divide up parts of your site if you need it. Basicly, if your DIV section will appear multiple times, use a class. If it will only appear once, feel free to use an ID instead. The format is the same, just the '#' instead of '.' and "id" instead of "class".

Can I use classes in <P> or other tags?

Yes, you can. I find it handier to set the overall <P> for a specific class to save on typing later, but if you just want one paragraph to be different, you can assign it a seperate ID or class.

What do you mean, set the attributes for the <P> for a specific class?

Basicly, I can add to my stylesheet that says all the <P> tags in one specific class will have this formatting instead. I.e.:

.header p {margin: 5px}

By doing so, I can set the <P> differently just for that section without messing up the rest of the page. That way, if I have multiple <P> tags in that section, I don't have to remember to assign the class to each one.