|
Written by: James Gregory
Source: Shipyard
Skill Level: Novice
Let's get started
So, the way this works is that you form descriptions of sets of formatting directives (called a CSS classes) and refer to those bundles of formatting information throughout your HTML.
Common practice is to put all your CSS class definitions into a single, separate file, so you can use the same formatting on all the pages in your site (by referring to that file on every page).
Let's leap straight into an example. Let's say that you had a site where it was vitally important that there was a section in the middle of the page that had red text on a yellow background. This is a perfect job for CSS. You start out by defining a class for your "main content". Let's call it ".main_content" (naming classes like that is largely a convention, though it isn't the only way to do it). Your class would look something like this:
.main_content {
color: red;
background: yellow;
}
Now, when you're assembling your page, you just need to refer to that class and the formatting will be applied automatically. Odds are you'll be using some kind of table, so your code will look something like this:
<table>
<tr>
<td class="main_content">This is the content</td>
</tr>
</table>
Observe the part highlighted in red -- that's the part that tells your browser to use your CSS class. That will render something like this:
Now, those are pretty shocking colours. Imagine it turns out a few hours before the site goes like you are informed that your client is colour-blind. Suddenly all of these hideous colours make sense, and it occurs to you that you can change them to something less awful and your client will never know. Without CSS you'd be looking at making modifications to every page on the site.
No-one wants to do that, and you can't afford it hours before a launch. With CSS it's easy. All you have to do is edit your CSS file. Very quickly you end up with something that looks like this (and equally quickly it will be evident that I am not a graphic designer :)):
Here's the CSS used in that example:
.main_content {
color: white;
background: #1e90c7;
border: #dddddd solid 1px;
font-family: serif;
font-size: 14px;
font-weight: bold;
padding: 10px;
}
I've not gone into detail on what each of those lines does since this much of it seems reasonably intuitive to me. The important things to note are that each line needs to end in a semi-colon and that you need to remember to close the { with a matching }.
The W3C has a reasonably straightforward chart of all the CSS formatting directives. It's a good place to look when you're trying to find how to do something more "colourful" than just changing fonts and colours.
Contents
++ Back to top ++
|
