quick solutions to common style sheet problems
Style sheets take all the slog out of designing the appearance of your web pages. No more fiddling with the code in a multitude of pages: just fix the font size, the line spacing, the page width or the size of headings in one file, the style sheet, and that will apply across your whole site. This is a guide to what is possible using the latest specification (2.1) of style sheets, written by Christopher Schmitt – one of the endless number of expert authors O’Reilly manage to locate.
It’s aimed at people who want to make a start with style sheets, or who are grappling with their problems and need quick fix solutions. It assumes you know the basics of web design using standard HTML markup, but he does keep the relationship between the two clearly in mind:
As a design language, CSS is focused on presentation, which includes helping web developers control the layout of their pages. HTML tables and other elements, on the other hand, are tools you use to mark up content. The ideal is to have HTML represent the structure of the content as an intellectual abstract level and CSS say how to present it for a particular device.
The presentation couldn’t be simpler. First a problem is specified (You want to indent the first line of a paragraph) and then he shows the CSS code to achieve it, followed by an illustrative screen shot. There’s an explanation of how and why it works as it does, and there are web links to online tutorials and official specifications directly related to that topic.
Each chapter considers one element of a web page that style sheets can control – the font, the page, links, lists, forms, tables, and how to create print-friendly pages.
He shows some of the new effects possible with the latest CSS version 2.1 – creating collapsible menus and tabbed folders, designing forms without using tables, controlling the appearance of content held within table cells, and creating multi-column pages holding the content in place with the very useful float property.
One of the hardest parts of learning about style sheets so far as I am concerned is the language in which it is expressed. It’s a pity there’s so much abstract terminology. Even at intermediate level it’s difficult to grasp immediately statements such as this:
Because these properties aren’t passed to child block-level elements, you don’t have to write additional rules to counter the visual effects that would occur if they were passed.
He finishes with some nifty tips, tricks, and workarounds. How to create a print-friendly style sheet for instance. This removes all the decoration and navigational graphics from a web page to produce something that is comfortably readable when printed out. All this without changing one bit of the page markup.
There’s also a useful appendix listing discussion groups, web resources, downloadable software, and ready-made CSS templates. Like everything else in this book, these take you quickly to solve problems of design.
The latest edition of this book is a hugely enlarged resource – more than double the size of the first. It’s been expanded to include much more information for CSS learners, explaining topics that range from basic web typography and page layout to techniques for formatting lists, forms, and tables. For more advanced users it has also been updated to take into account the behaviour of CSS in the latest versions of web browsers, including Internet Explorer 7, plus Firefox and Opera. You can’t get much more up to date than this.
© Roy Johnson 2009
Christopher Schmitt, CSS Cookbook, Sebastopol, CA: O’Reilly, third edition, 2009, pp.736, ISBN: 059615593X
If you found this article interesting you might want to Tell-A-Friend.