Getting classy with CSS

Berglund Authority Level 4

Part One: The need for improved typography
Part Two: What the research says about typographical improvements
Part Three: Typographical Control via Cascading Style Sheets
Part Four: Implementing Typographic controls in Dreamweaver
Part Five: Getting classy with CSS

by Michael Geraci

For this bonus installment of our current series on improved Web typography via CSS -- for those of you keeping track: yes, there was only supposed to be four parts -- I want to introduce two slightly advanced techniques that will round out the discussion at hand. The first topic is the centralization of styles in an external file to which all your pages can reference. The second is the use of CSS classes to apply styles in an ad hoc fashion.

Centralizing styles

It's a common and preferred practice to store your style rules in an external file. The benefits are simple and substantial: an external file can be referenced by any number of pages in your site, and it is entirely possible that more than one of your Web sites can reference this file. The result is that all minor and/or major changes in style rules (for example, say you want to change the font used for all your body text) will instantly affect all the pages that refer to that rule. Consider the alternative, where you would have to edit the embedded CSS rules inside each and every HTML page. This is inconvenient in a small site and just plain maddening in a medium to large site.

You might be thinking, "What if I want to make a specific style change in a single file? Do I have to forego this great convenience?" The answer here is "no" because CSS rules have a specific precedence that says, in simple terms, when two rules are in conflict, the most local rule wins. In other words, rules embedded in the <head> of your HTML file override conflicting rules stored in an external style sheet, thereby allowing for page-specific modifications. The pecking order is so specific that when two rules from the same source (e.g., the embedded CSS) are in conflict, the last rule wins.

Going external with your CSS is a simple process:

Cut all of your style rules from the head of your document. Do not copy the <style> and </style> tags.
Open a new plain text file or in Dreamweaver, choose File -> New… and select CSS from the Basic Page column in the New Document dialogue box.
Paste all your rules in this file and save it as a .css file, e.g. typography.css, in the same directory as your HTML files that will refer to it.
In your existing and new HTML files, type the following code into the <head> of your document:

where "filename" is whatever you actually named the file. See figure 1 for an example of this link following some embedded style rules.

The link to the external css file

Faithful servant that it is, Dreamweaver will enter the appropriate code for you. Just go to the CSS Panel and click the "Attach Style Sheet" button at the bottom of the panel. The button looks like a chain link (see figure 2). A dialogue box will open that allows you to enter the name of the CSS file or browse to it using a standard "Choose" dialogue.

The Attach Style Sheet button in Dreamweaver

From this point forward, you can open the external file in Dreamweaver or a text editor and add, edit, and otherwise manage your styles.

It is a common practice among Web developers to create multiple external style sheets. You might have one just for text styles, one for table formatting, one for page layout, and yet another for media in your pages. You can link to as many files as you want using the above methods.

Have some class

Until now, we've been defining styles for specific elements in our pages by applying rules to selectors like p, h1, body, etc., but what if we wanted to create a generic style treatment that could be applied to individual letters, words, sentences, or entire sections? The solution is to create a "class" which can be applied to any elements in the page. For example, highlighting certain passages by setting the text in a different color? In fact, I've been using a class definition throughout this series to set code samples in a mono-spaced, and green font; like this text right here.

Using CSS classes is a two-part process. First you define the class in your style sheet, and then you apply the class to the parts of your document where you want to use it. To define the class, just come up with a logical name for it, precede it with a period, and then add the style declarations, for example:

.code {font-family: Courier, Monaco, mono;
       color: #006633;
       font-size: 12px;
      }

.highlight {background-color: #FFFF66}

.bordered {border-style: dashed;
           border-color: #000;
           border-width: 1px;
           }

All three of the above classes can be applied to any text and the last one, .bordered, can work with other elements like tables, and images.
Applying the class is a simple matter of adding a class property to the appropriate tag in your page. To apply the above .highlight style to an entire paragraph, I would type class="bordered" inside the paragraphs opening <p> tag, like:

<p class="bordered">This paragraph has a border around it when viewed in a Web browser.</p>

Notice that the period is not included in the value for the class property, that convention is only for the selector in the style sheet.

To apply a class to a sub-section of text, wrap the text in a <span> tag that allows for a style to be applied to a "span" of text. For example:

<p>Here's some regular text, but <span class="bordered">this text has a border around it,</span> pretty cool, huh?</p>

If you've got the class defined in your style sheet (embedded or linked, it doesn't matter) the class will show up in the Style menu of the Property panel in Dreamweaver. You can select any text in the file and apply the style with ease.

The class can be applied to as many items as you wish, but each item can only have one class applied to it, so if you want to apply the styles of multiple classes to a single item, you have to create a class that combines all the rules into one definition, like .highlightedBorderedCode, (ouch!).

Moving on

It's been a good run, but all things must come to an end. In my next post I'll reflect on a recent experience I had implementing a Wiki as a collaboration tool in an undergraduate project design course.

Getting classy with CSS

May-June 2007

Volume 7, Issue 3

Feature

Technology

Health

Legal

Gaming

Security

Digital Hygiene

Book and Site Review

Book and Site Review

Editorial