An external style sheet file is simply a text file listing styles and, in some cases, html tags and their properties. (Click for larger image).

When it's time to design or redesign your shop site consider the benefits that CSS styling can bring to your online business. CSS lets you develop your site faster, update it more easily and offer a more accessible site to your visitors. While CSS involves a change from the rigid coding of HTML, it's not difficult to implement and most editing programs support it. In this column I'll explain what CSS is and how it can benefit you.

What Is CSS?

CSS is an acronym for Cascading Style Sheets. You use them to format everything from a single piece of text to an entire Web site. One of the benefits of using CSS is that it separates the Web site design and formatting from the actual page content.

If that sounds a little confusing, consider a simple piece of HTML code required to format a piece of text to a red color and Verdana font (below and again in Figure 1):

<style>
.redtext {color: #CE2029; font-family: verdana;}
</style>

<p class="redtext">
Text here would be fire engine red and Verdana font.
</p>

<p>
Text here would be the browser's default color and font.
</p>

While the CSS solution takes a little more work to set up, it is ultimately a simpler solution because you design the look of your text (the style) in one place - typically an external style file - and then refer to that style whenever you want to use it.

Figure 1. (Click for larger image).

CSS also responds well to change so, when you decide that you want to use purple text instead of red, you change only the style description. The text on every page of your site that refers to the style sheet document will change color appropriately.

The Benefits of CSS

You can begin to reap the benefits of using CSS from the day you start designing or redesigning your Web site. By separating the formatting from content you can create a single style sheet to control the look of your entire site. You save coding time by referring to a style name to change your text, and that style could apply a series of formats all in one step.

CSS also makes it easier for more than one person to work on a site, as you simply need to tell someone the name of the style to use for each element and they can code the site using the styles and without having to apply multiple formats to each element.

Changes are easy to make by changing the style itself and the change then appears the next time a page loads - in fact you can effect a change on hundreds of pages without editing anything more than one or two lines in the style file.

In short, CSS should significantly reduce the amount of time it takes to develop a Web site and to change its look in the future.

Other benefits of using CSS styling include faster page loading. When you use a single style sheet file to control the look of your Web site the style sheet style will be loaded along with the first page that a visitor views from your site. Then the style sheet will already be in your visitor's browser cache and will not need to be loaded again as the visitor browses your site. This can speed up the delivery of your Web site.

CSS also can aid you in making your site more accessible as it is easier for browsers that are speech enabled as it is easier to understand and deliver a CSS styled site than one which is comprised of a number of tables, for example. The avoidance of tables is another advantage of using CSS as you can layout a page using styles and without needing to resort to using tables as containers for your content.

CSS can also help you make your web pages more search engine friendly because you can locate the page content closer toward the beginning of the web page file than would be possible, for example, if you were using table layout and HTML.

Design tools like Dreamweaver make it easy to format pages using CSS styles. (Click for larger image).

It is also possible to have multiple CSS style sheets for a site and to use them for different purposes. You use these to style the page according to the needs of the viewer. So you could, for example, have a style sheet which displays the page on a regular screen, one which styles it for printing and another that manages it for display on hand held devices. The actual page content would be the same for each use and only the style sheet will be different. This allows you to serve up one page to three different uses or audiences and not have to code each separately.

Should You Make the Switch to CSS?

In the absence of any other reason to update a Web site it won't generally make sense to change an existing Web site from HTML to CSS. However, it should be a consideration in any new Web site and in any makeover of your site.

In addition, if you regularly add new content to your site, it is possible to implement CSS on a staggered basis. In this way you would create a style sheet that reflects the look of your existing Web site but that formats it using CSS styles instead of HTML. This will make coding new content easier.

The next time you next plan to upgrade your site, consider the benefits that CSS can offer.

Helen Bradley is a respected international journalist writing regularly for small business and computer publications in the USA, Canada, South Africa, UK and Australia. You can learn more about her at her Web site, HelenBradley.com