ptg16476052422 LESSON 15: Advanced CSS: Page Layout in CSS
Laying Out the Page
This lesson brings together many of the techniques you’ve learned in previous lessons for
using Cascading Style Sheets (CSS) properties to lay out an entire page or even an entire
website.
The examples in this lesson use a redesigned version of the website for the Dunbar
Project in Tucson, Arizona. The site as it appeared before the makeover is shown in
Figure 15.1. It is mostly a dark purple color, and although it’s not bad, it could be
improved through the use of CSS, as you’ll see.The Problems with Layout Tables
Figure 15.2 shows the source view for the original version of the Dunbar Project website,
which was not designed with CSS. Instead, multiple nested <table> tags provide the
page layout, and <font> is used extensively.
Tables for layout are problematic for a number of reasons. HTML purists argue against
tables on principle: The <table> tag is meant to identify data in rows and columns of
information and is not intended for page layout. Accessibility mavens will tell you that
screen readers employed by visually impaired users struggle with table layout.
Table-based layouts are often more difficult to maintain than CSS-based layouts, requir-
ing extensive rewriting of HTML tags to make simple changes. Later this lesson, you’ll
see how a few CSS rules can easily move entire sections around without touching the
HTML document at all.FIGURE 15.1
The Dunbar
Project’s original
website.