Use Temporary CSS Styles to Update an Old Document

If you’re trying to convert an HTML document to be HTML+CSS or XHTML it helps if you understand the layout of the old page. The best way to do that is to use temporary CSS styles to style the tables and cells within the document to show borders and spacing.

table {
  border: solid 2px red;
  margin : 2px;
}
td {
  border: dotted 1px blue;
  padding : 2px;
}

This will set the outer borders of the tables to a thick red line while the borders of the cells themselves are a dotted blue line.

If the document uses DIVs for layout, then simply change the styles to reflect nested divs. For example:

div {
  border: solid 2px red;
  margin : 2px;
}
div > div {
  border: dotted 1px blue;
  padding : 2px;
}

Using these temporary styles will make it easy to see the tables and the shape of the entire page without having to excavate the actual HTML code.

Remember to Remove the Styles When You’re Done

Once you’ve finished updating the page, simply remove the temporary styles.