CSS

 The Basics

Now that we have had a look at how CSS works lets start writing some. Lets start by formatting some text. So type the following

 and the CSS

Now lets understand what's going on here, I have wrapped the text in a paragraph tag to keep it separate from other text on the page so that they wont get styled. we have set the font to arial and the font size to 16pt and then set the font colour to blue. Now try and change the values and have a play and see what your end result is.

Link Styling

Now that we know how style some text its time we learn how to style a link like this
 So lets have a look at how this is done

 and the CSS

So lets have a look at what's going on, the first thing we need to do is to make the link in HTML and set a class attribute. Next for the CSS we set up the link class, we set some font parameters and remove the text decoration which removes the default underlining.

Next we need to set up the hover and we do this by adding a hover rule in the CSS as stated above and when the user hovers over it the color will change as specified.

Nav Styling

lets have a look at how to style a nav, now I will cover a basic horizontal nav menu for now but I will be making a much more advanced one in the harder sections. 

So this is a very basic navigation menu now we will add some more to it but for now lets have a look at how this is done.

 and the CSS

so now that we have a basic nav lets add some hyperlinks into the nav and style them. So lets add the following HTML into the <li> tags.

 and add the CSS

now we a have a cool hover over effect.