CSS Primer: Accenting Your Writing

Now that we've mastered the art of borders and background colors (ok, maybe not mastered, but at least are familiar with them), we can look at how to style the fonts to do as we wish.

This was actually the area of CSS I had initially dealt with because I was trying to have different font colors in different areas of the page. I had a light background for the majority of my main content, but I wanted to use a dark background for my side menu bar. I quickly learned that I either had to have FONT tags everywhere, or I could learn a little CSS to achieve my desired look.

If we start with our continuing code from previous examples, and add following to the #header section of the CSS:

font-color: #FFFF66;

This will give us a header with a green background and yellow font.

However, if you put a link in that section of the HTML code, you will see that the link color has not changed. This is because font styles can be applied to almost any HTML element that can have data within it. Therefore, we'll be looking at much more than just DIV tags.

I know what you're thinking: But Greg, aren't the styles supposed to be cascading?

In this case, the link color is not a decendant of the font. Instead, it is a seperate entity. In order to change the color of the link, you'll need to include the following code in your CSS file:

a { color: #66FFFF }

This will give you cyan links throughout your page. But what if you only wanted them that color in your in your #leftcolumn DIV. Well, we can do that too!

#leftcolumn a { color: #66FFFF }

What this code is saying is that you want all link elements within an element with an ID of #leftcolumn to be cyan. If this is the only link style definition in your CSS, the rest of your links should keep their default blue color.

Link elements are also fun because they have four different statuses as well. You can define a different style for unvisited, visited, and active links, as well as for links you are hovering over. Instead of making this article any longer than it has to be, I'll refer you to the following CSS Link Tutorial to give you more details.

Now, what if you wanted to have a title on your page that was in a different font from the rest of your text to make it stick out? Well, we can do that too!

Let's assume that we want to use the H1 tag to indicate any titles on our page. We can then add the following code to make them stick out. In this case, we use the font-family style to change the font type:

h1 { font-family: courier, serif }

Now, you'll notice that I have listed more than one kind of font. This is because not all browsers support the same set of fonts. Therefore, we want to make sure we use web-safe fonts. You can always use any kind of font, but don't expect it to show up the same on everyone's computer. If the first font you specify isn't supported by their browser, then it will try the next one on the list. You can list as many fonts as you like, but should always list one of the web-safe fonts last, or your content will be displayed in the browser's default font.

Fonts are a very powerful way to accent your site and give it it's own flavor. And using CSS, you can truly customize them to your heart's desire. No longer are you restricted to the font styles in the BODY tag and FONT tags. Be free and let your letters run wild!