Why CSS?
CSS stands for Cascading Style Sheet. Doesn't mean much, does it? Basically
it's a page of code that changes the way your webpage looks. It can be
linked on multiple pages so that it can affect the look of your entire site.
It allows web developers to seperate their content from their layout and
apperance. This is a good thing as it allows for clean, easy to update code.
Coupled with a dynamic language like Microsoft's .NET or the open source
PHP, it becomes an incredibly powerful tool. But that's another tutorial.
What we are goign to address in this installment are a few reasons you
should take the time to learn CSS, how to embed it into your webpages, and
CSS's basic structure.
Why should I learn CSS?
Simple, to seperate your webpage's content from it's apperance. Why do you want to do this? Several reasons come to mind, clean code, easier updates, ability to change your layout on a whim, and many many others.
Here's an example. Lets say you have a page about... tacos. On your page, you have taco recipies, several hundred of them. You have taco recipies from all aroudn the world. You even have one that uses tofu instead of beef. And one for taco flavored ice cream. You decide that you want all the links in each of these hundreds of recipies to be green. Using HTML you have to go through each page and change the <a> tag. You may have to change close to 1000 links. Think of all the time you're wasting on changing links instead of hunting down that ChocCO recipe (chocolate taco).
If you were using CSS all you'd have to have done was add this little tidbit to you're stylesheet.a {
color: green;
}
Now, isn't that nicer?
How do I make it work?
So, now you know why. But what about the how? First let's go through linking to a stylesheet. This is done in the <head> section of your HTML document. It's quite simple. Just add this code.
<link rel="stylesheet" type="text/css" href="/mystylesheet.css">
Whats that?! Calm down. I'll tell you. <link> tells the browser we are
linking to something. Makes sense no? rel="stylesheet" tells it what we are
linking to. In this case a stylesheet. type="text/css" tells the browser
what type of stylesheet. Ours is a text based cascading stylesheet. And
lastly href="/mystylesheet.css" gives the browser the address of the
stylesheet. Easy as pie. Just pop that bad boy into the <head> section
of the pages you want affected and build your stylesheet.
What to put in my stylesheet?
Let's start you off on the basic structure of CSS shall we? We'll use the previous example, the one about the green link.a {
color: green;
}
a is the selector. A selector does just that, it selects elements
from the document to apply properties to. What's a property? Well in
this example color is. Each property has one or more values. In this
case green is the value. This example selects all <a> tags and applies
the color green to them. The punctuation in this example will be in every
one of your CSS 'blocks', but don't fret, it's the only puctuation you'll
ever need. {} brackets enclose the set of properties. The colon seperates
properties from it's value(s), and the semi colon ends a property. It's very
important to tack on that semi-colon, CSS isn't as forgiving as HTML. Your
code needs to be pretty much perfect or it isn't going to work they way you
want it to.
Simple, to seperate your webpage's content from it's apperance. Why do you want to do this? Several reasons come to mind, clean code, easier updates, ability to change your layout on a whim, and many many others.
Here's an example. Lets say you have a page about... tacos. On your page, you have taco recipies, several hundred of them. You have taco recipies from all aroudn the world. You even have one that uses tofu instead of beef. And one for taco flavored ice cream. You decide that you want all the links in each of these hundreds of recipies to be green. Using HTML you have to go through each page and change the <a> tag. You may have to change close to 1000 links. Think of all the time you're wasting on changing links instead of hunting down that ChocCO recipe (chocolate taco).
If you were using CSS all you'd have to have done was add this little tidbit to you're stylesheet.
How do I make it work?
So, now you know why. But what about the how? First let's go through linking to a stylesheet. This is done in the <head> section of your HTML document. It's quite simple. Just add this code.
What to put in my stylesheet?
Let's start you off on the basic structure of CSS shall we? We'll use the previous example, the one about the green link.
