CYAN MAGENTA YELLOW BLACK PANTONE 123 C Books for professionals by professionals ® Pro CSS and HTML Design Patterns Using design patterns to style (X)HTML with CSS will save you time and effort Pro CSS and HTML Design Patterns contains more than 350 ready-to-use patterns that can be combined to create an unlimited number of design solutions You can instantly benefit from their reusable power and efficiency by simply dropping them into your code and tweaking a few values! Each pattern works in all major web browsers including Internet Explorer 7, Internet Explorer 6, Firefox 2, Opera 9, and Safari You’ll find this book entirely usable and practical—it eliminates the need for hacks, tricks, endless testing, and constant tweaking in multiple browsers to get something to work I have tested every CSS property and combination of properties in every major browser I have boiled down the results into simple patterns that reveal the secrets of triggering predictable behavior in all major browsers This is much more than just a cookbook It systematically covers every usable feature of CSS and combines these features with HTML to create reusable patterns Each pattern has an intuitive name to make it easy to find, remember, and refer to Accessibility and best practices are carefully engineered into each design pattern, example, and source code You can read straight through the book, use it as a reference, and use it to find solutions to commonly encountered design problems The book’s consistent layout makes it quick and easy to find the right pattern and put it to use right away This book unleashes your productivity and creativity in web design and development Instead of hacking your way toward a solution, you’ll learn how to predictably create successful designs every time by reusing and combining modular design patterns Michael Bowers Companion eBook See last page for details on $10 eBook version www.apress.com Beginning HTML Modern Guide and Reference Beginning JavaScript with DOM Scripting and Ajax Pro JavaScript Techniques Pro CSS Techniques Beginning CSS Web Development Pro CSS and HTML Design Patterns ISBN-13: 978-1-59059-804-7 ISBN-10: 1-59059-804-0 54499 US $44.99 Bowers SOURCE CODE ONLINE THE APRESS ROADMAP Companion eBook Available Pro CSS and HTML Design Patterns Dear Reader, The EXPERT’s VOIce ® in Web Development Pro CSS and HTML Design Patterns Increase creativity and productivity by using patterns in your web designs while leveraging CSS and (X)HTML best practices Michael Bowers Shelve in Web Development User level: Intermediate–Advanced 781590 598047 this print for content only—size & color not accurate spine = 0.998" 528 page count 8040FM.qxd 3/29/07 12:23 PM Page i Pro CSS and HTML Design Patterns Michael Bowers 8040FM.qxd 3/29/07 12:23 PM Page ii Pro CSS and HTML Design Patterns Copyright © 2007 by Michael Bowers All rights reserved No part of this work may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording, or by any information storage or retrieval system, without the prior written permission of the copyright owner and the publisher ISBN-13 (pbk): 978-1-59059-804-7 ISBN-10 (pbk): 1-59059-804-0 Printed and bound in the United States of America Trademarked names may appear in this book Rather than use a trademark symbol with every occurrence of a trademarked name, we use the names only in an editorial fashion and to the benefit of the trademark owner, with no intention of infringement of the trademark Lead Editor: Chris Mills Technical Reviewer: Paul Haine Editorial Board: Steve Anglin, Ewan Buckingham, Gary Cornell, Jason Gilmore, Jonathan Gennick, Jonathan Hassell, James Huddleston, Chris Mills, Matthew Moodie, Jeff Pepper, Dominic Shakeshaft, Jim Sumser, Matt Wade Project Manager: Kylie Johnston Copy Edit Manager: Nicole Flores Copy Editor: Ami Knox Assistant Production Director: Kari Brooks-Copony Production Editor: Laura Esterman Compositor: Dina Quan Proofreader: Elizabeth Berry Indexer: Julie Grady Cover Designer: Kurt Krames Manufacturing Director: Tom Debolski Distributed to the book trade worldwide by Springer-Verlag New York, Inc., 233 Spring Street, 6th Floor, New York, NY 10013 Phone 1-800-SPRINGER, fax 201-348-4505, e-mail orders-ny@springer-sbm.com, or visit http://www.springeronline.com For information on translations, please contact Apress directly at 2560 Ninth Street, Suite 219, Berkeley, CA 94710 Phone 510-549-5930, fax 510-549-5939, e-mail info@apress.com, or visit http://www.apress.com The information in this book is distributed on an “as is” basis, without warranty Although every precaution has been taken in the preparation of this work, neither the author(s) nor Apress shall have any liability to any person or entity with respect to any loss or damage caused or alleged to be caused directly or indirectly by the information contained in this work The source code for this book is available to readers at http://www.apress.com in the Source Code/ Download section 8040FM.qxd 3/29/07 12:23 PM Page iii I dedicate this book to my loving family To my wife, Teresa To my son, Joshua To my daughter, Sydney They all sacrificed much to make this book possible 8040FM.qxd 3/29/07 12:23 PM Page iv 8040FM.qxd 3/29/07 12:23 PM Page v Contents at a Glance About the Author xv About the Technical Reviewer xvii Acknowledgments xix Introduction xxi ■CHAPTER ■CHAPTER ■CHAPTER ■CHAPTER ■CHAPTER ■CHAPTER ■CHAPTER ■CHAPTER ■CHAPTER ■CHAPTER ■CHAPTER ■CHAPTER ■CHAPTER ■CHAPTER ■CHAPTER ■CHAPTER ■CHAPTER ■CHAPTER ■CHAPTER ■CHAPTER 10 11 12 13 14 15 16 17 18 19 20 Design Patterns: Making CSS Easy! HTML Design Patterns 31 CSS Selectors and Inheritance 59 Box Models 77 Box Model Extents 95 Box Model Properties 107 Positioning Models 123 Positioning: Indented, Offset, and Aligned 147 Positioning: Advanced 173 Styling Text 199 Spacing Content 215 Aligning Content 237 Blocks 255 Images 283 Tables 317 Column Layout 343 Layouts 371 Drop Caps 417 Callouts and Quotes 437 Alerts 455 ■INDEX 481 v 8040FM.qxd 3/29/07 12:23 PM Page vi 8040FM.qxd 3/29/07 12:23 PM Page vii Contents About the Author xv About the Technical Reviewer xvii Acknowledgments xix Introduction xxi ■CHAPTER Design Patterns: Making CSS Easy! Design Patterns—Structured Recipes Using Design Patterns Using Stylesheets CSS Syntax CSS Syntax Details Using Whitespace in CSS 10 Using Property Values 11 Using Cascade Order 14 Simplifying the Cascade 17 CSS and HTML Links 18 CSS Properties 19 CSS Properties and Values: Common 20 CSS Properties and Values: Content 21 CSS Properties and Values: Layout 22 CSS Properties and Values: Specialized 23 Selectors 23 Flexible Units of Measure 24 Fixed Units of Measure 24 Ratios Between Units of Measure at 96 dpi 25 Typical font-size Values at 96 dpi 25 Troubleshooting CSS 26 Normalized Stylesheet 28 vii 8040FM.qxd viii 3/29/07 12:23 PM Page viii ■CONTENTS ■CHAPTER HTML Design Patterns 31 Chapter Outline 31 HTML Structure 32 XHTML 38 DOCTYPE 40 Header Elements 42 Conditional Stylesheet 44 Structural Block Elements 46 Terminal Block Elements 48 Multi-purpose Block Elements 50 Inline Elements 52 Class and ID Attributes 54 HTML Whitespace 56 ■CHAPTER CSS Selectors and Inheritance 59 Chapter Outline 59 Type, Class, and ID Selectors 60 Position and Group Selectors 62 Attribute Selectors 64 Pseudo-element Selectors 66 Pseudo-class Selectors 68 Subclass Selector 70 Inheritance 72 Visual Inheritance 74 ■CHAPTER Box Models 77 Chapter Outline 77 Display 78 Box Model 80 Inline Box 82 Inline-block Box 84 Block Box 86 Table Box 88 Absolute Box 90 Floated Box 92 8040FM.qxd 3/29/07 12:23 PM Page ix ■CONTENTS ■CHAPTER Box Model Extents 95 Chapter Outline 95 Width 96 Height 98 Sized 100 Shrinkwrapped 102 Stretched 104 ■CHAPTER Box Model Properties 107 Chapter Outline 107 Margin 108 Border 110 Padding 112 Background 114 Overflow 116 Visibility 118 Page Break 120 ■CHAPTER Positioning Models 123 Chapter Outline 123 Positioning Models 124 Positioned 126 Closest Positioned Ancestor 128 Stacking Context 130 Atomic 132 Static 134 Absolute 136 Fixed 138 Relative 140 Float and Clear 142 Relative Float 144 ■CHAPTER Positioning: Indented, Offset, and Aligned 147 Chapter Outline 147 Indented 148 Offset Static 150 Offset or Indented Static Table 152 Offset Float 154 ix ...8040FM.qxd 3/29/07 12:23 PM Page i Pro CSS and HTML Design Patterns Michael Bowers 8040FM.qxd 3/29/07 12:23 PM Page ii Pro CSS and HTML Design Patterns Copyright © 2007 by Michael Bowers... JavaScript design patterns in Chapter 17 and the two JavaScript patterns in Chapter 20—the remaining 343+ design patterns not use JavaScript Combining HTML and CSS to Create Design Patterns The final and. .. of CSS and HTML: • Chapter shows how design patterns make CSS easy Here I demonstrate how to combine simple design patterns into more complex and powerful patterns I also review the syntax of CSS