Stylin'!

THIRD EDITION CSS Pocket Reference Eric A. Meyer Beijing • Cambridge • Farnham • Köln • Paris • Sebastopol • Taipei • Tokyo CSS™ Pocket Reference, Third Edition by Eric A. Meyer Copyright © 2008 O’Reilly 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 (safari.oreilly.com). For more information, contact our corporate/ institutional sales department: (800) 998-9938 orcorporate@oreilly.com. Editor: Tatiana Apandi Cover Designer: Karen Montgomery Production Editor: Loranah Dimant Interior Designer: David Futato Proofreader: Loranah Dimant Illustrator: Jessamyn Read Indexer: Reg Aubry Printing History: May 2001: First Edition. July 2004: Second Edition. October 2007: Third Edition. NutshellHandbook,theNutshellHandbooklogo,andtheO’Reillylogoare registered trademarks of O’Reilly Media, Inc. ThePocket Reference series designations,CSSPocketReference,ThirdEdition,theimageofsalmon,and related trade dress are trademarks of O’Reilly Media, Inc. Many of the designations used by manufacturers and sellers to distinguish theirproductsareclaimedastrademarks.Wherethosedesignationsappear 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 publisherandauthorassumenoresponsibilityforerrorsoromissions,orfor damages resulting from the use of the information contained herein. ISBN-10: 0-596-51505-7 ISBN-13: 978-0-596-51505-8 [TM] Contents Conventions Used in This Book 1 Adding Styles to HTML and XHTML 2 Rule Structure 5 Style Precedence 6 Element Classification 9 Element Display Roles 10 Basic Visual Layout 11 Floating Rules 14 Positioning Rules 15 Table Layout 21 Values 28 Selectors 34 Pseudo-Classes and Pseudo-Elements 41 Property Reference 48 Tables 126 Paged Media 131 iii Dropped from CSS2.1 135 Visual Styles 136 Paged Media 138 Aural Styles 140 Index 155 iv | Contents CSS Pocket Reference Cascading Style Sheets (CSS) is the W3C standard for the visualpresentationofwebpages(althoughitcanbeusedin other settings as well). After a short introduction to the key conceptsofCSS,thispocketreferenceprovidesanalphabeti- calreferencetoallCSS2.1selectors,followedbyanalphabet- ical reference to all CSS2.1 properties. Conventions Used in This Book The following typographical conventions are used in this book: Italic Usedtoindicatenewterms,URLs,filenames,fileexten- sions, directories, commands and options, and program names.Forexample,apathinthefilesystemwillappear asC:\windows\system. Constant width Used to show the contents of files or the output from commands. Formoreinformation,visitO’Reilly’swebsiteforthisbook, whereexamples,errata,andanyplansforfutureeditionsare listed: http://www.oreilly.com/catalog/9780596515058 1 Safari® Books Online When you see a Safari® Books Online icononthecoverofyourfavoritetechnol- ogy book, that means the book is avail- ableonlinethroughtheO’ReillyNetwork Safari Bookshelf. Safari offers a solution that’s better than e-books. It’s a vir- tual library that lets you easily search thousands of top tech books,cutandpastecodesamples,downloadchapters,and find quick answers when you need the most accurate, cur- rent information. Try it for free athttp://safari.oreilly.com. Adding Styles to HTML and XHTML Stylescanbeappliedtodocumentsinthreedistinctways,as discussed in the following sections. Inline Styles In HTML and XHTML, style information can be specified foranindividualelementviathestyleattribute.Thevalueof a style attribute is a declaration block (see the upcoming section “Rule Structure”) without the curly braces:

Look out! This text is alarmingly presented!

Note that, as of this writing, a full style sheet cannot be placed into a style attribute. Only the content of a single declarationblockcanbeusedasastyleattributevalue.For example,itisnotpossibletoplacehoverstyles(using:hover) in astyle attribute, nor can one use@import in this context. Although typical XML document languages (e.g., XHTML 1.0,XHTML1.1,andSVG)supportthestyleattribute,itis unlikely that all XML languages will support a similar capa- bility. Due to this and the fact that it encourages poor authoring practices, authors are generally discouraged from using thestyle attribute. 2 | CSS Pocket Reference Embedded Style Sheets A style sheet can be embedded at the top of an HTML or XHTML document using the style element, which must appear within thehead element: Stylin'! ... XMLlanguagesmayormaynotprovideanequivalentcapa- bility; always check the language DTD to be certain. External Style Sheets Stylescanbelistedinaseparatefile.Theprimaryadvantage to a separate file is that by collecting commonly used styles inasinglefile,allpagesusingthatstylesheetcanbeupdated byeditingasinglestylesheet.Anotherkeyadvantageisthat externalstylesheetsarecached,whichcanhelpreduceband- widthusage.Anexternalstylesheetcanbereferencedinone of the following three ways: @import directive One or more @import directives can be placed at the begin- ningofanystylesheet.ForHTMLandXHTMLdocuments, this would be done within an embedded style sheet: My Document Adding Styles to HTML and XHTML | 3 Note that @import directives can appear at the top (and, according to the specification, only at the top) of any style sheet. Thus, one style sheet could import another, which in turn would import a third. link element InHTMLandXHTMLdocuments,thelinkelementcanbe used to associate a style sheet with a document. Multiple linkelementsarepermitted.Themediaattributecanbeused to restrict a style sheet to one or more media: A Document Itisalsopossibletolinktoalternatestylesheets.Ifalternate style sheets are supplied, it is up to the user agent (or the author) to provide a means for the user to select one of the alternates: A Document As of this writing, most or all known user agents load all linked style sheets, including the alternate style sheets, regardless of whether the user ever implements them. This can have implications for bandwidth use and server load. 4 | CSS Pocket Reference

CSS Pocket Reference: Visual Presentation for the Web

Similar CSS Pocket Reference: Visual Presentation for the Web