CSS breakdown

[ChibiMaestro]

Reading Iris-spider's thread on her learning CSS gave me the idea to write up this tip guide!

CSS breakdown = the simple steps for a beginner

1. First of all, there are a few "vital" elements to a CSS...

--Body: this is the background (behind text/wrappers).
--A: this is the link

2. Background codes (e.g. background image for a sidebar, menu etc.)...

Background Images:
--

body {
background:url(background image url here) #000;
}

^This is the code for a background IMAGE. The #000 after it is a html colour code for black. The code is only necessary if you are using a small unrepeated image and want a different background colour than the default white.
Image repetition:

All image repetition sets must be placed after:
background:url(background image url here)
e.g. background:url(background image url here) no-repeat;
The example makes the background image not repeat by putting "no-repeat".

background:url(background image url here);
^Not putting anything, this makes the image automatically repeat up, down and left, right.

background:url(background image url here) repeat-x;
^Putting "repeat-x" makes the image repeat left and right.

background:url(background image url here) repeat-y;
^Putting "repeat-y" makes the image repeat up and down.

Image position:

All image positions must be stated after:
background:url(background image url here) repeat-y
e.g. background:url(background image url here) no-repeat center top;
In the example above, "center top" makes the image position at the top center.

background:url(background image url here) no-repeat left top;
^Using "left top" makes the image position at the top left.

background:url(background image url here) no-repeat right top;
^Using "right top" makes the image position at the top right.

background:url(background image url here) no-repeat center bottom;
^Using "center bottom" makes the image position at the bottom center.

background:url(background image url here) no-repeat left bottom;
^Using "left bottom" makes the image position at the bottom left.

background:url(background image url here) no-repeat right bottom;
^Using "right bottom" makes the image position at the bottom right.

background:url(background image url here) no-repeat left center;
^Using "left center" makes the image position at the center left.

background:url(background image url here) no-repeat right center;
^Using "right center" makes the image position at the center right.

background:url(background image url here) no-repeat center center;
^Using "center center" makes the image position right in the middle.

background:url(background image url here) no-repeat

--------------------------------------
Background colours:
To use background colours, place the html colour code after:
background-color:
e.g. background-color:#000;
In this example, the colour code was "#000" which is black.

The colour automatically repeats itself all the way so there is no need for you to use any repetition codes.

For more information on html color codes, here is an awesome useful site!
html-color-codes.info

3. Links

So what are the codes to style links?
Here is the basic:

a { color:#000;}
a:hover { color:#FFF;}

The first one is for the link when displayed. In the example above, it says the colour should be black.
The second one is for the link when you put your cursor over it. In the example above, it says the colour should be white.

You can put ":hover" on almost any element to style them when you hover over them with a cursor.

Now, you know you can easily style elements such as menus and sidebars with background images and colours, guess what? You can do this to links too!

It's pretty simple really, almost anything you can do with anything else, you can do with any CSS code.

4. Elements

Want a navigational menu on your site? Don't know how?
CSS version:

#menu { menu code here }

HTML version:

<div id="menu">Menu links here</div>

As you can see, unlike the link code, the "menu" has a hash beside it (#).
This shows it is a div element, a div ID to be exact.
For a div element, a div CLASS to be exact, it would be a full stop instead (.).

There isn't a default element for a menu unlike the "body{" option, that's why you have to make your own with # or ., and also in the example above, there is a "menu code here", what I'm saying is that you can almost post any CSS code there, the background image code etc.
You can even style the menu links by using:

#menu a {
or
#menu a:hover {

I will be adding more... but I'm tired XD So yeah, if you have any questions, feel free to ask 'em here so I can add them here.