BOOK AND SOFTWARE REVIEWS


Wyke-Smith, Charles Stylin' with CSS: a designer's guide. 2nd. ed. Berkeley, CA: New Riders, 2008. xv, 298 pp. ISBN: 978-0-321-52555-7. £28.99 $39.99


The development of Cascading Style Sheets, or CSS, has led to something of a revolution in Web page design: table tags are out and div tags are in, unless, of course you have a genuine data table you want to insert into a page. This is a pretty arcane field of development: discussion lists debate, for example, whether defining a table cell with CSS is or is not the same as using tables!

CSS are claimed to have advantages over the use of tables, in that the latter were never intended to be a layout design tool. They also increase load times for pages (although with today's fast systems that may not be too much of a problem) and a large site with many table-based pages can be time-consuming to amend and re-design.

So what does Information Research do? I hear you asking. Well, we use tables, but that is because we've been around almost as long as the Web has been around and in 1995 the use of <div> tags and CSS was not even a glimmer in the eye of a Web designer. Indeed the very notion of designing for the Web was in its infancy. We have tables. Can we do anything about it and would it be worth the effort? This alternative version of the review, using <div> tags and CSS might persuade you that we ought to convert, but, time is of the essence and I don't know that it will ever be done; although, as the template now exists, I may use it for future reviews.

However, back to the book. The seven chapters present the beginner (at least to the beginning CSS user) with a structured approach to using xhtml and CSS. Using CSS enables us, generally, to divorce the content of a Web page (with its embedded xhtml) from the layout (instructions for which are found in the CSS. Thus, we may find in the code on a Web page a statement like:

<div id="content_inner">

The id="content_inner" points to a style-sheet where the layout of this particular "div" - or section - is defined:

#content_inner {
margin:0em 1em 1em 1.5em;
}

Not much of a definition! However, the beauty of using CSS is that we can define further attributes of the div, such as the font family, text alignment, background colour, or whatever:

#content_inner {
margin:0em 1em 1em 1.5em;
text-align:center;
background-color:#E6DCCF;
font-family: Verdana, sans-serif;
font-size:80%;
}

Of course, one can put the same attributes into the tag on the Web page itself (as I have done here), but the advantage of using CSS is that you define the element once and, wherever it appears on your page, or even your Web site, it will look exactly the same, whereas, without the style sheet you will have to define the element specifically every time you want it to have a particular set of characteristics.

Of course, it is never as easy as it may seem in the text. A considerable amount of thought must go into the design of the individual page elements and that thought has to be represented in the CSS coding. Typically, a designer will build up a code library of elements and definitions and mix and match these, with whatever changes are desired by the client, since to design an plan anew every time would be very time-consuming.

All of this is explained in much more detail and with many more examples, in chapters that deal with How CSS works, styling fonts and text, positioning elements, basic page layout, and bulding Web pages. There's also a chapter on Designing interface components

One of the author's basic principles, set out in the Introduction, is about the re-use of code and, true to this, he has made available a library of code (CSS and javascript) on his Website for the book. So the short-cut to development is right there and, of course, I've taken advantage of it in developing this alternative review page.

Anyone who needs to get to grips with modern Web page design techniques can do no better than to start with this book.

Prof. T.D. Wilson
Editor in Chief
February, 2009