CSS for Deprecated HTML Attributes: Part 3

In this series of articles I have described how to remove the deprecated attributes in HTML and replicate the styles using CSS. The first part looked at hspace and vspace, type and border. Part two described how to replicate link, alink and vlink, size, noshade and clear. In this final part I will be mopping up width, height, bgcolor and align.

width and height

The width attribute was deprecated for use on <th>, <td> and <hr />, and the height attribute on <th> and <td>. I hope it’s obvious that they set the width and height of the element on which they are specified, quoted in pixels or percentage.

<td width="50%" height="20px">Umbrella stand</td>

Deprecated example of “width” and “height” in a table data element

In the old days of table-based layouts, width and height would be littered around a page’s code hugely increasing the byte size of the file. Removing them gives you a huge saving in bandwidth and simplifies the code for easier maintenance. In CSS you’d replace these attributes in the following way:

td { 
    width: 50%;
    height: 20px;


Bgcolor was an attribute used to set the background colour of the <table> elements and the <body> element. It would be used to set the background colour of the whole page, you can use a named value or hex if necessary:

<body bgcolor="purple">

Or to set individual rows or cells of tables:

    <tr bgcolor="pink">
        <td>The pink row</td>
        <td>Still the pink row</td>
        <td bgcolor="green">The green cell</td>
        <td>No colour</td>

In CSS the property is “background-color” (to colour individual rows/cells you would need to add a class or id to those rows):

body { background-color: purple; }
tr.odd { background-color: pink; }
td.highlight { background-color: green; }

Moving this to CSS gives you so much more control over the way pages and tables look. There are a whole host of background related CSS properties such as “background-image”, “background-position”, “background-attachment” and “background-repeat”; these can be grouped together using the background shorthand:

background: color | image | repeat | attachment | position ;

So if you had a flower image that you wanted to appear at the bottom right of all pages on your site you’d use the “background” declaration to set this up in one line;

body { background: white url(imgs/flower.jpg) no-repeat right bottom; }


The align attribute was used to specify the horizontal alignment of an element with the surrounding content. Now it should not be used on any element but you still see it used mainly on the <img />, <hx> and <p> elements:

<h1 align="center">Centred heading</h1>
<p align="justified">Bit of text that should be justified.</p>

Deprecated example of “align” in the h1 and p elements

The equivalent CSS property is text-align and has the same values as the align attribute; left, right, center and justified.

h1 { text-align: center; }
p { text-align: justified; }

The thing to remember with this property is that it can align any element and not just text, as it seems to imply.

For reference; CSS2 introduced another value for text-align, which is “<string>” and for use in tables only. It aligns the text to whatever string value you enter, for example td { text-align: "."; } could be used to align a column of numerical data on the decimal point. It was withdrawn from CSS2.1 due to lack of implentation among the browsers.


The main thing to remember is that it is always better to remove all presentational attributes from your (X)HTML code and use CSS to do the same job. There’s a CSS declaration for any HTML attribute, so remove them all for best results.

Additional Resources

W3 Schools: this is the site I started learning from
HTML Dog: excellent resource, written by a pro
CSS Zen Garden/: the original CSS playground, great for inspiration and pushing the limits of what CSS can do for you