CSS Tutorial

Created by:
B-man93
Edited by:
B-man93

Introduction

This is a basic CSS tutorial for all newcomers to the web design scene. Remember, this is just an intro, so don't expect highly advanced items.

Links:

[*www.web-help.net Web-Help]

General syntax

Ok, let's look at this sample:

body { margin:5em; color:#ffffff; background-color:#000000
}

now, here is how it is laid out:
selector{ attribute:value;

so, let's look at a smaller piece of the code above

body {color:#ffffff;}

body is the selector, so the browser is acting on the body of the page.
color is the property of the body that is being edited.
#ffffff is the value of the property, in this case, it's the hex code for the property of the selector.

and it must be written like:

selector {property:value; property:value; property:value; }

you should be getting a general feel for the way it works.

Let's get started!

Basic Colors

Ok, now, let's define the basic color scheme.

body {
  margin:0em;
  color:#000000;
  background-color:#dddddd;
 
a {
  color:#000000;
  text-decoration:underline;
}
 
a:hover {
  color:#f00000;
  background-color:#eeeeee;
  text-decoration:none;
}

so, that would make the page a light grey, with black text. the links would be black, with an underline. when you hover above the link, it turns red, and the underline goes away.

Changing page layout

you can change how much space is in between the page and the border of the browser, the code for that is:

body {margin: 0px;

[[/code]]

This tutorial is still not complete, will be finished a little bit later