Cascading Style Sheets: An Introduction

Last week, I mentioned CSS -- cascading style sheets. CSS is an important tool for any web designer.

What does CSS do? It takes the place of clunky formatting attributes (and tags, in some cases) in (X)HTML.

Wouldn't it be easier to just keep the formatting in the HTML code? Not really, for multiple reasons. First, many old "staples" of HTML formatting are being deprecated. W3 Schools is an excellent resource for finding out which tags have been deprecated. Second, imagine that you have a website with 10 distinct pages and 5 different hyperlinks on each page. You want to make all hyperlinks bold and bright orange. Which would take less time: typing <b><font color="orange"><a href="link.html"> fifty times, or putting a { font-weight: bold; color: #FFA500 } in a separate CSS file and implementing it in each page?

Still not convinced? What happens if you want to change the formatting to italic fuchsia? If you use CSS, you only have to change the CSS in one place. With pure HTML, you would have to change the code fifty times.

Okay. So how do I use CSS? CSS is a collection of rules. A rule consists of two parts: the selector and the declaration. The selector identifies what elements are affected by the rule. The declaration tells the browser what formatting to apply to that element. W3 Schools comes to the rescue again, with an excellent CSS tutorial. Once you have created your CSS rules, save that file with a .css extension in the same folder as your HTML files. Then, in the head section of each page you want to apply the formatting to, use a link tag to call the stylesheet: <link rel="stylesheet" type="text/css" href="mystyle.css">

I only want to implement a particular CSS rule on one page. Is there any way to do that? Yes. Place the CSS code in a style tag inside the head section:
<style type="text/css">
h1 { color: blue; }
</style>

Obviously, there is much more to CSS than that, but that is the basics. The best way to learn it is to use it, so have fun experimenting!

Quote of the Week:
"Live today. Not yesterday. Not tomorrow. Just today. Inhabit your moments. Don't rent them out to tomorrow." --Betty Lou, Love, Stargirl