[CSS] Fonts [TUT]

In this tutorial we will be learning something about fonts. First of all you probably want
to know what fonts means and is, a font is for example: Arial, Times New Roman and Verdana. You can
change a font in every writing program and also when you write comments to this tut
I cant really put a word to what it means, cause i dont know one... but i hope you get the meaning.

On your page the text is probably all the same font, so when you are done here you can make your text more
dynamic.

Lets get started, first of all lets see what we can do to the text.
We can change the:
* font-family
* font-style
* font-variant
* font-weight
* font-size

- First thing first lets change the font-family. It can look like this:

H1 {
font-family: arial, verdana, "times new roman";
}

The reason why we write three different fonts is because if the computer watching the page doesn't have the first font installed it will automaticly jump to the next in the line.

And the reason why we write "times new roman" and not just times new roman is because of the spaces between the words.

If you use some very special fonts it is recommended to inset a very common one like Arial down the list.
You can do this to any text you want, also the P and h2, h3, h4 and so on.

- Next thing, font-style.
There are multiple font styles: Normal, Italic and Oblique.
We will be using Italic, and you can change that yourself if you want to.

This is how its gonna look:

H1 {
font-family: arial, verdana, "times new roman";
font-style: italic;
}


- Font-Variant. Font variant is used to choose between: Normal, Small-caps. This determins if the text should be with upper-case letters writtin in small or just normal letters, that may sound confusing but when you try it, you will see it is not . And the code will look like this:

H1 {
font-family: arial, verdana, "times new roman";
font-style: italic;
font-variant: small-caps;
}


- Next thing is font-weight. font weight describes how bold / heavy the text is, you can choose between
bold or normal, and if you dont write anything it will choose default which is normal. So the code
looks like this:

H1 {
font-family: arial, verdana, "times new roman";
font-style: italic;
font-variant: small-caps;
font-weight: bold;
}

And if you dont know what bold is i will explain: Bold just fattens the text, plain and simple

- And the last thing is font-size. That basicly does what it says.
There are different units you can use, for example: px, cm, % and em. It is recommended to use the % and em cause that makes the user watching your site able to scale the text size up and down themself, and that is good if you dont see very well. I will still be using px but only cause this is a tutorial.
Now the code should look like this:


H1 {
font-family: arial, verdana, "times new roman";
font-style: italic;
font-variant: small-caps;
font-weight: bold;
font-size: 30px;
}


DONE! now you can go experiment with all this yourself!

Thats all for now. Hope you learned something in this third lesson of CSS.
I really hope you will either learn something and give good feedback or just comment on it