Aflux
07-06-2007, 08:03 PM
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.
=]
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.
=]