Tucson Adobe User Group

This is not a book to teach you XHTML, but rather, a book about styling the XHTML elements to create striking and effective web pages. All the code for the XHTML is presented clearly and the CSS code for creating artful layouts is detailed and thoroughly explained. “Debugging for Internet Explorer” sections are included where relevant. The seven areas focused on are Headings, Images, Backgrounds, Navigation, Forms, Rounded Corners, and Tables.

The chapter on forms addresses creating a pleasing to the eye, easy to navigate screen for inputting information. The pros and cons of the various label placement options get a thorough going over. But for me, the real value of the chapter was the discussion of the fieldset and legend tags and how they are used to group together related form elements in the code. For instance, if a form has input fields for both the billing address and the shipping address, the legend tag can be assigned a value of either billing or shipping that describes the fieldset group of street, city, state, and zip values. When a screen reader is being used, the legend value is read in addition to the labels where input is required, making it very clear what information is being requested. The authors show how to use CSS to assist in making navigating the form easier, drawing the eye (or ear), logically through the flow of text input fields, radio buttons, and /or check boxes. Best practices for implementing error messages and flagging required fields includes accessibility tips.

I was surprised to find a chapter devoted to Rounded Corners. I would have thought that the topic would have been part of either the Backgrounds or Images chapter. However, it would seem that being able to include objects with rounded corners is a critical issue in creating artful and standards compliant web pages. I began the 25 page chapter curious to find out more. Chapter 6 addresses rounding the corners of a definition list and as well as applying rounding to the corners of a div containing a headline and a paragraph. I found that the real focus of this chapter was becoming aware of the issues of flexibility – does the box need to stretch horizontally or vertically, and portability – can the style be applied to a variety of content boxes.

So, the task at hand is to apply a background graphic to an XHTML box to create the effect of rounded corners. To achieve this end a graphic must be created that matches the background color of the container (box) and has rounded corners, the cutout area color matching the background color of the page. The issues under consideration are:

1. Pros and cons of working with fixed and flexible widths and heights.
2. Which CSS element (container) works best for holding the background image of rounded corners.
3. How many images are required: 1, 2, or 4.
4. “Thinking forward” by making the CSS portable to other boxes containing other XHTML elements.

The authors point out the many ways to get to here from there and the different CSS approaches to achieve the same ends. The inset I wanted to add to my page would require a fixed width, but the ability to grow or shrink vertically, depending on the amount of content displayed from month to month. So, I could use the “one image for the top two corners and another graphic for the bottom two” approach. The style sheet code is provided for the multitude of variations on a theme of rounded corners. And, when applied to the XHTML, the styles work as described!

The short take:
The Art & Science of CSS really takes a refreshing approach to helping the web designer make their web pages striking to view, accessible to all visitors and web standards compliant. There are a lot of inspiring ideas between the covers and the implementation is clearly explained and correctly coded. I think it would make a good addition to your reference library, as it has to mine!