CSS for Deprecated HTML Attributes: Part 2

In Part 1 of CSS for Deprecated HTML Attributes, I described how to replace HTML’s deprecated attributes with CSS, which is more flexible and inline with web standards in use today. If you want to convert an existing site that is using out of date practices or want to understand how to bring your own development up to scratch, then these articles are for you.

Let’s get straight into it with link, alink and vlink. I’ll also cover clear, size and noshade.

link, vlink and alink

Link, alink (active link) and vlink (visited link) were all attributes for the <body> element. Link sets the colour of the text of unvisited hyperlinks, alink the colour when selected by the user (when the link is being clicked) and vlink the colour of visited hyperlinks.

<body link="blue" vlink="purple" alink="red">

Deprecated example of the link attributes in the body element

To put this into a stylesheet you need to use the “:link”, “:visited” and “:active” pseudo-classes on the “a” type selector.

a:link { color: blue; }
a:visited { color: purple; }
a:active { color: red; }

The flexibility here is that any extra styling can be added to the hyperlink, that wasn’t possible through HTML alone. You can add borders, background images or colour, change font family and size and most usually to amend whether the default underline shows or not. CSS allows for 2 other states that were not possible previously. “:hover” and “:focus”. :hover sets the style of the link when the mouse pointer passes over it and :focus is what is seen when the link is tabbed on to using the keyboard.

The pseudo-classes have differing specificities which means there is a set order in which these must be written; link, visited, focus, hover then active. The standard mnemonic that people use is “LoVe, HAte” with focus added in the middle, if you’re using it.


The clear attribute was deprecated for use in the <br /> element. It specified where the next line should appear after the line break caused by this element, to control the text flow around floating objects. As with border, this conversion should be used anywhere you would like to clear floats.

The next line will begin...

<br clear="none" /> 
   // ... normally (default)

<br clear="left" /> 
   // ... on the nearest line below any floating 
   objects on the left-hand margin

<br clear="right" /> 
   // ... on the nearest line below any floating 
   objects on the right-hand margin

<br clear="all" />
   // .. on the nearest line below any floating 
   objects on both margins

Deprecated examples of the clear attribute in the br element

One common use for clear in today’s coding is to ensure a footer starts below any floating 2 or 3 column layout. For this you would want to position it underneath anything on the left and right margins, so that it is the very last item presented; in otherwords to clear all items. In CSS that is translated to “clear:both”:

#footer { clear: both; } // same as clear="all"
br { clear:left; } // an example to replace the 
                      deprecated use of clear in <br />

Clear left, right and none use the same value in the declaration as their name, i.e. clear:left, clear:right and clear:none – very easy.


Size was in use on the <hr /> (horizontal rule) element to set it’s height in pixels or percentage. Years ago I would always set size to 1 to give a thin solid black line, which would get rid of the default two-tone shading effect – more on the shading of <hr /> later.

<hr size="1" />
<hr size="5%" /> 

Before I show how to replicate this using CSS, I should point out that there are continual wranglings about whether or not this whole tag should still be in use. The two sides to the argument are; on the one hand it is a purely presentational element and should be removed in favour of using a border declaration in CSS; and on the other hand it has its semantic place to divide sections of text. I will leave the decision to you – a huge discussion on <hr />’s semantics took place on the Web Standards Group list last week.

To replicate in CSS is simple and uses the “height” declaration:

hr { height:1px; }
hr { height:5%; }

By moving this to CSS we again open up the possibilities of how a horizontal rule can be styled – adding colour, relative heights and background images (note: the rendering of background images and colour is not consistent across the browsers).


The <hr /> element had another attribute deprecated; noshade was a boolean attribute used to remove the two-tone shading effect and set the line in a solid colour, usually grey.

<hr noshade />

As a small aside, boolean attributes in XHTML are no longer used in their shortened form. For example, the “checked” attribute that is still in use on <input type=”checkbox” /> elements should be written in long-hand:

<input type="checkbox" checked="checked" />

Similarly for “selected” in <option> elements:

<option selected="selected" >Option 1</option>

Removing the shade in CSS isn’t as straight-forward as the attributes we’ve seen so far. In IE you’ll need to use the “color” declaration; and in Mozilla and Opera you need to use both the “border” and “background-color” declarations to get a similar effect to the original attributes. The following should be safe across different browers.

hr { 
   color: gray; // for IE
   background-color: gray; // for Mozilla and Firefox
   border: 0; // for Mozilla and Firefox

The same styling rules apply as for the “size” attribute above.

Part 3

I’ll finish this series off by looking at bgcolor, align, width and height.