CSS is short for 'Cascading Style Sheets', and is a part of current web standards. You can control most apects of your website design from one CSS sheet. Lets begin,

Basics



This controls the background color of your website, you should change '#000000' to the color that you want the background of your website to be.

Classes

If you want to define unique sets of attributes for seperate parts of your site then you will have to make use of classes. These are defined as follows:



- The '.' tells us that this is a new class, you can change the fonts and sizes to your liking, now in your html file if you use the code below then your text will have the attributes that you defined in the CSS sheet:



ID's

IDs work in similar ways to classes, except that they can only be used once (whereas classes can be used multiple times), so only use IDs for unique properties. ID's are mainly used to incorporate Style Sheet models into JavaScript or DHTML, here's an example of how to use ID's:



Now in your html file you would use:



Note we now use 'font id' instead of 'font class'.

Linking to External CSS

Once you have your CSS Sheet made, you will want to encorporate it into your website, to do this place the code below within your 'head' tags:



You should swap 'sheet.css' with the name of your CSS Sheet, and also swap 'Your Title' with your own title.

Well, thats all the basics covered, enjoy.

font is also the same as span:

To make your css look neater i would probalise use this setup:

Ok, thanks for the extra info.....i'm still relatively new to css aswell :)

nice, but i think i will stick to plain html for now, i mean most of the stuff i can do in html, and the only advantage i know of is using one file for multiple pages

But that is a very big advantage.

That was a pretty good tutorial. Thanks because I didn't know much CSS until I read this.

Nice helpful tutorial :D

(With a little PHP) I think it is possible for a user to select between different CSS Stylesheets, giving them more control as to how they view your site. This can be as simple as larger fonts for those who cant see well or a completly different colour scheme.

Also, I remember reading somewhere that there was a tag like this:

Where the "!important" part will set the attributes set in those particular {} brackets will not be overridden by a subsequent rule. Which can always be pretty handy.

There is a javascript based styleswitcher that enables you to let a user switch between different preset stylesheets for one page.

And depending on the way you coded your site and used styling(like NO tables for the layout) can make your stylesheets show extremely different websites while content remains the same.

I had a styleswitcher on my site once to but at version 3 I got it of my site.
Maybe I will return it when I add more styles to my site, but for now here is the article about the switcher:
http://www.alistapart.com/articles/n4switch/

and if you want to see what CSS can really do you should certainly give:
http://www.csszengarden.com
a try.

CSS...

Never really knew hat it even stood for.

so thanks. this helped ^_^

Just a 'lil error: under the topic "Linking to an external Stylesheet, you missed a space beween the: " and the / at the end.

Should be " />

Of course, fixed and thank you :)

How do you put an image url instead of a background color (Seems more simple to make a CSS Whit simply making the image in PS, add text in PS then Make a CSS and add the rest :)

thank you very much :)