Page Layout with CSS - Web Development and Design Foundations with XHTML - page 216

Web developers have long delayed using CSS for page layout because of these rendering
issues. What has recently changed? As modern browser support of CSS has increased,
the number of Web visitors who use older browsers has decreased. For a typical Web
site, less than 1 percent of visitors use these older browsers. Depending on your site's
target audience, this figure could be higher or lower—your Web logs (see Chapter 13)
will provide this information. For example, TruGreen ( http://trugreen.com) and wired
( http://wired.com) are two organizations of many that use CSS for page layout. Although
some existing Web sites use XHTML tables (see Chapter 8) to configure page layout,
most Web sites developed today use CSS for this purpose.
Advantages of Using CSS for Page Layout
When CSS is used to configure page layout in addition to formatting text and color, the
following advantages of using CSS for formatting are enhanced:
● Greater Typography Control. This includes font size, line spacing, letter spacing,
indents, margins, and element positioning without using the XHTML table ele-
ment (discussed in Chapter 8).
● Style Is Separate from Structure. The formatting and page layout can be configured
and stored separately from the body section of the Web page document. When the
styles are modified, the XHTML remains intact. This means that if your client
decides to change something as small as the background color or as potentially
huge as the page layout, you may only need to change one file that contains the
styles, instead of each Web page document. For a look at how very powerful this
can be, visit http://www.csszengarden.com and be amazed at how different pages
with the same content and XHTML code (but different CSS) can look!
● Potentially Smaller Documents. Since both the formatting and page layout are
separate from the document, the actual .html documents should be smaller.
● Easier Site Maintenance. Again, if the styles or page layout need to be changed it
may be possible to complete the modifications by changing a single file only—the
style sheet.
● Increased Page Layout Control. CSS used in conjunction with modern standards-
compliant browsers provides a variety of positioning options (even down to the
pixel) along with an ability to overlap elements. This gives the Web developer
more control over the layout compared to the use of the previously popular
XHTML tables.
● Increased Accessibility. Pages designed using XHTML tables for layout are easy to
view with a traditional browser but can be very tedious when using a screen reader or
other assistive technology. By reserving the use of XHTML tables for organizing tabu-
lar information and using CSS for page layout—the pages become more accessible.
● Ability to Define Styles for Multiple Media Types. Since presentation is separated
from content, CSS can be used to set a separate style for printing, or possible use
of a screen reader.
● Support of the Semantic Web. The Semantic Web is Tim Berners-Lee's vision of the
future of the Internet ( http://www.w3.org/2001/sw/). According to Berners-Lee,
“The Semantic Web is an extension of the current Web in which information is
given well-defined meaning, better enabling computers and people to work
in cooperation.” While much development is being done in this area, Web
developers can take small steps, including using XHTML syntax and using CSS
to separate styles from structure.