The Great ECN Brain Dump

guide for new student employees


A Very Brief Introduction to Cascading Style Sheets

What Are Style Sheets?

Cascading Style Sheets (CSS) are a powerful tool for formatting web pages. They allow control over ever element of the page from the size of your font to the placement of a menu bar. They can be used for any web page, from the simplest to the most advanced, and they greatly enhance your power to control the look of your web page.

Why Should I Use Style Sheets?

I'm assuming that you already know how to make web pages using HTML. Why would you want to use CSS to format your web pages instead of plain HTML? Imagine that you are creating a web page and you want to make a word red. To accomplish this using HTML, you would use the following code: <font color="red">red</font>

Now suppose that you want to make some text red and bigger. For that, you'd need to type: <font color="red" size="150%">red and bigger</font>

Want it to be bold as well? By now the code is getting pretty long: <font color="red" size="150%"><b>bold as well</b></font>

That's a lot of code, but it isn't that difficult to type. Suppose, though, that you wanted to make all of your paragraph headings on the entire page red, large, and bold. What if you wanted to apply that color scheme to the entir site? Now you're stuck typing out a long tag string every time you use a paragraph header, which could be dozens or even hundreds of times. This mess of tags is often referred to as "tag soup" by the web design community, and it is bad for several reasons. First, it takes a long time to type. Second, it clutters up your code and makes it more difficult to distinguish the page's content from its formatting. Third, the extra code increases the file size for your page, a fact that might not bother your broadband users, but it could inconvenience dialup users or users who view your content on mobile phones or PDAs. Fourth, if you want to change your site so that all of the paragraph headers are green and italic, you have to change every one of the tags by hand.

Style sheets solve all of these problems by allowing you to customize tags that you can repeat throughout your site. In a single document called the "style sheet," you can define what the various tags on your site will do. Then you can tell all of the pages on your site to reference that document. For example, you could use your style sheet to declare that the <h4> tags will cause the text they contain to be red, large, and bold. Now, instead of typing out the messy tag string that we used earlier, you can simply type <h4>paragraph header</h4>. This not only saves you time as you create the page, it saves you even more time every time you want to change the formatting of your headers. Simply edit the definition of h4 in the style sheet, and the change will instantly take effect througout the site.

As far as I'm concerned, the reasons I just described are good enough to start using style sheets, but it gets better! Style sheets allow formatting that is impossible using plain HTML. CSS allows you to format text in new ways, gives powerful control over tables, and provides tools for positioning images, blocks of text, or any other elements that you want.

So now that I've told you why you should use style sheets, am I going to tell you how to use them? Of course not! That would take months. Instead, I've linked to some great resources in the Links section. Also be sure to ask your coworkers if they know anything about style sheets. Some of them can probably give you a lot of help.