Css: The Missing Manual by David Sawyer McFarland


7356b17f32baeb9.jpg Author David Sawyer McFarland
Isbn 978-1491918050
File size 193.1 MB
Year 2015
Pages 721
Language English
File format PDF
Category programming



 

Answers found here! CSS lets you create professional websites, but learning its finer points can be tricky—even for seasoned web developers. This fully updated edition provides the most modern and effective tips, tricks, and tutorial-based instruction on CSS available today. Learn how to use new tools such as Flexbox and Sass to build web pages that look great and run fast on any desktop or mobile device. Ideal for casual and experienced designers alike. The important stuff you need to know n  tart with the basics. Write CSS-friendly HTML, including the S HTML5 tags recognized by today’s browsers. n  esign for mobile devices. Create web pages that look great D when visitors use them on the go. n  ake your pages work for you. Add animations that capture M the imagination, and forms that get the job done. n  ake control of page layouts. Use professional design T techniques such as floats and positioning. n  ake your layouts more flexible. Design websites with M Flexbox that adjust to different devices and screen sizes. n  ork more efficiently. Write less CSS code and work with W smaller files, using Syntactically Awesome Style Sheets (Sass). David Sawyer McFarland is a web developer, teacher, and author. He’s been building websites since 1995, when he designed an online magazine for communication professionals. David has taught web design at the UC Berkeley Graduate School of Journalism, the Center for Electronic Art, the Art Institute of Portland, and Portland State University. Currently, he’s a Teaching Team Leader at the online education site, Treehouse http://teamtreehouse.com. Web Design/CSS US $39.99 CAN $45.99 ISBN: 978-1-491-91805-0 missingmanuals.com twitter: @missingmanuals facebook.com/MissingManuals CSS The book that should have been in the box® David Sawyer McFarland Beijing | Boston | Farnham | Sebastopol | Tokyo CSS: The Missing Manual by David Sawyer McFarland Copyright © 2015 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 (http://safaribooksonline.com). For more information, contact our corporate/institutional sales department: (800) 9989938 or [email protected] August 2006: August 2009: December 2012: August 2015: First Edition. Second Edition. Third Edition. Fourth Edition. Revision History for the Fourth Edition: 2015-08-05 First release See http://oreilly.com/catalog/errata.csp?isbn=0636920036357 for release details. The Missing Manual is a registered trademark of O’Reilly Media, Inc. The Missing Manual logo, and “The book that should have been in the box” 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 is aware of a trademark claim, the designations are capitalized. While every precaution has been taken in the preparation of this book, the publisher assumes no responsibility for errors or omissions, or for damages resulting from the use of the information contained in it. ISBN-13: 978-1-491-91805-0 [M] Contents The Missing Credits. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ix Introduction. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xiii What Is CSS?. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xiii What You Need to Know. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xiv HTML: The Barebones Structure. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xiv Document Types. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xiv How HTML Tags Work. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xv HTML5: More Tags to Choose From . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xvii Software for CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xvii About This Book. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xviii The Very Basics. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xx About the Online Resources. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxi Safari® Books Online . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxii Part One: CHAPTER 1: CSS Basics HTML and CSS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 HTML: Past and Present . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 Writing HTML for CSS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 The Importance of the Doctype . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17 How CSS Works . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19 CHAPTER 2: Creating Styles and Style Sheets. . . . . . . . . . . . . . . . . . . . . . . . . . . . 21 Anatomy of a Style. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21 Understanding Style Sheets. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24 Internal Style Sheets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25 External Style Sheets. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26 Tutorial: Creating Your First Styles. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27 CHAPTER 3: Selectors: Identifying What to Style. . . . . . . . . . . . . . . . . . . . . . . 41 Type Selectors: Styling HTML Tags. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42 Class Selectors: Pinpoint Control . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43 ID Selectors: Specific Page Elements. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46 Styling Groups of Tags. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49 Styling Tags Within Tags. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50 Pseudo-Classes and Pseudo-Elements. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55 iii Attribute Selectors. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59 Child Selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61 Siblings. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67 The :target Selector. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68 The :not() Selector. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69 Tutorial: Selector Sampler. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70 CHAPTER 4: Saving Time with Style Inheritance. . . . . . . . . . . . . . . . . . . . . . . . 85 What Is Inheritance? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85 How Inheritance Streamlines Style Sheets . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86 The Limits of Inheritance. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88 Tutorial: Inheritance. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90 CHAPTER 5: Managing Multiple Styles: The Cascade. . . . . . . . . . . . . . . . . . . . 97 How Styles Cascade. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98 Specificity: Which Style Wins. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102 Controlling the Cascade. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105 Tutorial: The Cascade in Action. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111 Part Two: CHAPTER 6: Applied CSS Formatting Text.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121 Using Fonts. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121 Using Web Fonts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126 Discovering Google Web Fonts. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140 Adding Color to Text. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147 Changing Font Size . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151 Formatting Words and Letters . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156 Adding Text Shadow. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 160 Formatting Entire Paragraphs. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 162 Styling Lists. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 168 Tutorial: Text Formatting in Action. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 172 CHAPTER 7: Margins, Padding, and Borders. . . . . . . . . . . . . . . . . . . . . . . . . . . 185 Understanding the Box Model. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185 Controlling Space with Margins and Padding. . . . . . . . . . . . . . . . . . . . . . . . . . 187 Adding Borders. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 194 Coloring the Background . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 198 Creating Rounded Corners. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 199 Adding Drop Shadows. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 201 Determining Height and Width. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204 Wrapping Content with Floating Elements. . . . . . . . . . . . . . . . . . . . . . . . . . . 210 Tutorial: Margins, Backgrounds, and Borders. . . . . . . . . . . . . . . . . . . . . . . . . 216 iv Contents CHAPTER 8: Adding Graphics to Web Pages. . . . . . . . . . . . . . . . . . . . . . . . . . . 229 Discovering CSS and the Tag. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 229 Adding Background Images. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 231 Controlling Repetition. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 234 Positioning a Background Image. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 236 Using Background Property Shorthand. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 247 Using Multiple Background Images. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .249 Utilizing Gradient Backgrounds. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 252 Tutorial: Enhancing Images. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 261 Tutorial: Creating a Photo Gallery. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 266 Tutorial: Using Background Images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 270 CHAPTER 9: Sprucing Up Your Site’s Navigation. . . . . . . . . . . . . . . . . . . . . . . 279 Selecting Which Links to Style. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 279 Styling Links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 283 Building Navigation Bars. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 289 CSS-Style Preloading Rollovers. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 298 Styling Particular Types of Links. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 300 Tutorial: Styling Links. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 302 Tutorial: Creating a Navigation Bar. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 308 CHAPTER 10: CSS Transforms, Transitions, and Animations. . . . . . . . . . . . . 319 Transforms. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 319 Transitions. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 330 Animations. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 338 Tutorial. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 349 CHAPTER 11: Formatting Tables and Forms. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 357 Using Tables the Right Way. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 357 Styling Tables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 359 Styling Forms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 366 Tutorial: Styling a Table. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 370 Tutorial: Styling a Form. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 375 Part Three: CSS Page Layout CHAPTER 12: Introducing CSS Layout. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 385 Types of Web Page Layouts. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 385 How CSS Layout Works. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 387 Layout Strategies. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 392 CHAPTER 13: Building Float-Based Layouts.. . . . . . . . . . . . . . . . . . . . . . . . . . . . 397 Applying Floats to Your Layouts. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 401 Overcoming Float Problems. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 405 Tutorial: Multiple-Column Layouts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 417 Contents v CHAPTER 14: Positioning Elements on a Web Page. . . . . . . . . . . . . . . . . . . . . 429 How Positioning Properties Work. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 430 Powerful Positioning Strategies. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 443 Tutorial: Positioning Page Elements. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 448 CHAPTER 15: Responsive Web Design. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 457 Responsive Web Design Basics. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 457 Setting Up a Web Page for RWD. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 459 Media Queries. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 460 Flexible Grids. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 468 Fluid Images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 472 Responsive Web Design Tutorial. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 476 CHAPTER 16: Using a CSS Grid System. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 493 How Grids Work. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 493 Structuring Your HTML for Grids. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 495 Using the Skeleton Grid System. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .497 Creating and Naming Columns . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 501 Tutorial: Using a Grid System. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 509 CHAPTER 17: Modern Web Layout with Flexbox. . . . . . . . . . . . . . . . . . . . . . . . 527 Introducing Flexbox. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 527 Flex Container Properties. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 532 Flex Item Properties. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 541 Tutorial: Build a Flexbox Layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 556 Part Four: Advanced CSS CHAPTER 18: Improving Your CSS Habits. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 569 Adding Comments. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 569 Organizing Styles. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 570 Eliminating Browser Style Interference. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 579 Using Descendant Selectors. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 582 CHAPTER 19: More Powerful Styling with Sass. . . . . . . . . . . . . . . . . . . . . . . . . . 589 What is Sass?. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 589 Installing Sass. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 591 Sass Basics. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 595 Organizing Your Styles with Sass Partials. . . . . . . . . . . . . . . . . . . . . . . . . . . . 600 Sass Variables. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 603 Nesting Selectors. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 607 Inheriting (or Extending) Properties. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 612 Mixins . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 618 Working with Media Queries . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 626 Troubleshooting with CSS Source Maps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 631 vi Contents Part Five: Appendixes APPENDIX A: CSS Property Reference. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 637 CSS Values. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 637 Text Properties. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 642 List Properties. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 647 Padding, Borders, and Margins. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 648 Backgrounds. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 654 Page Layout Properties. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 657 Animation, Transform and Transition Properties. . . . . . . . . . . . . . . . . . . . . . 663 Table Properties. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 668 Miscellaneous Properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 670 APPENDIX B: CSS Resources. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 673 References. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 673 CSS Help. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 674 CSS Tips, Tricks, and Advice. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 674 CSS Navigation. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 675 CSS Layout. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 676 Showcase Sites. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 676 Index. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 677 Contents vii The Missing Credits ABOUT THE AUTHOR David McFarland (author) is a web developer, teacher and author. He’s been building web sites since 1995, when he designed his first website: an online magazine for communication professionals. He’s taught web design at the UC Berkeley Graduate School of Journalism, the Center for Electronic Art, the Art Institute of Portland, and Portland State University. He’s currently a Teaching Team Leader at the online education site, Treehouse (http:// teamtreehouse.com). ABOUT THE CREATIVE TEAM Nan Barber (editor) is associate editor for the Missing Manuals series. She lives in Massachusetts with her husband and various electronic devices. Email: [email protected] gmail.com. Melanie Yarbrough (production editor and compositor) works and plays in Cambridge, Massachusetts, where she bakes up whatever she can imagine and bikes around the city. Email: [email protected] Molly Ives Brower (proofreader) is a freelance editor and proofreader who has loved the Internet since she got a BITNET address in 1990. These days, though, she can be found online at http://www.mjibrower.com and on Twitter, where she goes by @vintagereader. Email: [email protected] Ron Strauss (indexer) specializes in the indexing of information technology publications of all kinds. Ron is also an accomplished classical violist and lives in Northern California with his wife and fellow indexer, Annie, and his miniature pinscher, Kanga. Email: [email protected] Rich Koster (beta reader) bought his first Mac, a 17-inch MacBook Pro, in 2009, and has never looked back toward the Dark Side (PCs). Rich served as the tech editor of David Pogue’s iPhone: The Missing Manual, 3rd Edition. He’s a husband, a father, and creator of the Disney Echo at http://DisneyEcho.emuck.com, which he has fun tending daily with his MacBook Pro! ACKNOWLEDGEMENTS Many thanks to all those who helped with this book, including the many students I’ve taught who always help me see complex concepts through beginner’s eyes. THE MISSING CREDITS ix Thanks to my technical editors, Daniel Quinn and Jennifer Davis, who saved me from embarrassing mistakes. We all owe a big debt of gratitude to the many web designers who have broken new ground by using CSS in creative ways and shared their discoveries with the web design community. Thanks to David Pogue, who got me started, many years ago on this long adventure. Thanks to Nan Barber for refining my writing, fixing my mistakes, and keeping me on track. ——David Sawyer McFarland THE MISSING MANUAL SERIES Missing Manuals are witty, superbly written guides to computer products that don’t come with printed manuals (which is just about all of them). Each book features a handcrafted index and cross-references to specific pages (not just chapters). Recent and upcoming titles include: • Access 2013: The Missing Manual by Matthew MacDonald • Adobe Edge Animate: The Missing Manual by Chris Grover • Buying a Home: The Missing Manual by Nancy Conner • Creating a Website: The Missing Manual, Third Edition by Matthew MacDonald • CSS3: The Missing Manual, Third Edition by David Sawyer McFarland • Dreamweaver CS6: The Missing Manual by David Sawyer McFarland • Dreamweaver CC: The Missing Manual, Second Edition by David Sawyer McFarland and Chris Grover • Excel 2013: The Missing Manual by Matthew MacDonald • FileMaker Pro 13: The Missing Manual by Susan Prosser and Stuart Gripman • Fire Phone: The Missing Manual by Preston Gralla • Flash CS6: The Missing Manual by Chris Grover • Galaxy Tab: The Missing Manual by Preston Gralla • Galaxy S5: The Missing Manual by Preston Gralla • Google+: The Missing Manual by Kevin Purdy • HTML5: The Missing Manual, Second Edition by Matthew MacDonald • iMovie: The Missing Manual by David Pogue and Aaron Miller • iPad: The Missing Manual, Seventh Edition by J.D. Biersdorfer • iPhone: The Missing Manual, Eighth Edition by David Pogue • iPhone App Development: The Missing Manual by Craig Hockenberry • iPhoto: The Missing Manual by David Pogue and Lesa Snider x THE MISSING CREDITS • iPod: The Missing Manual, Eleventh Edition by J.D. Biersdorfer and David Pogue • iWork: The Missing Manual by Jessica Thornsby and Josh Clark • JavaScript & jQuery: The Missing Manual, Third Edition by David Sawyer McFarland • Kindle Fire HD: The Missing Manual by Peter Meyers • Living Green: The Missing Manual by Nancy Conner • Microsoft Project 2013: The Missing Manual by Bonnie Biafore • Motorola Xoom: The Missing Manual by Preston Gralla • NOOK HD: The Missing Manual by Preston Gralla • Office 2011 for Macintosh: The Missing Manual by Chris Grover • Office 2013: The Missing Manual by Nancy Conner and Matthew MacDonald • OS X Mavericks: The Missing Manual by David Pogue • OS X Yosemite: The Missing Manual by David Pogue • Personal Investing: The Missing Manual by Bonnie Biafore • Photoshop CS6: The Missing Manual by Lesa Snider • Photoshop CC: The Missing Manual, Second Edition by Lesa Snider • Photoshop Elements 13: The Missing Manual by Barbara Brundage • PHP & MySQL: The Missing Manual, Second Edition by Brett McLaughlin • QuickBooks 2015: The Missing Manual by Bonnie Biafore • Switching to the Mac: The Missing Manual, Mavericks Edition by David Pogue • Windows 7: The Missing Manual by David Pogue • Windows 8: The Missing Manual by David Pogue • WordPress: The Missing Manual, Second Edition by Matthew MacDonald • Your Body: The Missing Manual by Matthew MacDonald • Your Brain: The Missing Manual by Matthew MacDonald • Your Money: The Missing Manual by J.D. Roth For a full list of all Missing Manuals in print, go to www.missingmanuals.com/ library.html. THE MISSING CREDITS xi Introduction C ascading Style Sheets—CSS for short—give you creative control over the layout and design of your web pages. With CSS, dressing up your site’s text with eye-catching headlines, drop caps, and borders is just the beginning. You can also arrange images with precision, create columns and banners, and highlight your links with dynamic rollover effects. You can even make elements fade in or out of view, move objects around the page, or make a button slowly change colors when a visitor mouses over it. Anything that can do all that must be pretty complicated, right? Au contraire! The whole idea behind CSS is to streamline the process of styling web pages. In the next few pages, you’ll learn about the basics of CSS. What Is CSS? CSS is a styling language. You use it to make HTML—the fundamental language of all web pages—look good. Well, hopefully, you’ll use CSS to make your web pages look better than good. After you read this book, you’ll be able to make your web pages beautiful, functional, and easy to use. Think of HTML as the basic structure of your content, and CSS as a designer who takes your plain HTML and spruces it up with a fancy font, a border with rounded corners, or a bright red background. But before you start learning about CSS, you need to understand HTML. xiii WHAT YOU NEED TO KNOW What You Need to Know This book assumes you’ve already got some knowledge of HTML. Perhaps you’ve built a site or two (or at least a page or two) and have some familiarity with the sea of tags—,

,

, —that make up the Hypertext Markup Language. CSS can’t do anything without HTML, so you need to know how to create a web page by using basic HTML. If you’ve used HTML in the past to create web pages, but feel like your knowledge is a bit rusty, the next section provides a basic refresher.  TIP  If you’re just getting your feet wet learning HTML, then check out these free online tutorials: HTML Dog (www.htmldog.com/guides/htmlbeginner) and W3Schools (www.w3schools.com/html). If you’re a printed-page fan, then you may want to pick up a copy of HTML5: The Missing Manual, Third Edition or Head First HTML and CSS, Second Edition (both O’Reilly). HTML: The Barebones Structure HTML (Hypertext Markup Language) uses simple commands called tags to define the various parts of a web page. For example, this HTML code creates a simple web page: Hey, I am the title of this web page

Hey, I am a paragraph on this web page.

It may not be exciting, but this example has all the basic elements a web page needs. You’ll notice something called a doctype declaration at the very beginning of the code, followed by (with the brackets), a head, a body, and some stuff—the actual page contents—inside the body, ending in a final . Document Types All web pages begin with a doctype—a line of code that identifies what flavor of HTML you used to write the page. Two doctypes have been used for years—HTML 4.01 and XHTML 1.0—and each of those doctypes has two styles: strict and transitional. For example, the HTML 4.01 transitional doctype looks like the following (the other doctypes for HTML 4.01 and XHTML 1.0 look similar): xiv CSS: THE MISSING MANUAL HOW HTML TAGS WORK  NOTE  For examples of all various doctypes, visit www.webstandards.org/learn/reference/templates. If you look at the code for the sample HTML page in this section, you’ll see that it uses a much more succinct doctype: That’s the HTML5 doctype. HTML5 is easier to use and more streamlined than its predecessors. This book uses the HTML5 doctype, which is supported by every popular browser (even the old Internet Explorer 6). There’s no reason to use any doctype other than the simple HTML5 doctype.  NOTE  Just because the HTML doctype works in older browsers doesn’t mean that those browsers understand all HTML5 tags or features. Internet Explorer 8 and earlier, for example, don’t recognize the new HTML5 tags. To style tags with CSS for those versions of IE, you have to employ a little JavaScript. You’ll learn how to get older browsers up to speed in the box on page 12. The most important thing about a doctype, however, is to always use one. Without it, your pages will look different depending on your visitor’s browser, since browsers display CSS differently if they don’t have a doctype for guidance. Each doctype requires you to write your HTML in a certain way. For example, the tag for a line break looks like this in HTML 4.01:
But in XHTML, it looks like this:
And there’s another advantage of HTML5: It accepts either one. How HTML Tags Work In the simple HTML example on page XIV, as in the HTML code of any web page, most commands appear in pairs that surround a block of text or other commands. Sandwiched between brackets, these tags are instructions that tell a web browser how to display the web page. Tags are the “markup” part of the Hypertext Markup Language. The starting (opening) tag of each pair tells the browser where the instruction begins, and the ending tag tells it where the instruction ends. Ending or closing tags always include a forward slash (/) after the first bracket symbol (<).  xv HOW HTML TAGS WORK On any web page, you’ll usually find at least these four elements: • The first line of a web page is the DOCTYPE declaration, discussed in the previous section. • The tag appears once at the beginning of a web page and again (with an added forward slash) at the end: . This tag tells a web browser that the information contained in this document is written in HTML, as opposed to some other language. All the contents of a page, including other tags, appear between the opening and closing tags. If you were to think of a web page as a tree, the tag would be its root. Springing from the trunk are two branches that represent the two main parts of any web page: the head and the body. • The head of a web page contains the title of the page (“Izzie’s Mail-Order Pencils”). It may also include other, invisible information, like a page description, that browsers and search engines use. You surround the head section with opening and closing tags. In addition, the head section can include information that browsers use to format the page’s HTML and to add interactivity. As you’ll see, the section can contain CSS code (like the kind you’ll learn to write in this book) or a link to another file containing CSS information. • The body, as set apart by its surrounding tags, contains all the content that appears inside a browser window—headlines, text, pictures, and so on. Within the tag, you commonly find tags like these: • You tell a web browser where a paragraph of text begins with a

(opening paragraph tag), and where it ends with a

(closing paragraph tag). • The tag marks text as important. When you surround some text with it and its partner tag, , you get boldface type. The HTML snippet Warning! tells a web browser to strongly emphasize the word “Warning!” • The tag, or anchor tag, creates a hyperlink in a web page. When clicked, a hyperlink—or link—can lead anywhere on the Web. You tell the browser where the link points by putting a web address inside the tags. For instance, you can type Click here!. The browser knows that when your visitor clicks the words “Click here!” it should go to the Missing Manual website. The href part of the tag is called an attribute, and the URL (the Uniform Resource Locator, or web address) is the value. In this example, http://www.missingmanuals.com is the value of the href attribute. xvi CSS: THE MISSING MANUAL SOFTWARE FOR CSS HTML5: More Tags to Choose From HTML5—the current version of HTML—has been around for years now. Sometimes you’ll hear the name used to describe things other than HTML tags, like local storage (a way to save data from a website to a visitor’s computer), geolocation (a way to check where a visitor is in the world), and drawing to the web page using WebGL. Strictly speaking, those technologies aren’t part of HTML, but they’re new browser features that came onto the scene along with HTML5. In this book, the term HTML5 always refers to the HTML5 doctype as well as the new tags introduced as part of the HTML5 standard. HTML5 isn’t radically different from its predecessors—it was created to make sure the Web continues to work the way it always has. Most of the basics of HTML are the same as they’ve always been; HTML5 adds a few new elements meant to support the way web designers currently build websites. For example, in HTML5, the
tag contains the content you usually find at the top of a page, such as a logo and sitewide navigation links; the new