Download at Boykma.Com CSS THE MISSING MANUAL The book that should have been in the box® Download at Boykma.Com Download at Boykma.Com CSS Second Edition THE MISSING MANUAL ® David Sawyer McFarland Beijing • Cambridge • Farnham • Kưln • Sebastopol • Taipei • Tokyo Download at Boykma.Com CSS: The Missing Manual, Second Edition by David Sawyer McFarland Copyright © 2009 David Sawyer McFarland All rights reserved Printed in the United States of America Published by O’Reilly Media, Inc., 1005 Gravenstein Highway North, Sebastopol, CA 95472 O’Reilly books may be purchased for educational, business, or sales promotional use Online editions are also available for most titles (safari.oreilly.com) For more information, contact our corporate/institutional sales department: (800) 998-9938 or corporate@oreilly.com Printing History: August 2006: August 2009: First Edition Second Edition Nutshell Handbook, the Nutshell Handbook logo, the O’Reilly logo, and “The book that should have been in the box” are registered trademarks of O’Reilly Media, Inc CSS: The Missing Manual, The Missing Manual logo, Pogue Press, and the Pogue Press logo are trademarks of O’Reilly Media, Inc Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks Where those designations appear in this book, and O’Reilly Media, Inc was aware of a trademark claim, the designations have been printed in caps or initial caps While every precaution has been taken in the preparation of this book, the publisher and author(s) assume no responsibility for errors or omissions, or for damages resulting from the use of the information contained herein This book uses RepKover™ a durable and flexible lay-flat binding , ISBN: 978-0-596-80244-8 [M] Download at Boykma.Com Table of Contents The Missing Credits xiii Introduction Part One: CSS Basics Chapter 1: Rethinking HTML for CSS 17 HTML: Past and Present 17 HTML Past: Whatever Looked Good 18 HTML Present: Scaffolding for CSS 19 Writing HTML for CSS 20 Think Structure 20 Two New HTML Tags to Learn 20 HTML to Forget 22 Tips to Guide Your Way 23 The Importance of the Doctype 26 Getting the Most out of Internet Explorer 28 Chapter 2: Creating Styles and Style Sheets 31 Anatomy of a Style 31 Understanding Style Sheets 34 Internal or External—How to Choose 34 Internal Style Sheets 35 External Style Sheets 36 Linking a Style Sheet Using HTML 37 Linking a Style Sheet Using CSS 38 v Download at Boykma.Com Tutorial: Creating Your First Styles 39 Creating an Inline Style 39 Creating an Internal Style Sheet 40 Creating an External Style Sheet 43 Chapter 3: Selectors: Identifying What to Style 49 Tag Selectors: Page-Wide Styling 50 Class Selectors: Pinpoint Control 51 ID Selectors: Specific Page Elements 53 Styling Groups of Tags 55 Constructing Group Selectors 56 The Universal Selector (Asterisk) 56 Styling Tags Within Tags 57 The HTML Family Tree 57 Building Descendent Selectors 58 Pseudo-Classes and Pseudo-Elements 61 Styles for Links 61 Styling Paragraph Parts 62 More Pseudo-Classes and -Elements 62 Advanced Selectors 65 Child Selectors 66 Adjacent Siblings 66 Attribute Selectors 67 Tutorial: Selector Sampler 70 Creating a Group Selector 72 Creating and Applying a Class Selector 73 Creating a Descendent Selector 76 Creating and Applying an ID Selector 77 Finishing Touches 79 Chapter 4: Saving Time with Style Inheritance 81 What Is Inheritance? 81 How Inheritance Streamlines Style Sheets 83 The Limits of Inheritance 83 Tutorial: Inheritance 85 A Basic Example: One Level of Inheritance 85 Using Inheritance to Restyle an Entire Page 86 Inheritance Inaction 89 Chapter 5: Managing Multiple Styles: The Cascade 91 How Styles Cascade 92 Inherited Styles Accumulate 92 Nearest Ancestor Wins 93 The Directly Applied Style Wins 93 One Tag, Many Styles 94 vi CSS: The Missing Manual Download at Boykma.Com Specificity: Which Style Wins 96 The Tiebreaker: Last Style Wins 97 Controlling the Cascade 99 Changing the Specificity 99 Selective Overriding 100 Starting with a Clean Slate 101 Tutorial: The Cascade in Action 103 Resetting CSS and Styling from Scratch 103 Creating a Hybrid Style 105 Overcoming Conflicts 106 Part Two: Applied CSS Chapter 6: Formatting Text .113 Formatting Text 113 Choosing a Font 115 Adding Color to Text 118 Changing Font Size 119 Using Pixels 120 Using Keywords, Percentages, and Ems 121 Formatting Words and Letters 124 Italicizing and Bolding 124 Capitalizing 125 Decorating 125 Letter and Word Spacing 127 Formatting Entire Paragraphs 128 Adjusting the Space Between Lines 128 Aligning Text 130 Indenting the First Line and Removing Margins 130 Formatting the First Letter or First Line of a Paragraph 132 Styling Lists 134 Types of Lists 134 Positioning Bullets and Numbers 135 Graphic Bullets 137 Tutorial: Text Formatting in Action 138 Setting Up the Page 138 Formatting the Headings and Paragraphs 140 Formatting Lists 143 Fine-Tuning with Classes 144 Adding the Finishing Touches 146 Table of Contents Download at Boykma.Com vii Chapter 7: Margins, Padding, and Borders 151 Understanding the Box Model 151 Control Space with Margins and Padding 153 Margin and Padding Shorthand 155 Colliding Margins 155 Removing Space with Negative Margins 156 Displaying Inline and Block-Level Boxes 158 Adding Borders 160 Border Property Shorthand 161 Formatting Individual Borders 162 Coloring the Background 164 Determining Height and Width 164 Calculating a Box’s Actual Width and Height 165 Controlling the Tap with the Overflow Property 167 Wrap Content with Floating Elements 169 Backgrounds, Borders, and Floats 172 Stopping the Float 172 Tutorial: Margins, Backgrounds, and Borders 175 Controlling Page Margins and Backgrounds 175 Adjusting the Space Around Tags 178 Building a Sidebar 181 Fixing the Browser Bugs 184 Going Further 186 Chapter 8: Adding Graphics to Web Pages 187 CSS and the Tag 187 Background Images 188 Controlling Repetition 193 Positioning a Background Image 194 Keywords 194 Precise Values 196 Percentage Values 197 Fixing an Image in Place 199 Using Background Property Shorthand 199 Tutorial: Enhancing Images 201 Framing an Image 202 Adding a Caption 203 Tutorial: Creating a Photo Gallery 206 Adding Drop Shadows 210 Tutorial: Using Background Images 213 Adding an Image to the Page Background 214 Replacing Borders with Graphics 216 Using Graphics for Bulleted Lists 218 Giving the Sidebar Personality 219 Going Further 223 viii CSS: The Missing Manual Download at Boykma.Com Introduction Tip: If you really want to delve into the innards of XHTML, then check out W3 Schools’ XHTML Tutorial at www.w3schools.com/xhtml/default.asp The HTML page on page would look like this in XHTML: Hey, I am the title of this web page.