Basic Notions of CSS

Intro

This is an introductory guide to CSS, please note that I'm writing this as if you don't know squat of it so if you're not a total beginner you can skip some parts. So first of all, what is CSS? CSS, or Cascading Style Sheets, is basically what defines the aesthetic properties of a page, the presentation. It covers anything from the alignment to the colors and background images and if you're doing any of that in HTML tags, then you're just doing it wrong. Since CSS is the presentation of a page it'll need something to present xD but the HTML tutorial is already made so we could take that and mess around with aesthetics. The page was like this before but it's very simple... let's complicate things a bit >D

CSS

First of all, still in the HTML document, add this to the <head> part of it:


This tells the browser to go get the presentation to the document "style.css", but that doesn't fall from the sky: now we have to create a page called "style.css" and write the CSS there. It's crucial that you save it ".css", though calling it "style.css" or "i_love_pie_me_roxors_teh_111.css" will serve you just the same, what matters is whether the name is identical or not. I'll call it "style.css" for the sake of this guide.
Note: The CSS can be directly inserted in the <head> section, I just find this method better for simplification reasons. If you want to do it the other way just insert the following code:
<style type="text/css"> CSS here! </style>
Now onto the actual coding: first of all you'll have to pick both font and background colors for the page so do this (note that we're now writing in the "style.css" page). I'll pick dark blue for the background and light blue for the text so good contrast can make the words easy to read:


Now you'll probably want to set a font and a size for your text aswel as a formatation (I'll set it to justified):


Note that you don't have to leave so much space between stuff, you could just write:
body{color:#0000FF;background-color:#000033;font-family:Verdana; font-size:11px;text-align:justify;}
I just think it's more organized this way. Anyway, next we're gonna pick up the stuff in the HTML and change their appearance with CSS... let's see we have headers, text, lists and tables. With the text we've srewed around enough with the font-color and font-size seeing this is just a "basic notions" guide. Let's head on to the headings and give them some basic effects, we'll set the h1 headings to be small caps and to have a higher spacing between the letters, much like I do in this site and the h3 to have a different font/background color and even a left-margin border:


The padding on the h3 is just so there's a bit of space between the border and the space. Let's mess a bit with the list now, there isn't much to do let's just take the bullets from behind each ul line:


About the lists there's really not much to do besides that xD you can replace the "none" in the list-style-type option for "circle" to have it in with a full circle or "square" to have it a full square. About the tables now, let's change the background and font color to something that matches the page's own background:


And just to end, I'll show you here how you can add that cool hover effect in your tables where the table rows change color when you hover them:


Well, hope this helped you in any way ^^. If you did everything okay, the page should look like this. Now compare it to this ;D