Skip to main content

Getting StartED with CSS

CSS finally comes of age

With the release of Internet Explorer 8 in March 2009, all leading browsers now offer reliable support for Cascading Style Sheets (CSS). It will take some time before earlier, buggy versions of Internet Explorer disappear, but now is the time to embrace CSS. But let’s be honest: learning how to lay out pages that display reliably in all browsers can be an uphill struggle.

Complete reference to CSS2.1

Book coverThis is the companion website to Getting StartED with CSS by David Powers (friends of ED, 2009, ISBN: 978-1-4302-2543-0). Here, you’ll find a complete reference guide to all the visual and print properties in CSS2.1, plus a guide to all the selectors supported by browsers in widespread use.

The CSS Properties section of this site contains links to many examples of CSS in action. Most are taken from the download files for the book, but some have been adapted specially. The style rules for most examples are embedded in the head of the page, although some use external style sheets. Right-click and view the page source to inspect the CSS, or use a CSS analysis tool, such as Firebug or the Web Inspector panel in Safari 4+.

This site also describes the basics of CSS, including how to write a style rule, where to put style rules, how to specify CSS property values, and an explanation of how the CSS cascade works.

A practical approach

In the book, my aim is to teach you the different CSS properties and how they interact with each other. By the time you get to the final chapter, you will have studied every property in the CSS2.1 specification — but not in a dry, academic way. Most chapters are built around a case study that takes an unstyled page and transforms it into an elegant design with a choice of a vertical navigation bar or a horizontal one.

Instead of throwing a list of rules at you, I ease you in gently by showing how to redefine the default look of HTML tags, such as paragraphs and headings. I deliberately avoid CSS classes and ID selectors until much later. Seeing how styles are applied in practice helps you understand the principles of inheritance. If you understand, you’re more likely to remember. I also deliberately avoid using lots of hacks to get older browsers to display your pages correctly. Of course, hacks are occasionally necessary; but the emphasis throughout the book is on learning how CSS works in standards-compliant browsers such as IE8, Firefox 3+, and Safari 4. Once you understand CSS, you can easily find ways to solve problems in older browsers. Understanding is the key.

Getting StartED with CSS also takes a modular approach to the CSS box model, starting with margins, then introducing borders and backgrounds, before finally adding padding into the mix. The book is written in a tutorial style, with plenty of hands-on exercises; but all the main points are summarized in reference sections to refresh your memory whenever you’re unsure about something.

The book covers all the properties in the CSS2.1 specification. Since cross-browser support for CSS3 is still patchy, there is minimal coverage of CSS3.

Table of contents

  1. What is CSS and Why Should I Learn It?
  2. How Do I Improve the Look of Text and Links?
  3. How Can I Improve the Layout of my Text?
  4. How Can I Flow Text around Images?
  5. How Do I Add Backgrounds and Borders to Improve the Look of my Page?
  6. How Do I Solve the Mysteries of Width and Height?
  7. How Do I Create Differently Styled Sections?
  8. How Do I Style Lists and Navigation Menus?
  9. How Do I Style Tables?
  10. How Do I Position Elements Precisely on the Page?
  11. Are There Any Guidelines for Basic Page Layout?
  12. How Do I Create Styles for Printing?
  13. Appendix: CSS Properties and Selectors

About the author

David Powers is the author of several bestselling books on PHP and Dreamweaver. He is an Adobe Community Expert for Dreamweaver, and teaches Dreamweaver and CSS at the Highlander training centre in London, UK.