Book 2 - CSS The Missing Manual.pdf - Download from Wow...

This preview shows page 1 out of 650 pages.

Unformatted text preview: Download from Wow! eBook < ; CSS3 Third Edition The book that should have been in the box® David Sawyer McFarland Beijing | Cambridge | Farnham | Köln | Sebastopol | Tokyo CSS3: The Missing Manual, Third Edition by David Sawyer McFarland Copyright © 2013 Sawyer McFarland Media, Inc. 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 ( ). For more information, contact our corporate/institutional sales department: (800) 998-9938 or [email protected] August 2006: First Edition. August 2009: Second Edition. December 2012: Third Edition. Revision History for the Third Edition: 2012-12-07 First release See 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-449-32594-7 [V] Contents The Missing Credits. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . vii Introduction. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 Part One: Chapter 1: CSS Basics HTML for CSS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17 HTML: Past and Present . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17 Writing HTML for CSS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20 The Importance of the Doctype . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30 Making Sure Internet Explorer Is Up-to-Date. . . . . . . . . . . . . . . . . . . . . . . . . . 32 Chapter 2: Creating Styles and Style Sheets. . . . . . . . . . . . . . . . . . . . . . . . . . . 35 Anatomy of a Style. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35 Understanding Style Sheets. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38 Internal Style Sheets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40 External Style Sheets. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41 Tutorial: Creating Your First Styles. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43 Chapter 3: Selectors: Identifying What to Style. . . . . . . . . . . . . . . . . . . . . . . 55 Tag Selectors: Page-Wide Styling. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56 Class Selectors: Pinpoint Control . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57 ID Selectors: Specific Page Elements. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60 Styling Groups of Tags. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62 Styling Tags Within Tags. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63 Pseudo-Classes and Pseudo-Elements. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68 Attribute Selectors. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72 Child Selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74 Siblings. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79 The :not( ) Selector. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80 Tutorial: Selector Sampler. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81 Chapter 4: Saving Time with Style Inheritance. . . . . . . . . . . . . . . . . . . . . . . . 93 What Is Inheritance? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93 How Inheritance Streamlines Style Sheets . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95 The Limits of Inheritance. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95 Tutorial: Inheritance. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97 iii Chapter 5: Managing Multiple Styles: The Cascade. . . . . . . . . . . . . . . . . . . 103 How Styles Cascade. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104 Specificity: Which Style Wins. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108 Controlling the Cascade. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111 Tutorial: The Cascade in Action. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117 Part Two: Chapter 6: Applied CSS Formatting Text.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127 Using Fonts. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127 Using Web Fonts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132 Discovering Google Web Fonts. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146 Adding Color to Text. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154 Changing Font Size . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157 Formatting Words and Letters . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 162 Adding Text Shadow. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 166 Formatting Entire Paragraphs. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 167 Styling Lists. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 173 Tutorial: Text Formatting in Action. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178 Chapter 7: Margins, Padding, and Borders. . . . . . . . . . . . . . . . . . . . . . . . . . . 193 Understanding the Box Model. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193 Controling Space with Margins and Padding . . . . . . . . . . . . . . . . . . . . . . . . . 195 Adding Borders. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 202 Coloring the Background . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 206 Creating Rounded Corners. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 207 Adding Drop Shadows. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210 Determining Height and Width. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212 Wrapping Content with Floating Elements. . . . . . . . . . . . . . . . . . . . . . . . . . . 220 Tutorial: Margins, Backgrounds, and Borders. . . . . . . . . . . . . . . . . . . . . . . . . 225 Chapter 8: Adding Graphics to Web Pages. . . . . . . . . . . . . . . . . . . . . . . . . . . 239 Discovering CSS and the <img> Tag. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 239 Adding Background Images. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 240 Controlling Repetition. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 244 Positioning a Background Image. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 245 Using Background Property Shorthand. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 255 Using Multiple Background Images. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .257 Utilizing Gradient Backgrounds. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 259 Applying Easy Gradients with Colorzilla. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 269 Tutorial: Enhancing Images. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 272 Tutorial: Creating a Photo Gallery. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 278 Tutorial: Using Background Images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 283 iv Contents Chapter 9: Sprucing Up Your Site’s Navigation. . . . . . . . . . . . . . . . . . . . . . . 293 Selecting Which Links to Style. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 293 Styling Links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 297 Building Navigation Bars. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 303 CSS-Style Preloading Rollovers. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 313 Styling Particular Types of Links. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 315 Tutorial: Styling Links. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 318 Tutorial: Creating a Navigation Bar. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 324 Chapter 10: CSS Transforms, Transitions, and Animations. . . . . . . . . . . . . 335 Transforms. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 335 Transitions. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 345 Animations. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 354 Tutorial. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 366 Chapter 11: Formatting Tables and Forms. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 375 Using Tables the Right Way. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 375 Styling Tables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 378 Styling Forms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 384 Tutorial: Styling a Table. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 390 Tutorial: Styling a Form. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 395 Part Three: CSS Page Layout Chapter 12: Introducing CSS Layout. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 405 Types of Web Page Layouts. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 405 How CSS Layout Works. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 408 Layout Strategies. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 412 Chapter 13: Building Float-Based Layouts.. . . . . . . . . . . . . . . . . . . . . . . . . . . . 417 Applying Floats to Your Layouts. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 421 Overcoming Float Problems. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 425 Tutorial: Multiple Column Layouts. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 440 Chapter 14: Responsive Web Design. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 453 Responsive Web Design Basics. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 454 Setting Up a Web Page for RWD. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 455 Media Queries. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 457 Flexible Grids. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 465 Fluid Images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 470 Responsive Web Design Tutorial. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 474 Contents v Chapter 15: Positioning Elements on a Web Page. . . . . . . . . . . . . . . . . . . . . 487 How Positioning Properties Work. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 488 Powerful Positioning Strategies. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 502 Tutorial: Positioning Page Elements. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 507 Part Four: Advanced CSS Chapter 16: CSS for the Printed Page. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 519 How Media Style Sheets Work. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 519 How to Add Media Style Sheets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 522 Creating Print Style Sheets. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 523 Tutorial: Building a Print Style Sheet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 530 Chapter 17: Improving Your CSS Habits. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 539 Adding Comments. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 539 Organizing Styles and Style Sheets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 541 Eliminating Browser Style Interference. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 548 Using Descendent Selectors. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 553 Trying Different CSS for Internet Explorer . . . . . . . . . . . . . . . . . . . . . . . . . . . 558 Part Five: Appendixes Appendix A: CSS Property Reference. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 563 CSS Values. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 563 Text Properties. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 567 List Properties. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 572 Padding, Borders, and Margins. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 573 Backgrounds. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 579 Page Layout Properties. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 582 Animation, Transform, and Transition Properties. . . . . . . . . . . . . . . . . . . . . . 588 Table Properties. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 593 Miscellaneous Properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 595 Appendix B: CSS Resources. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 599 References. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 599 CSS Help. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 600 CSS Tips, Tricks, and Advice. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 600 CSS Navigation. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 601 CSS Layout. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 602 Showcase Sites. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 603 CSS Books. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 604 CSS Software. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 604 Index. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 607 vi Contents The Missing Credits About the Author David Sawyer McFarland is president of Sawyer McFarland Media, Inc., a web development and training company in Portland, Oregon. He’s been building websites since 1995, when he designed his first website: an online magazine for communication professionals. He’s served as the webmaster at the University of California at Berkeley and the Berkeley Multimedia Research Center, and he has helped build, design, and program numerous websites for clients including Macworld.com. In addition to building websites, David is also a writer, trainer, and instructor. He’s taught web design at the UC Berkeley Graduate School of Journalism, the Center for Electronic Art, the Academy of Art College, Ex’Pressions Center for New Media, and the Art Institute of Portland. He currently teaches in the Multimedia Program at Portland State University. He’s written articles about web design for Practical Web Design, Macworld magazine, and CreativePro.com. David is also the author of Dreamweaver: The Missing Manual and JavaScript: The Missing Manual. He welcomes feedback about this book by email: [email protected] (If you’re seeking technical help, however, please refer to the sources listed in Appendix B.) About the Creative Team Nan Barber (editor) has worked with the Missing Manual series since the previous century. She lives in Massachusetts with her husband and iMac. Email: [email protected] oreilly.com. Holly Bauer (production editor) lives in Ye Olde Cambridge, Mass., where she is an avid home cook, prolific DIYer, and mid-century modern design enthusiast. Email: [email protected] Nancy Reinhardt (proofreader) lives in the Midwest, where she enjoys summer weekends at the lake, boating, swimming, and reading voraciously. Nan is not only a freelance copyeditor and proofreader, but she’s also a published romance novelist. Check out her work at . Email: [email protected] Nancy A. Guenther (indexer) indexed this book on behalf of Potomac Indexing, LLC, an international indexing partnership at . She has been a full-time freelance indexer since 1983, specializing in computer software, American studies, and business. Her website is ​.bizland.com. The Missing Credits vii Daniel J. Quinn (technical reviewer) is a freelance web developer at DQuinn.net. For the past five years, he has worked as a senior UI engineer at award-winning digital agency Genuine Interactive, specializing in WordPress and content strategy for brands like Sam Adams, MassMutual, and Children’s Hospital Boston. Today, Daniel serves as web developer for Harvard University’s Digital Communications department. He regularly works with a team of local designers and can be reached at [email protected] Jason Arnold (technical reviewer) lives in Santa Rosa, California, with his wife and three daughters. He works at Healdsburg District Hospital as a Telemetry Technician and teaches Kenpo Karate to children. He is currently working toward his nursing degree at Santa Rosa Junior College. In his free time, he does Kenpo...
View Full Document

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture