Using CSS, you can change the appearance of all of you pages by editing only one document! No more <font> tags everywhere! You can even define the position of boxes. (divs and spans)
There are 3 ways that you can use stylesheets to change the appearance of elements:
External Stylesheet - The most useful way, and the way that you can change the appearance of all of you pages, is by using an external stylesheet, then linking to it in all of you pages.
First you need to create an external stylesheet. Just make a new text document, and save it as like stylesheet.css or whatever. Now, you need to link to it in you pages. So, open up one of your pages, (probably index.html for now,) and put the following code in the <head> tag:
| <link rel=stylesheet href=stylesheet.css type=text/css> |
In order to change the appearance of stuff using CSS, you need to assign properties to selectors. A selector can be any HTML element, like <a>, <p>, <div>, <span>, <input>, <h2>, etc. A property is assigned to a selector to change its style or appearance. Now here's the syntax:
| selector {property: value;} |
As you can see the properties are enclosed in brackets, and there is a semicolon (;) at the end of each property definition. Spaces and line breaks don't affect anything. In fact I suggest that you put many, many line breaks in your external and embedded stylesheets to make them easy to edit. You can have more than one property defined for each selector, like this:
|
selector { property: value; property2: value2; } |
Remember to put a semicolon at the end of each property definition. To learn all the properties, you should go here.
Embedding a Stylesheet - This is useful if you have a seperate document that you want to be different from the rest of you pages, or if you site is only one page. The syntax is the same as an external stylesheet, except for how you define the stylesheet. Your property definitions go in the head of your document (in between the <head></head> tags,) and inside some <style></style> tags that you need to make. Remember that embedded stylesheets only affect the document that you put them in, which is why they aren't as useful as External Stylesheets.
|
<html> <head><title>Your page's title</title> <style> selector { property: value; } selector { property2: value2; } </style> </head> <body> Your page's content. </body> </html> |
Inline Styles - I use these when i have like one line of text that i want to make bigger, I don' t know why I use it instead of HTML, I guess it's just a preference. I just like using CSS better since it's easier and the names are easier to remember. Here is the syntax:
| <HTMLELEMENT style="property: value; property2: value2;"> |
Here is a list of all the properties and really good definitions. The site linked to above also has tons of info on CSS in general.
More HTML and CSS: 
