this print for content only—size & color not accurate spine = 0.998" 528 page count Books for professionals By professionals ® Pro CSS and HTML Design Patterns Dear Reader, 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 2. 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 US $44.99 Shelve in Web Development User level: Intermediate–Advanced Bowers Pro CSS and HTML Design Patterns The eXperT’s Voice ® in WeB DeVelopmenT Pro CSS and HTML Design Patterns cyan maGenTa yelloW Black panTone 123 c Michael Bowers Companion eBook Available THE APRESS ROADMAP Beginning CSS Web Development Beginning JavaScript with DOM Scripting and Ajax Pro JavaScript Techniques Pro CSS Techniques Beginning HTML Modern Guide and Reference Pro CSS and HTML Design Patterns www.apress.com SOURCE CODE ONLINE Companion eBook See last page for details on $10 eBook version ISBN-13: 978-1-59059-804-7 ISBN-10: 1-59059-804-0 9 781590 598047 5 4 4 9 9 Increase creativity and productivity by using patterns in your web designs while leveraging CSS and (X)HTML best practices www.it-ebooks.info Michael Bowers Pro CSS and HTML Design Patterns 8040FM.qxd 3/29/07 12:23 PM Page i www.it-ebooks.info 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 9 8 7 6 5 4 3 2 1 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 indi- rectly 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 ii www.it-ebooks.info 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 iii www.it-ebooks.info 8040FM.qxd 3/29/07 12:23 PM Page iv www.it-ebooks.info Contents at a Glance About the Author . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xv About the Technical Reviewer. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xvii Acknowledgments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xix Introduction. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxi ■CHAPTER 1 Design Patter ns: Making CSS Easy! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 ■CHAPTER 2 HTML Design Patterns . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31 ■CHAPTER 3 CSS Selectors and Inheritance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59 ■CHAPTER 4 Box Models. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77 ■CHAPTER 5 Box Model Extents. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95 ■CHAPTER 6 Box Model Properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107 ■CHAPTER 7 Positioning Models . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123 ■CHAPTER 8 Positioning: Indented, Offset, and Aligned . . . . . . . . . . . . . . . . . . . . . 147 ■CHAPTER 9 Positioning: Advanced . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 173 ■CHAPTER 10 Styling Text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 199 ■CHAPTER 11 Spacing Content. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 215 ■CHAPTER 12 Aligning Content. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 237 ■CHAPTER 13 Blocks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 255 ■CHAPTER 14 Images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 283 ■CHAPTER 15 Tables. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 317 ■CHAPTER 16 Column Layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 343 ■CHAPTER 17 Layouts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 371 ■CHAPTER 18 Drop Caps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 417 ■CHAPTER 19 Callouts and Quotes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 437 ■CHAPTER 20 Alerts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 455 ■INDEX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 481 v 8040FM.qxd 3/29/07 12:23 PM Page v www.it-ebooks.info 8040FM.qxd 3/29/07 12:23 PM Page vi www.it-ebooks.info Contents About the Author . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xv About the Technical Reviewer. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xvii Acknowledgments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xix Introduction. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxi ■CHAPTER 1 Design Patterns: Making CSS Easy! . . . . . . . . . . . . . . . . . . . . . . . . 1 Design Patterns—Structured Recipes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 Using Design Patterns . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 Using Stylesheets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 CSS Syntax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8 CSS Syntax Details . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9 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 T roubleshooting CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26 Normalized Stylesheet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28 vii 8040FM.qxd 3/29/07 12:23 PM Page vii www.it-ebooks.info ■CHAPTER 2 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 3 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-c lass Selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68 Subc lass Selector . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70 Inheritance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72 Visual Inheritance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74 ■CHAPTER 4 Box Models . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77 Chapter Outline . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77 Display. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78 Box Model. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80 Inline Box . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82 Inline-block Box. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84 Block Box . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86 T able Box . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88 Absolute Box. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90 Floa ted Box . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92 ■CONTENTSviii 8040FM.qxd 3/29/07 12:23 PM Page viii www.it-ebooks.info ■CHAPTER 5 Box Model Extents . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95 Chapter Outline . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95 Width . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96 Height . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98 Sized . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100 Shrinkwrapped. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102 Stretched. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104 ■CHAPTER 6 Box Model Properties. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107 Chapter Outline . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107 Margin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108 Border . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110 Padding . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112 Background . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114 Overflow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116 Visibility. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118 Page Break . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120 ■CHAPTER 7 Positioning Models . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123 Cha pter Outline . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123 Positioning Models . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124 Positioned . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126 Closest P ositioned Ancestor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128 Stacking Context . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 130 Atomic . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132 Sta tic . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134 Absolute . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136 F ixed . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138 Relative . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140 Float and Clear. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142 Relative Float . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144 ■CHAPTER 8 Positioning: Indented, Offset, and Aligned . . . . . . . . . . . . . . . 147 Chapter Outline . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147 Indented . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 148 Offset Sta tic . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150 Offset or Indented Static Table . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 152 Offset Float . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154 ■CONTENTS ix 8040FM.qxd 3/29/07 12:23 PM Page ix www.it-ebooks.info [...]... confidence Design Patterns Structured Recipes Design patterns have been used with great success in software programming They improve productivity, creativity, and efficiency in web design and development, and they reduce code bloat and complexity In the context of CSS and HTML, design patterns are sets of common functionality that work across various browsers and screen readers, without sacrificing design. .. of CSS and HTML: • Chapter 1 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 and the cascade order In addition, I present several charts that make using CSS easy: a list of links to useful CSS web sites, a one-page summary of CSS properties; a four-page listing of all usable CSS properties,... implied in the CSS specification, and the terms are commonly used What makes them innovative is how I define and use them to show what can be done with CSS and HTML In other words, they are innovative because they simplify learning, understanding, and using CSS and HTML These ideas change how you think about CSS and HTML, and that makes all the difference Furthermore, many of the design patterns in the... Page 2 CHAPTER 1 s DESIGN PATTERNS: MAKING CSS EASY! I have boiled down these results into 350+ simple design patterns all the CSS and HTML design patterns you need to create stunning, high-performance, and accessible web sites After you learn these design patterns, you’ll wonder how you ever developed web sites without them! In this chapter, I discuss the purpose of design patterns and how they work... to show how to integrate JavaScript, CSS, and HTML so you can use styles interactively Of course, if you do not want to use JavaScript, you can skip over the five JavaScript design patterns in Chapter 17 and the two JavaScript patterns in Chapter 20—the remaining 343+ design patterns do not use JavaScript Combining HTML and CSS to Create Design Patterns The final and most pervasive innovation in the... basics of coding CSS and HTML If you work exclusively in WYSIWYG designers like Dreamweaver or FrontPage and never look at HTML or CSS code, you may find the code in this book overwhelming If you like to learn by example, like to see how code works, and have some familiarity with CSS and HTML, you will love this book In Chapters 17 and 20, seven design patterns use JavaScript To fully understand them, you... learning CSS easy, and it makes using CSS very productive Chapters 17 through 20 show how to combine these design patterns to create fluid layouts, drop caps, callouts, quotes, and alerts To illustrate the simplicity and power of design patterns, the next five examples show how to take a series of basic design patterns and combine them into more complex patterns You do not need to understand the details... for Design patterns are organized by topic, and all usable CSS rules are covered in depth and in context like no other book All design patterns are accessible and follow best practices, making this book a worthwhile read from cover to cover as well as an excellent reference to keep by your side while you are designing and coding This book unleashes your productivity and creativity in web design and. .. written for those who have some familiarity with CSS and HTML It is for newcomers who have previously read an introductory book on CSS and HTML It is for designers and developers who tried CSS at one time and gave up because it never seemed to work right It is for professionals who want to take their CSS skills to a higher level It is for all who want to create designs quickly without hacking around until... types of structures you can create with HTML including structural blocks, terminal blocks, multi-purpose blocks, and inlines I also show how to use IDs and attributes for easy selection by CSS selectors • Chapter 3 introduces design patterns for CSS selectors and inheritance Here I demonstrate how selectors are the bridge between HTML and CSS I present design patterns for type, class, ID, position, . for professionals By professionals ® Pro CSS and HTML Design Patterns Dear Reader, Using design patterns to style (X )HTML with CSS will save you time and effort. Pro CSS and HTML Design Patterns. 9 Increase creativity and productivity by using patterns in your web designs while leveraging CSS and (X )HTML best practices www.it-ebooks.info Michael Bowers Pro CSS and HTML Design Patterns 8040FM.qxd. Development Beginning JavaScript with DOM Scripting and Ajax Pro JavaScript Techniques Pro CSS Techniques Beginning HTML Modern Guide and Reference Pro CSS and HTML Design Patterns www.apress.com SOURCE CODE ONLINE Companion