You're welcome.

       Use the black navigation bar to log in or create your account.

Lesigner Girl Profile
Live feed
Miscellaneous info

Head of Runboard staff

Registered: 11-2005
Posts: 9597
Karma: 132 (+147/-15)
posticon Stop using HTML for style

A lot of the code I've seen around these boards has been "deprecated" for a long time. This means that the code is outdated, no longer supported by web "standards" and should replaced with something else.

Check to see if your code is valid

w3c (the www consortium) sets the standards for web browsing software to use, and anyone who codes a page should be following those standards. Use this validator to see if your HTML is standards-compliant.

To use the validator, first highlight and copy this code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="" xml:lang="en" lang="en">
<head><title>My page</title>
<p>A line of valid code here.</p>

Paste that into the validator, replace ***YOUR HTML HEADER*** with everything from your custom HTML header, replace ***YOUR HTML FOOTER*** with everything from your custom HTML footer, and click on the "Check" button. This will show you all the errors in your HTML.

What does this have to do with style?

Most of the deprecated code used these days is being used for style, and the validator will give you errors for all those <font>, <center>, <b>, <u>, <i>, and even all those align="center" and align="right" declarations you may have been using.

Some of the errors are unpreventable, one example being the <marquee> tag. Although that tag is deprecated, the CSS replacement has yet to be implemented, so the only way to do it without javascript is to use this outdated <marquee> tag.

As for the others mentioned, they can (and should!) all be styled in your custom style sheet (CSS).

The old way:

<font size="2" face="verdana,arial,sans-serif"><a href=""><b><font color="#cc3939">Visit my website</font></b></a> for news and information about this, or <a href=""><b><font color="#cc3939">this other site</font></b></a> for news and information about that.</font>

What a mess! emoticon It's no wonder people forget a </b> or </a> here and there with so much code mixed in with so little content!

A better way:

First, get rid of the <center> tags, put the rest of that in a <div>, and give that <div> a class name. Then, get rid of all those <font> and <b> tags and define it all in your custom style sheet (CSS).


<div class="announcement">
<a href="">Visit my website</a> for news and information about this, or <a href="">this other site</a> for news and information about that.


.announcement {
  text-align: center; font-size: 85%;
  font-family: verdana,arial,sans-serif;
.announcement a:link, .announcement a:visited {
  color: #cc3939; font-weight: bold;

Ah, that's much easier to read, and you can easily add more links to the announcements section without having to add a <font> and <b> tag for each additional link.

Let's try another example, this time a couple of boxes inside a sidebar:

Here's what I see quite often:

<table cellspacing="0" cellpadding="3">
<tr><td bgcolor="#000000"><center><b><font color="#ffffff" size="2">Announcements</b></center></td></tr>
<tr><td bgcolor="#dddddd"><center><b><font color="#000000" size="2">
Enter our <a href="http://link_to_information"><font color="#ff6666">skinning contest</font></a> and win a custom title!</font></b></center></td></tr>

<table cellspacing="0" cellpadding="3">
<tr><td bgcolor="#000000"><center><b><font color="#ffffff" size="2">
<tr><td bgcolor="#eeeeee"><center><b><font color="#6666ff">John: August 3<br>Jane: August 20</font></b></center></td></tr>

A better way:


<div class="box" id="box1">
<p>Enter our <a href="http://link_to_information">skinning contest</a> and win a custom title!</p>
</div><!-- end box1 -->

<div class="box" id="box2">
<li>John: August 3</li>
<li>Jane: August 20</li>
</div><!-- end box2 -->

Whew! Much easier to read! I've color-coded the "box" class (.), the "box1" id (#), and the "box2" id (#), so you can match them up with the CSS below that corresponds with them. Note: They both share the same "box" classification, while they each have their own individual identifier ("box1" and "box2").

Notice in the old way example, the text is centered in everything. The other characteristics they have in common is font size and bold font. The "headings" also have the same background color and font color. Assuming all of your boxes are going to share these characteristics, we'll use the class name (class="box") that we gave to both of them to define these characteristics.


.box { text-align: center; font-size: 85%; font-weight: bold; }
.box h2 {margin: 0; padding: 3px; background-color: #000000; color: #ffffff;}
.box p { padding: 0 3px; }

Now for the things they do not have in common, we'll target each box specifically, using its id (id="box1" and id="box2"). For the stuff that's already defined in the "box" class, there is no need to re-define it individually for each box. We'll assume here that you also want a different link color for box1 than you want for the rest of the boxes.


#box1 { background-color: #dddddd; color: #000000; }
#box1 a:link, #box1 a:visited { color: #ff6666; }

#box2 { background-color: #eeeeee; color: #6666ff; }
#box2 ul { margin: 1em 0; padding: 0; }
#box2 li { margin: 0; list-style: none; }

Now you can add more announcements or birthdays to their respective box without having to add all that extra code each time, plus it's easier to add content to those boxes without having to weed through all that extra styling code, because the content (HTML) is separated from style (CSS)

Last revised by Lesigner Girl, 8/5/2007, 6:07 pm

Runboard Knowledge Base
Runboard Support Forums
Find other message boards
8/5/2007, 6:01 pm Link to this post PM Lesigner Girl Read Blog

Add to this discussion

You are not logged in (login)
Back To Top

This board's time is GMT.

Board's time is GMT