Styles Make Websites Healthy, Wealthy, and Wise

If you are not a web developer, you might not care how your site is built, only what the results look like. But you should care. Why? Because labor costs money and the harder your site is to build and maintain, the more it costs. Also, any visible errors that creep onto your site reflect badly on your business.

The Problem

Every web page consists of text and graphic elements. Examples of text elements are page titles, headings, and paragraphs. Graphic elements are images and shapes like lines and boxes.

Traditionally, each element on a web page contained markup that described how it should be displayed by a browser. For instance, the heading at the top of this article could be described like this:

<font face="Verdana" size="14pts" color="maroon">

Every element on every page would have similar markup to get the desired font, size, color, background color, spacing, etc.

Creating a website by marking up each element works, but it's also labor intensive, error prone, and difficult to maintain. Imagine an ordinary website of 15 pages, each averaging 15 elements. If you want to change all the headings to a dark blue and the paragraphs to a medium blue, 225 elements have to be examined and, if needed, changed. And, the larger and more complex the site, the more labor involved and the more opportunities for errors to creep in.

The Solution

Fortunately, the web has evolved enough so the manual markup method is no longer necessary. By using styles in a style sheet, each type of element and its description is listed only once, and all pages simply reference the style sheet to determine the look of its elements.

A style sheet to describe the headings and paragraphs in this article looks like this:

h1 { font-family: Verdana; font-size: 14pts; font-weight: bold; color: maroon; }

h2 { font-family: Verdana; font-size: 12pts; color: maroon; }

p  { font-family: Tahoma; font-size: 12 pts; color: grey; }

To change all the text to blue as above, only three changes need to be made: the word "maroon" would be replaced with "navyblue" in the first two lines and the "grey" color would be replace by "blue" in the third. Only three changes are made no matter if the site contains 30 elements or 30,000.

Healthy

With all elements reading from the same page, style sheets prevent inconsistencies and many errors. For example, you cannot accidentally have some paragraphs 12 points and others 11 points, making your business look sloppy. In addition, without all the markup cluttering the pages, your website is lean, clean, and fast.

Wealthy

Beyond making maintenance quicker and easier (translation: cheaper), the structure inherent in style sheets makes your site more accessible to disabled visitors. According to iCAN, people with disabilities have a discretionary income of more than $176 billion dollars. You don't want to miss out on business opportunities because millions of people find your site hard to use.

Wise

The web continues to evolve. Web standards have already moved away from font markup in favor of style sheets. New technologies, such as using XML to share web data and the display of web information on alternative devices like PDAs, are increasingly in popularity. All of these make using styles the smart choice to ensure the future functionality of your site.

Take Action

In spite of the many benefits, many web developers are not using style sheets. If you are curious about any site, click the right mouse button and choose View Source. (If you don't see this option, look for a View menu in your browser window and choose Source or Page Source.) Look for text that appears on the page and see if there are <font ...> tags nearby. If so, markup is being used, rather than style sheets.

If your site is using markup, plan now to incorporate style sheets into your next revision. The longer you delay, the more complicated your site will become, and the more work will be involved in the conversion. If you're starting a new site, make sure your web developer plans to incorporate the power and elegance of style sheets.