CSS 101
Learn the basics of CSS. First off, what is CSS? It stands for Cascading Style Sheets and we use it to apply a consistent style across multiple pages within your site. Now that we've got the definition of what CSS is out of the way, let's move on to how it actually looks in code.
The Code
Here's what the CSS code consists of:
selector {
property: value;
}
The selector is the HTML tag you want to apply a style to. Examples: div, td, and of course body.
The property is whatever style you want to apply and of course you have to define its value. Example: If you want to change the color to red, you type in color: #F00. We separate each property with a semi-colon (;). You can add as many properties in a selector as you want.
Here are some of the properties I frequently use: background, font, border, padding, and margin. There are a lot more properties but we're not going to discuss each one of them in this tutorial as we're only covering the basics of CSS.
Application
There are 3 ways of applying your styles to your site. The first one is by adding it in the HTML tag or inline. Here's an example:
<p style="color: #F00;">Hello world!</p>
It's simply adding the style attribute in the p tag or whatever HTML tag you want to add it to. I rarely use this as it only applies to just one page element.
The second one is embedding it by putting all the styles you have within the head part of your HTML document. Here's an example:
<html> <head> <title>CSS 101</title> <style type="text/css"> p { color: #F00; } </style> </head> <body> <p>Hello world!</p> </body> </html>
See what happened? The selector with its property is enclosed in the style tag and placed in the head part of the HTML document. So now, all the text inside the p tag will be red.
You can see how much easier this method is than the first one, however, I never use this because it only applies to one page of your site. Besides, there's a better way and we'll discuss it next.
The last way (my favorite) of applying styles to your site is by externally linking to your CSS. The first thing we need to do is to save all the styles in a file. Here's an example:
p { color: #F00; }
Let's name that one style.css. Now, we're just going to link it to your web page like this:
<html>
<head>
<title>CSS 101</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<p>Hello world!</p>
</body>
</html>
See the 4th line? That's how we link to external style sheets. Just change the underlined text to whatever you named your style sheet.
This will give you the same result as the second one but notice how much shorter this one is? It's more convenient too. So, if you want to change the style, you just have to modify style.css instead of changing it on each page.
Conclusion
This is just the basics of CSS to get you started. There are a lot more you can do with it so I advice you to learn as much as you can about it.
If you have any questions or if you want to discuss this tutorial, you may post at Blinding Light MB.