Table Of Contentwww.it-ebooks.info
732X00FMFINAL.qxd 11/1/06 3:08 PM Page i
Pro CSS Techniques
Jeff Croft, Ian Lloyd, and Dan Rubin
www.it-ebooks.info
732X00FMFINAL.qxd 11/1/06 3:08 PM Page ii
Pro CSS Techniques
Copyright © 2006 by Jeff Croft,Ian Lloyd,and Dan Rubin
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-732-3
ISBN-10 (pbk): 1-59059-732-X
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 atrademark symbol with every occurrence
of atrademarked 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: Wilson Miner
Editorial Board: Steve Anglin, Ewan Buckingham, Gary Cornell, Jason Gilmore, Jonathan Gennick,
Jonathan Hassell, James Huddleston, Chris Mills, Matthew Moodie, Dominic Shakeshaft, Jim Sumser,
Keir Thomas, Matt Wade
Project Manager: Beth Christmas
Copy Edit Manager: Nicole Flores
Copy Editor: Liz Welch
Assistant Production Director: Kari Brooks-Copony
Production Editor: Katie Stence
Compositor and Artist: Kinetic Publishing Services, LLC
Proofreader: Lori Bring
Indexer: Broccoli Information Management
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 [email protected], 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 [email protected], 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.comin the Source Code/
Download section.
www.it-ebooks.info
732X00FMFINAL.qxd 11/1/06 3:08 PM Page iii
For Haley,because everything Ido is dedicated to you.
—Jeff Croft
For Manda.Thanks for the continued support—lloydi loves ya!
—Ian Lloyd
For Mum,Dad,and Alex—friends,till the end.
—Dan Rubin
www.it-ebooks.info
732X00FMFINAL.qxd 11/1/06 3:08 PM Page iv
www.it-ebooks.info
732X00FMFINAL.qxd 11/1/06 3:08 PM Page v
Contents at a Glance
About the Authors. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xvii
About the Tech Reviewer. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xix
Acknowledgments. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxi
Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxv
■ CHAPTER 1 The Promise of CSS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
■ CHAPTER 2 The Language of Style Sheets. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
■ CHAPTER 3 Specificity and the Cascade. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
■ CHAPTER 4 The Browsers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
■ CHAPTER 5 Managing CSS Files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73
■ CHAPTER 6 Hacks and Workarounds . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85
■ CHAPTER 7 CSS Layouts. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111
■ CHAPTER 8 Creating Common Page Elements. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163
■ CHAPTER 9 Typography. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 191
■ CHAPTER 10 Styling Tables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 219
■ CHAPTER 11 Styling Forms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 235
■ CHAPTER 12 Styling Lists. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 255
■ CHAPTER 13 Styling for Print and Other Media. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 277
■ CHAPTER 14 Everything Falls Apart . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 293
■ APPENDIX A CSS Reference . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 323
■ APPENDIX B CSS Specificity Chart . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 351
■ APPENDIX C Browser Grading Chart. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 355
■ INDEX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 361
v
www.it-ebooks.info
732X00FMFINAL.qxd 11/1/06 3:08 PM Page vi
www.it-ebooks.info
732X00FMFINAL.qxd 11/1/06 3:08 PM Page vii
Contents
About the Authors. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xvii
About the Tech Reviewer. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xix
Acknowledgments. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxi
Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxv
■ CHAPTER 1 The Promise of CSS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
The Advantages of Using CSS for Style. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
Semantic (X)HTML:Markup with Meaning. . . . . . . . . . . . . . . . . . . . . . . . . . . 2
What Is Semantic Markup? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
How Does Writing Semantic Markup Help You
in the Real World?. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
Creating Semantically Rich (X)HTML Markup. . . . . . . . . . . . . . . . . . . . 4
Avoiding Nonstructural Tags . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
Avoiding “Divitis”and “Classitis” . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
Choosing Your Markup Language and DOCTYPE. . . . . . . . . . . . . . . . . . . . . . 7
HTML vs.XHTML:Why the Decision
Does—and Doesn’t—Matter. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
DOCTYPE:The Most Underappreciated Tag of All. . . . . . . . . . . . . . . . . 8
The Three Layers of a Modern Web Document . . . . . . . . . . . . . . . . . . . . . . . 9
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
■ CHAPTER 2 The Language of Style Sheets. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
Adding Style to Your (X)HTML Document. . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
The <link> Tag. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
Using Multiple Style Sheets. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
The style Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
Creating a Style Sheet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
Declarations. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
Selectors. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
Element Selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
Class Selectors. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
ID Selectors. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
vii
www.it-ebooks.info
732X00FMFINAL.qxd 11/1/06 3:08 PM Page viii
viii ■ CONTENTS
(X)HTML’s Family Tree. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
Descendant Selectors. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
Child Selectors. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
Adjacent Sibling Selectors. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
Attribute Selectors. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
Presence of an Attribute. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
Exact Attribute Value. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
Partial Attribute Values . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
Particular Attribute Selector. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
Pseudo-Classes and Pseudo-Elements. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
Pseudo-Classes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
Pseudo-Elements. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
Daisy-Chaining Selectors. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
Grouping Selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
■ CHAPTER 3 Specificity and the Cascade. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
Selectors. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
Selectors:Simple and Combined . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
Universal “Star”Selector . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
Element Selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
Descendant,Child,and Adjacent Sibling Selectors. . . . . . . . . . . . . . 30
Pseudo-Class Selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
Link and Dynamic Pseudo-Classes:
A LoVe/HAte Relationship . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
Pseudo-Elements. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
The Cascade:Calculating Specificity. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
How the CSS 2.1 Specification Describes the Cascade . . . . . . . . . . 37
Translating the Spec. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
Keeping Score . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
A Series of Basic Examples. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
Understanding the Scoring. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
How the Cascade,Inline Styles,and
!important Affect Our Scoring. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
Real-World Examples . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
www.it-ebooks.info
732X00FMFINAL.qxd 11/1/06 3:08 PM Page ix
■ CONTENTS ix
■ CHAPTER 4 The Browsers. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
A Little History. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
The Standards Movement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60
The Current (Desktop) Browser Landscape . . . . . . . . . . . . . . . . . . . . . . . . . 60
Firefox . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60
Safari . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
Opera . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62
Internet Explorer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62
Other Browsers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
Dealing with Older Desktop Browsers. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
Graded Browser Support . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66
On Choosing a Development Browser. . . . . . . . . . . . . . . . . . . . . . . . . 69
Browsers for the Mobile Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
■ CHAPTER 5 Managing CSS Files. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73
Style Storage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74
The Path to Your CSS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74
Using Multiple Files As One Style Sheet. . . . . . . . . . . . . . . . . . . . . . . . 74
Conventions for class and id Names . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75
Formatting CSS Declarations. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76
One Line vs.One Property Per Line . . . . . . . . . . . . . . . . . . . . . . . . . . . 76
Beyond Organized:Ordering Your Properties . . . . . . . . . . . . . . . . . . . 76
Saving Time with Shorthand . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77
Grouping and Notating CSS Rules with Comments. . . . . . . . . . . . . . . . . . . 78
CSS Comment Syntax. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78
Code Notations. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78
Comments for Metadata. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79
Comments for “Code Glossaries”. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80
Comments for Grouping. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80
Ordering CSS Rules. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81
General to Specific. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81
By Order in Which They Appear. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81
By Page or Section of the Site. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82
Creating a Reusable Framework. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82
The Mass Reset. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84
www.it-ebooks.info
