My job has involved opportunities for some Web design, which helps to satisfy the drive to create. We have a separate team for interaction designers, and they are very talented in using cascading style sheets (CSS) to design their prototypes. When the CSS emphasis was established in the group (the user education team and the interaction design team are what you could call “sister teams”), I took some time to learn what CSS is about and see if I could harness it in developing some HTML tutorials as well as my online help systems.

I really became excited about CSS, and here’s why.

The Basic Idea behind CSS

Before I really started looking into it, I thought CSS was just those style declarations in the <head> of an HTML page. Really, it has to do with any tags that dictate appearance. The basic idea of CSS is to separate the visual aspect of HTML from the content. When you design a Web page with a table, you have the layout intertwined with the content. If you set out your styles in every paragraph tag, you have the same problem. You have to copy that code from one page to another to keep the same appearance.

With CSS, the best practice is to link to an external stylesheet, which is just a text file with a .css file extension. The stylesheet sets out all your layout and appearance, and the HTML document contains just the content. When the page loads, the browser looks at the CSS file and applies the styles to your content in the way that you have set out.

When you use a stylesheet, you can radically change the appearance of a Web page (and your entire site) just by changing the stylesheet. You never have to change the HTML files except if you need to apply classes differently. If you want to make a change, you change one file, and that change is applied to all pages that link to that stylesheet. The need for templates disappears in many cases.

CSS Is Learner-Friendly

One of the advantages to CSS is the short time it takes to learn the basics. A stylesheet looks the same as the way styles are declared in <head> tags. If you’re already familiar with the way HTML inline styles work, you can quickly translate them into CSS. If you have an inline style like this:

<p style=”color: #000000; font-family: Arial; line-height: 130%; margin-left: 10px; border-bottom: 1px solid #000000;”>

…it becomes a class called, let’s say, “info,” in the stylesheet:

p.info {
color: #000000;
font-family: Arial;
line-height: 130%;
margin-left: 10px;
border-bottom: 1px solid #000000;
}

If you declared these styles in this format in the <head> of your Web page, they can simply be moved to a stylesheet.

Your lengthy <p> tag would be replaced with:

<p class=”info”>

Then you link to the stylesheet with a line in the HTML <head> so that your Web page can find the class you used:

<link ref=”path/to/stylesheet.css” rel=”stylesheet”>

CSS Is Efficient

This is likely the strongest argument in favor of using CSS-driven pages. As mentioned above, you have a link to your stylesheet in the HTML page instead of all those styles. Before, for each paragraph that you wanted to have the attributes shown above, you would have to declare them in each <p> tag. With CSS, you declare all the styles once, and then you identify the class in the places in your document where you want the text to look that way. You can even declare all <p> text to look a certain way, and then you don’t need a class, because the <p> styles act as a “normal” style.

Now that all those cumbersome inline styles are stripped out of your HTML page, its file size becomes much smaller. This means faster load time. In addition, when you are editing the content of your pages, you don’t have to wade through line after line of tags. As mentioned, you make style changes in one place, and they automatically apply to all pages linked to that stylesheet.

CSS provides the ability to lay out your pages with divs, or containers. A simple <div> tag is much cleaner than <table>, <tr>, and <td> tags. One HTML table proliferates tags like rabbits. (The CSS-lover’s guideline for tables is to reserve them for displaying tabular data only. Even then, some table attributes can be declared using stylesheets.)

CSS Is Fun

Part of the kick I get out of Web design is making tweaks to code and seeing how those changes affect the look of my pages. A few quick changes can drastically alter the look and feel of your site. CSS accelerates that process. I can start from a blank text file and in the matter of perhaps an hour have a page that, for all intents and purposes, looks the way I want. I make a change to the stylesheet, click Refresh in my browser, and see the changes just like that. I see things come together more quickly than when working on inline styles, and that brings more satisfaction.

CSS Resources

Here are a few sites I have come across in my learning process. There are plenty of others out there on the Web; just Google “CSS” and the thing you’re trying to accomplish with CSS, and you’ll find something.

  • Wide Web Consortium (W3C): Information about CSS and links to dozens of resources.
  • CSS Zen Garden: A CSS showcase. Browse through versions of the page that are worlds apart—just because of different stylesheets.
  • CSS Layout Techniques: Explanations and demonstrations of CSS layouts.
  • A List Apart: I’m not sure what the title means, but this site has useful articles about CSS use.

As you may expect, this site is an example of CSS use. I chose a WordPress theme (Compass-1.0) that had the general layout I wanted, and then I completely changed the look and feel. You may amaze yourself with what you can do with CSS.

Despite the fact that CSS has been around for some years (with level one having come out in 1996), it has not taken the world by storm. Once you get to know CSS, you may wonder why that’s the case. And you may wonder how you ever got along without it.

No related posts.