HTML Utopia: Designing Without Tables Using CSS (Chapters 1, 3, 4, and 5) Thank you for downloading these four chapters of Dan Shafer’s HTML Utopia: Designing Without Tables Using CSS. This excerpt encapsulates the Summary of Contents, Information about the Author and SitePoint, Table of Contents, Preface, four chapters of the book, and a portion of Appendix C: CSS Property Reference. We hope you find this information useful in evaluating the book. For more information, visit sitepoint.com Summary of Contents of this Excerpt Preface ..........................................................................................xi I. Introduction to CSS ................................................................. 1 1. Getting the Lay of the Land........................................... 3 3. Digging Below The Surface .......................................... 49 II. Page Layout with CSS........................................................... 73 4. CSS Web Site Design................................................... 75 5. Building the Skeleton ................................................... 87 C. CSS Property Reference (A-D only) ................................... 309 Index......................................................................................... 481 Summary of Additional Book Contents I. Introduction to CSS ................................................................. 1 2. Putting CSS Into Perspective....................................... 23 II. Page Layout with CSS........................................................... 73 6. Putting Things in Their Place .................................... 123 III. Styling Text and other Content with CSS ........................ 155 7. Splashing Around a Bit of Color ................................ 157 8. Making Fonts Consistent ........................................... 173 9. Text Effects and the Cascade ..................................... 193 10. Adding Graphics to the Design................................ 241 IV. Non-Obvious Uses of CSS................................................. 255 11. Improving the User Experience................................ 257 12. Validation and Backwards Compatibility................ 275 A. CSS Miscellany.................................................................... 293 B. CSS Color Reference ........................................................... 301 C. CSS Property Reference...................................................... 309 Recommended Resources......................................................... 473 HTML Utopia: Designing Without Tables Using CSS by Dan Shafer HTML Utopia: Designing Without Tables Using CSS by Dan Shafer Copyright © 2003 SitePoint Pty. Ltd. Editor: Georgina Laidlaw Technical Editor: Kevin Yank Illustrations and Cover Design: Julian Carroll Printing History: First Edition: May 2003 Notice of Rights All rights reserved. No part of this book may be reproduced, stored in a retrieval system or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embodied in critical articles or reviews. Notice of Liability The author and publisher have made every effort to ensure the accuracy of the information herein. However, the information contained in this book is sold without warranty, either express or implied. Neither the authors and SitePoint Pty. Ltd., nor its dealers or distributors will be held liable for any damages to be caused either directly or indirectly by the instructions contained in this book, or by the software or hardware products described herein. Trademark Notice Rather than indicating every occurrence of a trademarked name as such, this book uses the names only in an editorial fashion and to the benefit of the trademark owner with no intention of infringe- ment of the trademark. Published by SitePoint Pty. Ltd. Suite 6, 50 Regent Street Richmond VIC Australia 3121. Web: www.sitepoint.com E-Mail: [email protected] ISBN 0-9579218-2-9 Printed and bound in the United States of America About the Author Dan Shafer is a highly respected Web design consultant. He cut his teeth as the first Webmaster and Director of Technology at Salon.com, then spent almost five years as the Master Builder in CNET's Builder.com division. Dan gained widespread recognition as a respected commentator on the Web design scene when he hosted the annual Builder.com Live! conference in New Orleans. He has designed and built more than 100 Websites and is regarded as an expert in Web user experience design and implementation. The author of more than 50 previous titles on computers and technology, Dan lives in Monterey, California, with his wife of almost 25 years, Carolyn, and their Shiitzu dog, Albert Einstein. About SitePoint SitePoint specializes in publishing fun, practical and easy-to-understand content for Web Professionals. Visit http://www.sitepoint.com/ to access our books, newsletters, articles and community forums. This book is dedicated to One Mind, in the knowing that It is all there is. ii Table of Contents Preface ..................................................................................................... xi Who Should Read This Book? ............................................................ xii The Book's Web Site ......................................................................... xiii The Code Archive ...................................................................... xiii Updates and Errata ................................................................... xiii The SitePoint Forums ........................................................................ xiii The SitePoint Newsletters ................................................................. xiii Your Feedback ................................................................................... xiv Acknowledgements ............................................................................ xiv I. Introduction to CSS 1 1. Getting the Lay of the Land ........................................................... 3 CSS in Context ............................................................................ 4 The Basic Purpose of CSS ............................................................ 5 Why Most—But Not All—Tables Are Bad .................................... 6 Tables Mean Long Load Times ............................................. 6 Use of Transparent Images Slows Us Down .......................... 7 Maintaining Tables is a Nightmare ....................................... 7 When it’s OK to Use a Table .............................................. 8 What is CSS, Really? ................................................................... 8 Parts of a CSS Rule .................................................................... 10 Types of CSS Rules .................................................................... 12 What Properties Can CSS Rules Affect? ............................. 13 What Elements Can CSS Affect? ........................................ 13 Where Can CSS Styles Be Defined? ................................... 14 Why Bother? ............................................................................. 17 Summary ................................................................................... 21 2. Putting CSS Into Perspective ........................................................ 23 What is CSS Good For? ............................................................. 23 Color and CSS ................................................................... 24 Fonts and CSS ................................................................... 28 Pseudo-Class Animation and CSS ....................................... 30 Images and CSS ................................................................. 31 Multiple Style Sheets, Users, and CSS ................................ 33 What CSS Alone Can’t Do For You ........................................... 34 CSS and Web Accessibility ........................................................ 36 CSS and the Ever-Shifting World of Browsers ............................ 42 Accommodating Older Browsers ......................................... 44 HTML Utopia: Designing Without Tables Using CSS Dealing with Broken Browsers ............................................ 46 Summary ................................................................................... 47 3. Digging Below The Surface ........................................................... 49 Applying CSS to HTML Documents .......................................... 50 Using Shorthand Properties ....................................................... 51 How Inheritance Works in CSS ................................................. 51 Selectors and Structure of CSS Rules .......................................... 54 Universal Selector .............................................................. 56 Element Type Selector ....................................................... 56 Class Selector .................................................................... 57 ID Selector ........................................................................ 58 Pseudo-Element Selector .................................................... 59 Pseudo-Class Selector ......................................................... 60 Descendant Selector ........................................................... 61 Parent-Child Selector ......................................................... 62 Adjacent Selector ..............................................................