Transfer Deprecated HTML Attributes to CSS
type
The type attribute was used to set the list markers on unordered and ordered lists (#ul> and #ol>) and on individual list items (#li>) for example “a, b, c”, “1, 2, 3″, “i, ii, iii”, etc.
#ol type="a">
#li>First item#/li>
#li>Second item#/li>
#li>Third item#/li>
#/ol>
1. First item
2. Second item
3. Third item
Deprecated example of “type” in an ordered list element
To replicate this in CSS you must use list-style-type:
ol { list-style-type: lower-alpha; }
This styling can also be used on individual #li> elements to create differing sequence types, if you really wanted to!
Using the HTML attributes there were only 5 possible types you could use (1, A, a, I and i). By using CSS this increases to a possible 20 values including types such as “hiragana-iroha”, which is a Japanese sequence, and “none” to stop displaying any kind of sequence or bullet. An example of all the types can be seen if you are viewing the page using Firefox - unfortunately IE doesn’t recognise any of the more complex character types and will default to the list’s own style type.
border
The border attribute was deprecated only on the #img /> and #object> elements, but this should be used anywhere that you’d like to modify a border - to further the separation of presentation and content.
The most common place you’ll see this attribute, in current use, is on images that are surrounded by a link:
#a href="#">
#img src="images/cup.gif" width="10"
height="20" border="0" />
#/a>
Deprecated example of “border” in the image element
Without setting the border to zero, the browser’s default and usually undesirable rendering is to place an blue border around the image, to show that it is clickable (much like it will add a blue underline to a text link).
You will probably want to remove the border from all images that fall inside a link, using CSS you do this using the “border” declaration:
a img { border: 0; }
// you could also use border:none;
The flexibility in using CSS in favour of the deprecated attribute is similar to the hspace/vspace example above. It is now very easy to specify a different border size, colour and style to each different side of the item.
img {
border-width: 2px 4px;
border-style:dotted dashed solid none;
border-color: red;
}
// width: top and bottom 2px, left and right 4px
// style: top dotted, right dashed,
bottom solid, left none
// color: all sides red, if present
size
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).
noshade
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.
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
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:
#table>
#tr bgcolor="pink">
#td>The pink row#/td>
#td>Still the pink row#/td>
#/tr>
#tr>
#td bgcolor="green">The green cell#/td>
#td>No colour#/td>
#/tr>
#/table>
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; }
align
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.
End
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
