1. Why CSS?

CSS is very good language to use in combination with HTML. HTML for the standard webpage, and css for the nice colors in texts, links, hovers, etc..
You can make your layouts nicer, and more beautifully with CSS, so I would advice you to learn this after you learnt HTML.
Good luck!

2. Classes
With CSS you'll use classes , for example: You want only headers to be any color; take red for example. Then you can create a class with as propperties: color: red;
Then you only have to attach that class to the header text, so it knows that class propperties belongs to that specially header text. Ok, I'll give you an example.



this will make a class called : "red", you can declare a class as you see as follow:



oke, with the class "red' we had as propperties: "color: red;", this tells the explorer: the text from this class must be in a red color. Now we can give this class to any text, in any tag.



you see, we added "class='red'" to the tags , so now everything between that tag will have the propperties of the class called 'red'. You can also give a tag propperties, so that tag will ALWAYS have those css properties. An example:



Now all <p> tags will be using this class. Oke, lets add some more propperties to the class.



Color declares the color of the "P"(<p>) tag, weight declares if it should be bold/italig/normal, and font-size : font size, font-family declares what font should be used.
Not so hard huh?

3. ID's

You can also make an ID instead of a class. It works the same, but then with a # at the begin to declare it's an ID instead of . , example:



now you can attach it to any tag:



But we can also use it in combination. We'll make a class with different ID's INSIDE it.



now we created 1 class with 2 ids, we can attach the id's: 1 and 2, only to any tag which contains also the class 'testclass'. Oke lets attach it to some text:



For <tagname> you can use any tags, <p> or whatever you'd like. Oke let's make a full css code!



4. Links

We can also add some propperties to links, like a mouseover effect. Let's first show the code and go trough it.



Lets start with the propperties on:
A:link
You see that for a like, there's always set "A:" for its self, with A:link { propperties } you define the propperties for EACH link (<a href="#">...</a>)
I added some propperties, I think they're easy to understand once you see them;

color = color for the text of the link;
font-size = amount, size of the text;
font-style = just normal, in this case;
font-weight = bold/normal/italic;
cursort = pointer/hand/etc. the cursor when you go over the link/click on it


A:visited
TYhis propperties inside this class will be used for all visited links(where the people already have clicked on, earlier).

A:Hover
This propperties inside this class will be used for when the user goes with his mous over the link (you can use it to change the text with mouse-over).




This was all, I hope you could understand it

If you have any questions, feel free to ask me!

Greetings,
Skyfe.

discuss this topic to forum