CSS Pocket Reference: Visual Presentation for the Web

171 Pages·0.651 MB·English

by  Meyer Eric A.

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: [phone] [e-mail].
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:
<p style="color: red; background: yellow;">Look out!
This text is alarmingly presented!</p>
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:
<html><head><title>Stylin'!</title>
<style type="text/css">
h1 {color: purple;}
p {font-size: smaller; color: gray;}
</style>
</head>
...
</html>
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:
<head>
<title>My Document</title>
<style type="text/css">
@import url(site.css);
@import url(navbar.css);
@import url(footer.css);
body {background: yellow;}
</style>
</head>
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:
<head>
<title>A Document</title>
<link rel="stylesheet" type="text/css" href="basic.css"
media="all">
<link rel="stylesheet" type="text/css" href="web.css"
media="screen">
<link rel="stylesheet" type="text/css" href="paper.css"
media="print">
</head>
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:
<head>
<title>A Document</title>
<link rel="stylesheet" type="text/css" href="basic.css">
<link rel="alternate stylesheet" title="Classic"
type="text/css" href="oldschool.css">
<link rel="alternate stylesheet" title="Futuristic"
type="text/css" href="3000ad.css">
</head>
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