May 16 2008
Make CSS work the way you WANT it to work
CSS is definitely the wave of the future. Once a die-hard html coder, I LOVE CSS but I have to admit there are times when it makes me want to pull my hair out.
The thing to remember, I think, is to think of it as a complete coding language in and of itself, rather than just something to embellish the HTML pages. While it’s true that CSS cannot really do anything by itself, it is an extremely powerful tool and you have to really dig into it to make it work FOR you, instead of well…against you.
To begin, you have to know this:
SELECTOR { PROPERTY: VALUE }
That is the standard layout of a CSS statement. You can have multiple property:value statements within this single statement.
Let’s start at a very basic level and define the LARGE elements in our web page, such as the body, paragraphs and links.
Body: This defines, well, the body of the page. You can define many properties within this selector, such as the background color or image, margins, etc. etc. An example would be:
body {
background-color:#ffffff
}
That defines the body background as WHITE.
Paragraphs: This defines the larger sections of text within your web page. Here you can define the text size, color, weight, and more all in one location - MUCH easier than trying to code that information into HTML. An example:
p {
font-family:Tahoma;
font-size:12px;
}
That one is pretty self explanatory, I think.
Finally, LINKS: If you want your links to be anything except that BLUE, you’ll need to master this selector. NOTE: don’t go crazy here. Please like to know what they are getting into and that said, links really should be underlined unless there’s a super good reason not to.
a {
font-color:#ff0000;
font-decoration:underline;
font-weight:bold;
}
Now, this will give you links that are red, underlined and bold. NOTE: This only covers 1 STATE of links, the resting or regular state. We need to go one step further and define the HOVER state and the VISITED state.
a.hover
{
font-color:#ff6600;
font-decoration:underline;
font-weight:bold;
}
When on hover, the link will turn ORANGE.
a.visited
{
font-color:#000000;
font-decoration:underline;
font-weight:bold;
}
After the URL has been visited, it will turn BLACK.
That is a very basic beginning to CSS. Sign up for our UPDATES and we’ll notify you when we post more on the CSS tutorial series.
