background-position : left
- Set the background position of the IMAGE . Remember : It's IMAGE .
>> left / right / bottom / top

background-attachment : fixed
- The background-attachment : fixed fixes the background-image to its place so that when you scroll down , you don't see the background image repeating .
>> fixed / scroll

background-repeat : no-repeat
- background-repeat : no-repeat disallow the background-image to repeat its image if there are still some spaces in the element . background-repeat : repeat-x allow the background-image to repeat horizontally ..
>> repeat-x / repeat-y / repeat

Knowledge #00
- Application method for class name that started with a '#' , not a dot (.)
eg.

Code:

#maintable {}

The class name started with a '#' should be applied to elements in this way :

Code:

<table id="maintable"></table>

For class name that started with '#' , apply using id="" , not class="" .

Knowledge #01

Code:

div.maintable {}
td.maintable {}
a.maintitle {}

The attributes inside div.maintable will be applied to the <div> tag that uses maintable class ONLY .
While the attributes inside td.maintable will be applied to the <td> tag that uses maintable class ONLY .

Knowledge #02

Code:

.maintable a:link {}
.maintable a:hover {}
.maintable td {}

The attributes inside .maintable a:link {} will be applied to the <a> tag that uses maintable class or <a> tag inside a <table> tag that uses maintable class .
While the attributes inside .maintable td {} will be applied to <td> tag that uses maintable class .

The img above is carrying attributes for <img> tag that does not have any classes .
While the BODy above is carrying attributes for <body> tag .
TABLE, TR, TD above is carrying attributes for <table> , <tr> or <td> tag that does not have any classes .

The codes above make the inputs that uses myinput class have a black background(bg) , when the mouse is over the input , its bgcolor changes to white , when you click on the input , the bg changes to red .
Stylize your input with color: and border:

Knowledge #10
- Removing the content of selected element and class

Code:

div.copyright {display:none}

The codes above removes all the contents of <div> tag that uses copyright as its class .
Yes , with this , you can remove the copright , but I'm not here to teach you how to remove copyright . Normally , the element/tag that contains the BBS's copyright are used with important functions too , but you can change the class . Anyway , don't do this .

You will noticed you've made a buttons with making a border in the image . This makes your works easier if you make skins . Just make a gradient and buttonize it with the CSS .

Knowledge #12
- Margin and Padding
You can code margin and padding with this method :

Code:

.div { margin:3px 9px 13px 19px;}

With this kind of coding , you don't have to specify the direction anymore as you've done all the direction .
The 3px above means you have 3 pixels of spaces from the top (margin-top) .
The 9px above means you have 9 pixels of spaces from the top (margin-right) .
The 13px above means you have 13 pixels of spaces from the top (margin-bottom) .
The 19px above means you have 19 pixels of spaces from the top (margin-left) .

Remember : It is rotating in clockwise direction and started from top .
It is the same with padding .

Phew , I've told you all the CSS knowledge I knew . Feel free to link others to this tutorial , I will be happy if you did that .
I learned CSS by myself , by looking at <style> of different websites , then I started to make skins . Making skins is the easiest way to learn CSS , I think .

You could change the CSS of the web at real time and you could take the code to put in your styles. Is amazing and very simple way to make serius or funny styles woth a very simple html code (better if is normalized with W3C)