CSS basics
CSS stands for Cascading Style Sheets. Don't worry about what it means; let's focus on what it DOES.
CSS allows you to tell a web browser what you want things to look like on your website, JUST ONCE, instead of having to define all your customizations over and over. For example, if you were creating links that were bold, red, and large, your HTML might look something like this:
<b><a href="link1.html" color="red" size="20px">link 1</a></b> <b><a href="link2.html" color="red" size="20px">link 2</a></b> <b><a href="link3.html" color="red" size="20px">link 3</a></b>
It's tedious and messy, and if you don't copy and paste exactly, you'll end up with a problem. Plus, what happens when you want to change your layout, but not your content? All that stuff will have to be changed to something else!
Fear not, young one, for CSS is your friend.
Simply add the following line of code to your HEAD tag.
<link href="style.css" rel="stylesheet" type="text/css">
This tells your browser to look for a file named style.css and to apply it to your website as a stylesheet. In other words, you can put all of your customized information into this style.css file, then simply tell your browser to fetch the information from there.
How is this useful?
Putting your information into an outside CSS file keeps your HTML cleaner and makes it easy to make changes to an entire website at once. As long as the whole site is linking to the CSS file (with the line of code above inside the head tag), the whole site will be styled by just one file!
getting information into style.css
Open up the program you use for writing HTML and save an empty file as style.css. Don't worry, it won't remain empty for long!
Now, remember that messy example from before?
<b><a href="link1.html" color="red" size="20px">link 1</a></b>
Let's enter that information into your style.css. It looks a bit different from normal HTML, so examine this example carefully.
a:link
{
font-weight: bold;
color: red;
size: 20px;
}
Going line by line, here's what it means.
a:link - This is what we are defining. The "a" tag, and the type is "link".
{ - Simply means that instructions start here.
font-weight: bold; - The "weight" of your font is bold.
color: red; - The color of your text is red.
size: 20px; - The size of your text is 20 pixels.
} - As you may have guessed, this means that instructions end here.
Punctuation is key!
BE SURE to include all punctuation as shown! It's not difficult, but it IS necessary.
- The curly braces { } enclose your set of instructions for each tag.
- The colon : comes after each element name (color, size, etc).
- The semicolon ; goes at the end of each line.
classes = more variety!
But wait, you say. What about sites with more than one link color? How's that done?
You can create multiple classes for a single tag. Say you were happy with the bold, red, and large links we created in the previous section, but you wanted to have some links that were italic and blue as well. Add this to your style.css file.
a:link.italicblue
{
font-style: italic;
color: blue;
}
By adding ".italicblue" to the end of "a:link", you have created a new class. Your new link will still be bold and 20px like the original "a:link", but it will be bold, italic, and blue instead of bold and red.
But you'll have to add a bit of extra information to your HTML file so the browser knows which links are supposed to be affected by the .italicblue class. It's simple!
<b><a href="link4.html" class="italicblue">link 4</a></b>
That's all there is to it!
What if I didn't want it bold?
The information from each "parent" tag (with no class) trickles down to the "child" tags - in programmer's terms, the "child" will "inherit" the information from its "parent". If the parent tag (a:link) has something you don't want the child tag (a:link.italicblue) to have, you must cancel it out. In this case, a simple "font-weight: normal;" will eliminate the bold.
more than just font colors
The example shown above is very simple. You can add custom definitions to any tag you can think of, allowing you complete control over sizes, colors, spacing, and much more.
The links below will give you tons of information on what you can style and how to do it. The first link is highly recommended; it's like the CSS1 bible.
And, of course, a great way to learn is to find a site that has things you like and take a peek at the stylesheet and the HTML to see what's going on. Never STEAL someone's formatting, of course, but don't be afraid to look, tinker, and learn. Everything I know about CSS and HTML was learned by playing with code and trying to understand how it worked.
If you like, here is THIS site's CSS file.
Clavis-sama.com stylesheet
Ignore all the "div#xxx" at the top; I am using CSS to create my layout (and that's an advanced topic I'd rather not get into here). Skip down to the stuff below that and you'll see that I've changed text colors and sizes, link colors and sizes, form colors and borders, and many other things. Feel free to play with it and see what happens.
And remember, I'm still learning myself; I'm no genius, so don't think that my CSS is the best. It's just an example that might be useful. ^_^;;
learn more
Cascading Style Sheets, level 1 @ w3.org
If you're a dork like me, you will print this out, have it bound, and use it as a reference book.
Cascading Style Sheets @ w3.org
The final word in CSS.
Eric Meyer: CSS
Some cool stuff. Advanced reading. ^_^