Notes from the Help Desk…

If you are a full-time web developer, you probably already use CSS (Cascading Style Sheets) to format and layout web pages. However, if your only design experience is creating and maintaining your company’s web site, you are probably still working with HTML. It’s time to think about changing.

CSS works with HTML to improve the appearance of your web pages. Styles can be applied to headings, images, tables, text, or any other object on a web page. If you work with styles in Microsoft Word, the concept is basically the same.

Do you remember what the Web was like back in 1994 when we were all amazed by the Louvre web site? (Remember the Mosaic browser?) Wow, we could actually see pictures on our computer that were in France! This was HTML 1.0 with no support for tables, so all Web pages were one column. Boring! Then tables came along, and all of a sudden, web pages could have more than one column, paving the way for more complicated layouts. A revolution! CSS represents another sea change in web design.

Many web pages still use tables to layout the content of the page within a complicated gridwork of table rows, columns and cells. Although it’s still possible to develop a nice looking page using HTML for layout, as well as for formatting, the result is often dense code that loads slowly and is very difficult to update.

Why Use CSS?

• You can have much more control over formatting with CSS. Have you ever struggled with spacing on a page using HTML? No problem with CSS’s margin and padding options. Have you ever needed to change the color of different links on a page because they appeared against different colored backgrounds? Simple with CSS. In fact, you will be surprised how many of the formatting and layout frustrations of HTML can be eliminated with CSS.
• Pages load faster with CSS because there is much less code. A style definition in the HEAD or in an external style sheet lets you control multiple examples of text on multiple pages and takes up much less space than gazillions of font and table tags.
• CSS lets you update your web site much more easily. Changes you make on your style sheet can affect many pages at the same time, obviating the need to manually reformat each page.
• Many cool web page effects can be created with CSS, especially using background images. While background images have been around for a while, with HTML, a background image automatically tiles horizontally across and vertically down the page, limiting the use of this tag to textured backgrounds or colors that fill a whole page. With CSS, you can decide whether and how it tiles. You can tell it not to repeat, allowing you to position a graphic behind text, or you can tell it to repeat only horizontally or only vertically. You will be surprised at how versatile this technique is!

So if you spend part of your time creating/maintaining/updating a web site, consider learning CSS and adding it to your web site. One of the best books on the subject is CSS: The Missing Manual by David Sawyer McFarland. It includes several tutorials that are fun, eye-opening examples of what CSS can do. (There is no CD with the book, but the practice files for the tutorial can be downloaded from the Web.)

Check out www.csszengarden.com for a amazing demonstration of how different CSS stylesheets can completely change the look of a web site with the same HTML code.  If you want to look under the hood, the HTML and CSS files are available for download.