Meryl.net Home About Blog Clients Services Contact

Meryl's Notes Blog

Things wordy, geeky, and webby

CSS Without Tears With Makiko Itoh

Monday, January 28th, 2002 at 9:35 AM Category: Meryl's Notes Blog, Tech No comments

Designing and maintaining Web pages takes a lot of time, but using CSS can save considerable time. If you want to change the font color on all your Web pages, then all you have to do is go to the external CSS file and change it in one place as opposed to going to every HTML page and changing it in the FONT tag.

CSS is not without its drawbacks. Netscape 4.x and other CSS incompatible browsers are still heavily used today and don’t properly display CSS. Furthermore, the growth of wireless devices connected to the Internet makes it a greater challenge.

To overcome the browser challenges, start by determining which browser to use as the baseline. The decision largely depends on your audience. If you have an existing Web site, study its statistics to determine whether or not you want to reach the Netscape 4.x audience. Makiko Itoh of PRODOK.com states that there are three approaches you can consider:

Make Netscape 4.x the baseline browser – this approach is the most challenging because of the workarounds needed to make it look identical in 4.x.
Make Internet Explorer 5.0 the baseline browser – This method makes the presentation plain for the Netscape 4.x audience.
Compromise – Looks best in Netscape 6.x, Explorer 5.5 and higher, and looks satisfactory in Netscape 4.x.

Begin by creating streamlined HTML markup that is well formed and avoids all styling tags such as <FONT>, <CENTER>, and other deprecated tags. See Itoh’s example of a barebones HTML document.

Make sure you have the <DOCTYPE> line at the top of your document. If your document is not completely valid, use the Transitional DOCTYPE or no DOCTYPE.

DOCTYPE examples:

Strict HTML 4.01: <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html3/strict.dtd”>
Transitional HTML 4.01: <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd”>
Strict XHTML 1.0: <!DOCTYPE HTML PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “DTD/xhtml1-strict.dtd”>
Transitional XHTML 1.0: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “DTD/xhtml1-transitional.dtd”>

Make sure you use closing tags even for <P> and list items. Two HTML elements without closing tags are <BR> and <IMG>. Be aware that XHTML does close them.

Validate the barebones markup using the W3C.org validators and HTML Tidy.

After you confirm that your HTML is clean and has closed tags, you’re ready to add CSS. Let’s review a sample line:

p {font-family: verdana, helvetica, times;}

The p represents the selector or <P> tag. Font-family is the property and must follow : along with the value(s). In this example, anytime <p> comes up in the HTML document, the content appears with the verdana font. If the computer doesn’t have verdana font loaded, then the content will use the second choice of Helvetica.

Unless the user has overridden all author styles with a personal stylesheet, the user should see the entire page in verdana.

For purposes of this article, we’ll add <STYLE> right above the closing </HEAD> section of your HTML file. Everything between /* */ are comments to help you understand what is happening.

/* The next lines tell the browser to render anything in the <p> tag with a font size of 11 pixels and a line height (space between lines of 18 pixels
*/

p {
font-size: 11px;
line-height: 18px;
}

/* The next lines tell the browser to render anything in the <h2> tag with a font size of 15 pixels
*/

h2 {
font-size: 15px;
}

/* The next lines tell the browser to render anything in the <body>, <p>, and <h2> tags with a verdana,helvetica,arial,sans-serif font in that order. If the computer doesn’t have verdana, then the next choice is Helvetica.
*/

body,p,h2 {
font-family: verdana,helvetica,arial,sans-serif;
}
–>
</style>

Using <!– and –> tags will hide the CSS from older browsers that can’t render CSS. Save the HTML file and take a look at Itoh’s example. Congratulations, you’ve successfully added CSS to your HTML document.

If you decide that you want the <p> font size to be smaller or larger, all you have to do is change the number of pixels as follows:

p {
font-size: 10px;
line-height: 18px;
}

No more having to go through the entire document and changing the numbers in all the <FONT> tags. Expand your <STYLE> to add color and links. The BOLD items are additions to the original <STYLE> in the previous example.

p {
font-size: 11px;
line-height: 18px;
color: #eeeeee;
}

h2 {
font-size: 15px;
color: #fc0;
}

b,em {
color: #fc0;
}

body,p,h2 {
font-family: verdana,helvetica,arial,sans-serif;
}

body {
background-color: #000000;
color: #eeeeee;
}

/* a:visited are links that your visitors have visited.
*/

a:visited {
text-decoration: none;
color: #ffff99;
background-color: black;
}

/* a:link impacts all links on the page
*/

a:link {
text-decoration: underline;
color: #ff9900;
background-color: black;
}
/* a:hover changes the link when your visitor has the cursor over the link. This does not work in Netscape 4.x
*/

a:hover {
color: black;
background-color: #ffff99;
}

Making the above changes to your <STYLE> should look similar to this example. Feel free to play with the colors, sizes, and font values to see what happens to the document.

CSS offers many more options and makes it easy to change your document styles especially when using an external style sheet. If you link all your documents to one external CSS file, then you can make changes to styles in all of the documents just by modifying the values in the CSS file. The steps outlined in this article are unleashing a little bit of the power of CSS. It can go far beyond and control layouts and other design enhancing features in the latest browsers.