Design Web pages with class

Make style sheets work harder, so you don't have to

If you're using style sheets -- but not classes -- to format your HTML documents, you're not tapping the full power you can to craft your designs efficiently. Find out two ways to use classes with style sheets to make quick work of designing (or redesigning) your HTML documents. A practical guide, with example scripts.

Molly Holzschlag, Author, Instructor, and Web designer

An author, instructor, and designer, Molly E. Holzschlag brings her irrepressible enthusiasm to books, classrooms, training centers, and Web sites. Honored as one of the Top 25 Most Influential Women on the Web, Molly has spent an almost unprecedented decade working in the online world. She has written and contributed to more than ten books about the Internet and, in particular, the Web. She holds a B.A. in communications and writing, and a M.A. in Media Studies from the New School for Social Research. You can find out more about Molly's activities on her Web site.



01 September 1999

Also available in Chinese

Want to gain control over the nuances of your Web-page design without a lot of painstaking hand coding? Then start using classes with your HTML style sheets.

Cascading Style Sheets (CSS) have become a popular HTML tool since their incorporation into HTML 4.0. Yet -- as I discovered at a recent Web developer meeting -- many professionals in the field don't flex their style muscles and take advantage of the extra power that classes can add to style sheets.

Recapping style sheets

In styled HTML documents, a style sheet in the head of the document (or in a separate linked external style sheet) spells out how the browser should display tagged elements.

HTML sample showing a simple style sheet that sets body background color, H1 head format, and paragraph format
<html>
<head>
<title>Example of Style Sans Classes</title>
<style>

BODY 	{
	background-color : #FFFFFF;
}

H1	{
	font-size : 14pt;
	font-family : Garamond, Times, Serif;
	font-weight : bold;
	color : #990033;
}

P	{
	font-size : 11pt;
	font-family : Arial, Helvetica, Sans-Serif;
}


</style>
</head>
</html>
Web page showing two styled elements, as defined in the HTML sample above
Web page showing two styled elements, as defined in the HTML sample above

With style sheets you can also control elements of formatting that plain old HTML formatting can't control. As you may know, style sheets work by assigning rules to selectors, the names for your styles. The style sheet attaches properties (attributes that you can control) and values (your choices for the attributes) to the style selectors. Together the selectors and their definitions work as set of rules that govern the presentation of any associated HTML documents. You can assign styles to elements as a group or individually. When a style-capable browser program interprets the page, it matches the rules in the style sheet with the styled elements in your HTML code to display the page. (For tips on handling visitors with browsers that can't interpret styles, see Backward compatibility.)


Understanding classes

You can take mastery of style sheets to the next level by defining classes for different categories of the elements of your Web pages and applying different styles to them. For instance, in lists, you might want to create variations on the list-item style for the first and last items to control the spacing between the list and surrounding text. You could also format sidebar text paragraphs to stand apart from body paragraph text.

Essentially, when you use classes, you have a way to create custom tags that you can add to page elements, where you like and when you like. Instead of the single P tag for designating text paragraphs, you can devise variants for paragraphs that indent, paragraphs that fall directly after heads and therefore don't indent, tip paragraphs with demibold text boxed within a cyan background, author-bio paragraphs in italics with a contrasting font, and so on.

There are two methods for adding classes to a page. You can define them to work with one specific HTML tag, or you can apply them individually, anywhere, to any element in your document. (For suggestions, see Classy Tips.) This article distinguishes the two ways to use classes by calling the "anywhere" type custom classes and the type associated with a single tag tag classes. Because the tag-class usage is more common, that's a good place to begin.

Classy tips


When working with classes in your style sheets, keep these tips in mind:

  • You can use class in linked or embedded sheets.
  • Class names (selectors) can include numbers, letters, underscores, and dashes.
  • Keep class names simple and descriptive.
  • Avoid spaces or extraneous characters such as a percent or dollar sign.
  • You can have as many classes in a style sheet as you feel necessary to achieve your style goals.

Using classes with specific HTML tags To create tag-class styles to use with a specific HTML element, begin by planning a scheme of tags and their related style variations. Then, name the classes you need and define the styles for those classes. Finally, apply them as you create content for your site. Of course, you can change the styles whenever necessary to modify design without re-coding individual paragraphs.

Let's say I need a variety of paragraph styles. I associate all the classes with the P tag. So the selector for the style starts with the HTML tag and is followed by an extension that describes the style. For paragraph classes you might want p.first, p.tip, p.bio, p.intro, and p.sidebar. The extension after the dot names the class; the tag before the dot specifies which tag is associated with the class. In this case, because of the leading P, each class can be used only with the paragraph tag.

Because classes work most efficiently when they apply to multiple pages or even across entire complex sites, it pays to take the time to figure out what special formats you need and what HTML tags they match up with. You can add another style format later, but that may cause ripples throughout your design. The upfront planning and testing ultimately save time.

Name the classes briefly and clearly, so you don't need to key in any unnecessary characters, yet you can always immediately select the right classes as you prepare your HTML.


Defining class selector properties

Once you have your selector names and an idea of what you want each to look like, you define them in a style sheet.

  1. In the style section of an HTML document, type the name of the class, a space, and an opening curly bracket ({) to begin the definition.
  2. Define as many properties for the class as you like, using the form property:value; separate property definitions with semicolons.
  3. End the class definition with a closing curly bracket (}).
<style>

BODY 	{
	background-color : #FFFFFF;
}

H1.maroon	{
	font-size : 14pt;
	font-family : Garamond, Times, Serif;
	font-weight : bold;
	color : #990033;
}

H1.dkblue	{
	font-size : 14pt;
	font-family : Garamond, Times, Serif;
	font-weight : bold;
	color : #330066;
}

P.body	{
	font-size : 11pt;
	font-family : Arial, Helvetica, Sans-Serif;
}

P.foot	{
	font-size : 9pt;
	font-family : Arial, Helvetica, Sans-Serif;
}
</style>

Using class styles globally

What if you want to have a style that you can apply to different tags? The answer is to create a class -- without an associated tag. You then flexibly apply the custom class to any available HTML element.

The advantage of using classes globally is that instead of having to marry a given class to that selector, you can simply create a class with a style. Then you add that class to the HTML element of your choice: paragraph, head, link, and so on.

.12pointsans  {
font-family: helvetica, arial, sans-serif; 
font-size: 12pt;
line-height: 12pt;
}

Applying classes

When you want to apply either a tag-class or custom-class style to an element of your Web page, you just add the CLASS property after the element's tag, and use the appropriate class name as the value. For example, < P class="tip"> formats the paragraph with the Tip class style. Note that with tag-class selectors, you can add them only to the tag for which you defined the class. You can add custom classes, on the other hand, to any HTML tag that makes sense to you. For example, use < p class="12pointsans"> and < h1 class="12pointsans"> to apply the custom class to different elements. The dot is not part of the name you include as the class value.

Tip: When you add a tag-class selector as a value to a tag, do not use the dot. Use the form TAG class=classname, as in P class=tip.


Using class power: an example

The true strength of class lies in the fact that it expands your options for any given HTML element. This examples illustrates the flexibility of custom classes. Let's say you'd like to use several different styles and colors of links on a page. Using class, you can easily customize the way each link looks. What's more, you'll never have to stare at your style sheet and figure out which link selector goes with which style.

What if you find you need five types of links on your pages? You might have sidebars throughout your site that use a cyan background, and you want to have your links contrast well with the sidebar background. There's also a navigation bar running along the top of your page with a black background; links there need a different look. Links within your body text should mesh well with the text, naturally. And then there are off-site links that you want to distinguish to help your audience know which links keep them within your realm and which ones take them to points beyond. Finally, you might have footer links to information such as copyright, privacy policy, and so forth -- links that are important but can be less obvious than other links on the page.

Now let's look at how you might set up the class selectors, the associated class style definitions, the HTML page, and the resulting Web-displayed page.

Classes for the five link styles and their style definitions
Class selector nameFaceSizeColorWeightStyleDecoration
sidebarlinkGaramond, Times, Serif11pt#FFFFCCBoldNormalNone
.navlinkGaramond, Times, Serif11pt#FFFFFFNormalNormalNone
.bodylinkArial,Helvetica, Sans-serif12pt#339999NormalNormalUnderline
.offsitelinkArial,Helvetica, Sans-serif12pt#339999NormalItalicUnderline
.footerlinkGaramond, Times, Serif10pt#339999NormalNormalNone
Definitions of the class styles
<STYLE>
.sidebarlink {
	font-family : Garamond, Times, Serif;
	font-weight : bold;
	font-style : normal;
	font-size : 11pt;
	color : #FFFFCC;
	text-decoration : none;
}

.navlink {
	font-family : Garamond, Times, Serif;
	font-weight : normal;
	font-style : normal;
	font-size : 11pt;
	color : #FFFFFF;
	text-decoration : none;
}

.bodylink {
	font-family : Arial, Helvetica, Sans-serif;
	font-weight : normal;
	font-style : normal;
	font-size : 12pt;
	color : #339999;
	text-decoration : underline;
}

.offsitelink {
	font-family : Arial, Helvetica, Sans-serif;
	font-weight : normal;
	font-style : italic;
	font-size : 12pt;
	color : #339999;
	text-decoration : underline;
}

.footerlink {
	font-family : Garamond, Times, Serif;
	font-weight : normal;
	font-style : italic;
	font-size : 10pt;
	color : #339999;
	text-decoration : none;
}
</STYLE>
HTML sample to generate a page (note the use of the custom class styles for the links)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
	<title>Class power with global classes</title>
	<STYLE>

.bold  {
	font-family: arial, helvetica, sans-serif; 
	font-size: 14pt;
	font-weight: bold;
}
	
.12pointsans {
	font-family: arial, helvetica, sans-serif; 
	font-size: 12pt;
	line-height: 12pt;
}

.sidebarlink {
	font-family : Garamond, Times, Serif;
	font-weight : bold;
	font-style : normal;
	font-size : 11pt;
	color : #FFFFCC;
	text-decoration : none;
}

.navlink  {
	font-family : Garamond, Times, Serif;
	font-weight : normal;
	font-style : normal;
	font-size : 11pt;
	color : #FFFFFF;
	text-decoration : none;
}

.bodylink  {
	font-family : Arial, Helvetica, Sans-serif;
	font-weight : normal;
	font-style : normal;
	font-size : 12pt;
	color : #339999;
	text-decoration : underline;
}

.offsitelink  {
	font-family : Arial, Helvetica, Sans-serif;
	font-weight : normal;
	font-style : italic;
	font-size : 12pt;
	color : #339999;
	text-decoration : underline;
}

.footerlink  {
	font-family : Garamond, Times, Serif;
	font-weight : normal;
	font-style : italic;
	font-size : 10pt;
	color : #339999;
	text-decoration : none;
	text-align : center;
}
</STYLE>
</head>

<body>

<div align="center">
<table border="0" width="585" cellpadding="5" cellspacing="5">
<tr><td width="585" valign="top" align="left" bgcolor="#000000" 
colspan="2">
<a href="new.html" class="nav">What's New</a>
<a href="features.html" class="navlink">Features</a> 
<a href="columns.html" class="navlink">Columns</a> 
<a href="forums.html" class="navlink">Forums</a> 
<a href="chats.html" class="navlink">Chats</a> 
<a href="products.html" class="navlink">Products</a>  
<a href="about.html" class="navlink">About Us</a> 
<a href="contact.html" class="navlink">Contact</a> 
</td></tr>

<tr><td width="365" valign="top" align="left">
<h1 class="bold">Welcome!</h1>

<p class="12pointsans">
This page demonstrates the use of Cascading Style Sheet (CSS) classes. 
Specifically, we're examining custom classes. The links running along 
the top of the page were created using the .navlink class. The links 
to the right, in the sidebar, get their presentation features from 
the .sidebarlink class.</p>

<p class="12pointsans">
In the body, there are two class links. The first class link, 
.offsitelink, helps us link to pages that are 
<a href="http://www.molly.com/" class="offsitelink">outside 
of the site</a>. The second class link, .bodylink, is a 
standard body text link that links only to pages 
<a href="classy.html" class="bodylink">within this site</a>. 
The body text itself is created with the .12pointsans custom class. 
And, the header uses the .bold custom class to gain its features.</p>

<p class="12pointsans">
Finally, the links running along the bottom of the page have been 
created with the .footerlink class. These smaller links are 
important, but not as critical as the other links appearing on this
page.</p>
</td>
<td>
<div class="footerlink">
<a href="privacy.html" class="footerlink">privacy policy</a> *
<a href="copyright.html" class="footerlink">copyright info</a>
</div>
</td>

<td width="210" valign="top" align="left" bgcolor="#339999">

<h1 class="bold">Links of Interest</h1>
<a href="http://www.molly.com/"
class="sidebarlink">molly.com</a><br>
<a href="http://www.w3.org/"
class="sidebarlink">W3C</a><br>
<a href="http://www.webreview.com/"
class="sidebarlink">WebReview</a><br>
<a href="http://www.ibm.com/developer/web/"
class="sidebarlink">developerWorks</a>
</td>
</table>
</div>

</body>
</html>
Resulting sample Web page
Resulting sample Web page

Backward compatibility

Keeping styles backward compatible can be a problem -- particularly if you're using complex style with class variants. While you could never have created the link style options in the sample Web page with standard HTML alone, the downside is that styles might cause problems for visitors to your site who lack a style-compliant browser.

Some approaches allow you to get the best of both worlds: using the best technology while serving as many users as possible. Here are a few ways to ensure that your visitors will see a site that's comprehensible:

  • Know your audience. Review server logs and statistics regularly to see who visits your site and what browsers they use. Base design choices on the site your visitors need, not on your own tastes. With statistics in hand, determine if most users have browsers that can accommodate your intended design. If so, you can move forward with confidence.
  • If you can't be sure that your target audience will be able to view your pages as you intend them, use simple style sheets and cover all of your bases by also including the font element. Then define your pages as transitional HTML 4.0 (add < !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > ) in the head section of the HTML.
  • Use a JavaScript detect-and-route script to divert users to pages designed for their browsers' ability to interpret styles. See Resources for an article that details how to write such a script or where to download one. Of course, this creates more work for you, because you need to create more duplicate sets of all your pages, but you provide your visitors with the best possible pages for their browsers.
  • Test your work -- and then test again. Too often we developers test hastily or skip over this step. Just because you know you've coded it right for your browser doesn't mean your site will look good to all users. Test your site with a variety of browsers, and on as many platforms as possible. Make adjustments based on your site testing.

Resources

Comments

developerWorks: Sign in

Required fields are indicated with an asterisk (*).


Need an IBM ID?
Forgot your IBM ID?


Forgot your password?
Change your password

By clicking Submit, you agree to the developerWorks terms of use.

 


The first time you sign into developerWorks, a profile is created for you. Information in your profile (your name, country/region, and company name) is displayed to the public and will accompany any content you post, unless you opt to hide your company name. You may update your IBM account at any time.

All information submitted is secure.

Choose your display name



The first time you sign in to developerWorks, a profile is created for you, so you need to choose a display name. Your display name accompanies the content you post on developerWorks.

Please choose a display name between 3-31 characters. Your display name must be unique in the developerWorks community and should not be your email address for privacy reasons.

Required fields are indicated with an asterisk (*).

(Must be between 3 – 31 characters.)

By clicking Submit, you agree to the developerWorks terms of use.

 


All information submitted is secure.

Dig deeper into Web development on developerWorks


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=1
Zone=Web development
ArticleID=11414
ArticleTitle=Design Web pages with class
publish-date=09011999