by Nicole Piland, VECTEC Web Developer

HTML has evolved over the years to using Cascading Style Sheets (CSS) to control websites’ presentation. If you haven’t worked with CSS, there are a number of advantages to doing so. Style sheets allow you to

• control font type, size and color
• create drop down menus that are search-engine friendly
• position elements without relying on tables
• create printer-friendly versions of your site without creating two sites

If you need convincing, take a quick look at the CSS Zen Garden website at http://www.csszengarden.com/. Be sure to click on the links in the right column to change the site’s presentation. Notice that none of the content changes, just the overall look and feel. In each design, the CSS is manipulated not the HTML.

Separating content from the site presentation uses less code and enables web pages to load faster. Style sheets also streamline site updates by allowing for site-wide changes rather than page-by-page updates.

Get Attached to Style Sheets

Styles can be included in several places—within the tag it is manipulating, within a page’s head tag, or as an attached document. As an attached document, styles used throughout the site are stored in a central location where they control the common elements for all pages.

To attach your style sheet, include the following code in the head of all pages:

<link rel=”stylesheet” type=”text/css” href=”style.css” media=”screen” />

Retire the Font Tag

CSS is increasingly replacing more cumbersome font tags because styles use less code and make site changes much easier. For example, to create text that appears bold, italic, Arial and blue requires a lot of code:

<font face="arial" color="003366"><b><i>Font tags</i></b></font>

Instead of repeating this code for each bold entry, the following style could be created that includes all font attributes.

b  {

font-weight: 600;
font-family: Arial, Helvetica, sans-serif;
color: #003366;
font-style: italic;

}

Now every time those <b></b> are used, this font style is displayed without any additional code. In the future, this style can be updated easily.

CSS can also be used to control font display to enhance readability. Check out ABC's site at http://abcnews.go.com/Technology/story?id=3920256&page=1. To the right of the article’s first paragraph are three A’s. Clicking on any of these allows you to increase or decrease the font size.

Menus

Drop down menus using CSS are another powerful piece of code that are also search-engine friendly.  This following example from Eric Meyer in More Eric Meyer on CSS is based on nested HTML lists.

The HTML lists create the hierarchy for the drop downs while the CSS controls the look and positioning to seamlessly to incorporate the menus. Updating menus is as simple as adding or replacing a list item.

All Lined Up

Positioning text elements is as easy as aligning an image. On the Get U Started site (http://www.getustarted.com/), the two columns of text are actually positioned using the following code:

#col1 {float: left; margin: 0; padding: 0 0 0 0; width: 169px; text-align: justify;}

#col2 {float: right; margin:0; padding: 0 2em 0 0; width: 169px; text-align: justify;}

This style creates a container for each column and controls positioning anywhere on the page. (This site is known as a hybrid; it uses an overall table but uses CSS for positioning items within it.)

Print it Out

If you think your audience will want to print some or all of your web pages, you can create a secondary style sheet to control the look of the printed pages. Styles can be set to remove or change the information so your web page looks just as good on paper.

On image-heavy sites, styles can be used to restrict images from printing. Styles can also be used to change a web-friendly font to a print-friendly one. Arial and Verdana are easy to read online, but Times Roman is easier on the eye when the page is printed out.

To attach an additional style sheet, just include the command below in the header of each page with your other styles:

<link rel=”stylesheet” type=”text/css” media=”print” href=”print.css”/>