[TUT] Introduction to CSS

[Aflux]

OK, so if you know basic to advanced (x)HTML then you should be ready to learn CSS which is very nifty when you want to style something.

CSS stands for Cascading Stylesheets and it basically is used for styling things such as tables, text's, div's and layers.

OK, so to make your first CSS document open up Notepad [or any other text/html editor] and save the empty document as "style.css".

Right, to start any CSS code we need to call it something and open it with a "{"

Type this;

body {
}

Now, the body element is used for the whole document and contains such things as backgrounds, alignments and font colour's.

Things you can add are;

body {
background-color: #000000;
color: #FFFFFF;
}

The background-color element is basically what the background colour of the page will be and the color element is the font colour that will be used on the page. After each element, you need a semi colon ";" and start a new line once finished that element.

I'm not going to go into too much detail about all the element's as there really are thousands so I'll just move swiftly on.

If you want to style a div and the div id is "mainbox" then you would have to use the id tag and the name, i.e;

#mainbox {
background-color: #000000;
color: #FFFFFF;
 }

Notice the # infront of mainbox? This means that it's the ID of the div and can only be used once whereas classes can be used numerous times and these shall look like this;

.mainbox {
 background-color: #000000;
 color: #FFFFFF;
  }

That's basically it for a start, you've learnt the basics.

I'm not very good at writing tutorials so I'll probably brush up on it later on in life.

=]

[:Edzy]

nice +REP

[Ini]

Good tut, you could of wrote it a few days ago though when i need help lol instead i had to search for ages to find out what i needed to no

[Aflux]

It's only the very basics and not very well written.

[Mr.OSH]

A nice tutorial for beginners, well done. + rep.

[Puma]

nice TUT..

[Ini]

A nice tutorial for beginners, well done. + rep.

Exactly me ;]

[:Edzy]

It's only the very basics and not very well written.

the modisty. ;P

[RYANNNNN]

I reccomend you just use background: so you can use more things such as repeat-x/y, colors, images etc.

[Tom H]

Nice one.