class="bi x0 y0 w0 h1"
Download at Boykma.Com
CSS
The book that
should have been
in the box
®
THE MISSING MANUAL
Download at Boykma.Com
Download at Boykma.Com
CSS
THE
MISSING
MANUAL
®
Second Edition
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
Printing History:
August 2006: First Edition.
August 2009: Second Edition.
Nutshell Handbook, the Nutshell Handbook logo, the O’Reilly logo, and “The book that should have been

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
Download at Boykma.Com
vi CSS: The Missing Manual
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

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

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
Download at Boykma.Com
Table of Contents ix
Chapter 9: Sprucing Up Your Site’s Navigation 225
Selecting Which Links to Style 225
Understanding Link States 226
Targeting Particular Links 227
Styling Links 228
Underlining Links 229
Creating a Button 231
Using Graphics 233
Building Navigation Bars 235
Using Unordered Lists 235

Part Three: CSS Page Layout
Chapter 11: Introducing CSS Layout 299
Types of Web Page Layouts 299
How CSS Layout Works 301
The Mighty <div> Tag 302
Techniques for CSS Layout 303
Layout Strategies 304
Start with Your Content 304
Mock Up Your Design 305
Identify the Boxes 305
Go with the Flow 306
Remember Background Images 306
Pieces of a Puzzle 308
Layering Elements 308
Don’t Forget Margins and Padding 309
Chapter 12: Building Float-Based Layouts 311
Applying Floats to Your Layouts 315
Floating All Columns 315
Floats Within Floats 317
Using Negative Margins to Position Elements 318
Overcoming Float Problems 323
Clearing and Containing Floats 323
Creating Full-Height Columns 328
Preventing Float Drops 330
Handling Internet Explorer 6 Bugs 333
Double-Margin Bug 333
3-Pixel Gaps 335
Other IE Problems 337
Tutorial: Multiple-Column Layouts 338
Structuring the HTML 338

Specifying the Media Type for an External Style Sheet 398
Specifying the Media Type Within a Style Sheet 398
Creating Print Style Sheets 399
Using !important to Override Onscreen Styling 400
Reworking Text Styles 400
Styling Backgrounds for Print 402
Hiding Unwanted Page Areas 403
Adding Page Breaks for Printing 405
Tutorial: Building a Print Style Sheet 406
Remove Unneeded Page Elements 406
Adjusting the Layout 409
Reformatting the Text 411
Displaying URLs 412
Chapter 15: Improving Your
CSS Habits 415
Adding Comments 415
Organizing Styles and Style Sheets 416
Name Styles Clearly 417
Use Multiple Classes to Save Time 418
Organize Styles by Grouping 420
Using Multiple Style Sheets 421
Download at Boykma.Com
xii CSS: The Missing Manual
Eliminating Browser Style Interference 423
Using Descendent Selectors 427
Compartmentalize Your Pages 428
Identify the Body 429
Managing Internet Explorer Hacks 432
Design for Contemporary Browsers First 433
Isolate CSS for IE with Conditional Comments 433

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: (If you’re
seeking technical help, however, please refer to the sources listed in Appendix C.)
About the Creative Team
Nan Barber (editor) has worked with the Missing Manual series since the previous
millennium. She lives in Massachusetts with her husband and G4 Macintosh.
Email:
Nellie McKesson (production editor) lives in Brighton, Mass., where she spends
her free time playing with her band Dr. & Mrs. Van der Trampp (http://myspace.
com/drmrsvandertrampp) and making t-shirts for her friends (http://
mattsaundersbynellie.etsy.com). Email:
Marcia Simmons (copy editor) is a writer and editor living in the San Francisco
Bay Area. In addition to covering technology and cocktail culture, she has a per-
sonal blog at www.smartkitty.org.
Angela Howard (indexer) has been indexing for over 10 years, mostly for com-
puter books, but occasionally for books on other topics such as travel, alternative
medicine, and leopard geckos. She lives in California with her husband, daughter,
and two cats.
Download at Boykma.Com
CSS: The Missing Manual, eMatter Edition
Copyright © 2009 O’Reilly & Associates, Inc. All rights reserved.
xiv CSS: The Missing Manual
Tony Ruscoe (technical reviewer) is a web developer living in Sheffield, England.

Copyright © 2009 O’Reilly & Associates, Inc. All rights reserved.
The Missing Credits
xv
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 fea-
tures a handcrafted index; cross-references to specific pages (not just chapters);
and RepKover, a detached-spine binding that lets the book lie perfectly flat with-
out the assistance of weights or cinder blocks.
Recent and upcoming titles include:
Access 2007: The Missing Manual by Matthew MacDonald
AppleScript: The Missing Manual by Adam Goldstein
AppleWorks 6: The Missing Manual by Jim Elferdink and David Reynolds
Creating a Web Site: The Missing Manual by Matthew MacDonald
David Pogue’s Digital Photography: The Missing Manual by David Pogue
Dreamweaver 8: The Missing Manual by David Sawyer McFarland
Dreamweaver CS3: The Missing Manual by David Sawyer McFarland
Dreamweaver CS4: The Missing Manual by David Sawyer McFarland
eBay: The Missing Manual by Nancy Conner
Excel 2003: The Missing Manual by Matthew MacDonald
Excel 2007: The Missing Manual by Matthew MacDonald
Facebook: The Missing Manual by E.A. Vander Veer
Google SketchUp: The Missing Manual by Chris Grover
FileMaker Pro 9: The Missing Manual by Geoff Coffey and Susan Prosser
FileMaker Pro 10: The Missing Manual by Susan Prosser and Geoff Coffey
Flash 8: The Missing Manual by E.A. Vander Veer
Flash CS3: The Missing Manual by E.A. Vander Veer and Chris Grover
Flash CS4: The Missing Manual by Chris Grover with E.A. Vander Veer
FrontPage 2003: The Missing Manual by Jessica Mantaro
Google Apps: The Missing Manual by Nancy Conner

QuickBooks 2010: The Missing Manual by Bonnie Biafore
Quicken 2008: The Missing Manual by Bonnie Biafore
Quicken 2009: The Missing Manual by Bonnie Biafore
Switching to the Mac: The Missing Manual, Tiger Edition by David Pogue and
Adam Goldstein
Switching to the Mac: The Missing Manual, Leopard Edition by David Pogue
Wikipedia: The Missing Manual by John Broughton
Windows XP Home Edition: The Missing Manual, Second Edition by David Pogue
Download at Boykma.Com
CSS: The Missing Manual, eMatter Edition
Copyright © 2009 O’Reilly & Associates, Inc. All rights reserved.
The Missing Credits
xvii
Windows XP Pro: The Missing Manual, Second Edition by David Pogue, Craig
Zacker, and Linda Zacker
Windows Vista: The Missing Manual by David Pogue
Windows Vista for Starters: The Missing Manual by David Pogue
Word 2007: The Missing Manual by Chris Grover
Your Body: The Missing Manual by Matthew MacDonald
Your Brain: The Missing Manual by Matthew MacDonald
Download at Boykma.Com
CSS: The Missing Manual, eMatter Edition
Copyright © 2009 O’Reilly & Associates, Inc. All rights reserved.
Download at Boykma.Com
1
Introduction
Cascading Style Sheets—CSS for short—give you creative control over the layout
and design of your web pages. Using them, you can dress up your text with eye–
catching headings, drop caps, and borders, just like the ones you see in glossy mag-
azines. You can also arrange images with precision, create columns and banners,

The Benefits of CSS
Before CSS, web designers were limited to the layout and styling options of HTML.
And if you surfed the Web in 1995, then you understand the emphasis on limited.
HTML still forms the foundation of all pages on the World Wide Web, but it’s
simply not a design tool. Sure, HTML provides basic formatting options for text,
images, tables, and other web page elements, and patient, meticulous webmasters
can make pages look pretty good using only HTML. But the result is often slug-
gish web pages laden with clunky code.
CSS, in contrast, offers the following advantages:
• Style sheets offer far more formatting choices than HTML. With CSS, you can
format paragraphs as they appear in a magazine or newspaper (the first line
indented and no space between each paragraph, for example) and control the
leading (the space between lines of type in a paragraph).
• When you use CSS to add a background image to a page, you get to decide
whether and how it tiles (repeats). HTML can’t even begin to do that.
• Even better, CSS styles take up much less space than HTML’s formatting
options, such as the much-hated <font> tag. You can usually trim a lot of kilo-
bytes from text-heavy web pages using CSS. As a result, your pages look great
and load faster.
• Style sheets also make updating your site easier. You can collect all of your styles
into a single external style sheet that’s linked to every page in your site. Then,
when you edit a style, that change immediately ripples through your site wher-
ever that style appears. You can completely change the appearance of a site just
by editing a single style sheet.
Note: HTML is so long in the tooth design-wise that the World Wide Web Consortium (W3C), the orga-
nization responsible for defining standards for the Web, has already deprecated (phased out) many HTML
formatting tags (the <font> tag, for example). (For a list of other obsolete tags, see www.codehelp.co.uk/
html/deprecated.html.)
Download at Boykma.Com
Introduction 3

How HTML Tags Work
In this simple example, as in the HTML code of any web page you look at, you’ll
notice that 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.
Download at Boykma.Com
4 CSS: The Missing Manual
Introduction
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 (<).
For a web page to work, you must include at least these four elements:
• The first line of a web page is the DOCTYPE declaration, which isn’t actually an
HTML tag. Instead, this line tells the web browser what type of HTML the page
uses. There are several different types of HTML, including the XML-based
XHTML (discussed in the next section). You can leave out the DOCTYPE
declaration, but your web site will look worse for it. As you’ll learn on page 26,
having a doctype is an important requirement to make sure your CSS designs
work in all browsers.
• The <html> tag appears once at the beginning of a web page and again (with
an added 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 lan-
guage. All of the contents of a page, including other tags, appear between the
opening and closing <html> tags.
If you were to think of a web page as a tree, the <html> tag would be its roots.
Springing from the trunk are two branches that represent the two main parts of
any web page: the head and the body.
• The web page’s head, surrounded by opening and closing <head> tags, con-
tains the title of the page. It may also provide other, invisible information (such

<p> tag without the closing </p> to create a paragraph). While this flexibility may
make page writing easier, it also makes life more difficult for web browsers, PDAs,
and other places you may want to display your pages.
Enter XHTML 1.0—an improved form of HTML that’s coming into widespread
use. If you’re used to using HTML, don’t worry—XHTML isn’t a revolutionary
new language that takes years to learn. It’s basically HTML, but was created as an
XML-based language. Like HTML, XML is a tag-based language that lets you orga-
nize data in a clear, easy-to-understand way so different computers, operating sys-
tems, and programs can quickly and easily exchange data. However, unlike HTML,
XML isn’t limited to a handful of tags. In fact, XML provides a set of rules for
defining your own tags. In addition to forming the basis of XHTML, XML can cre-
ate everything from RSS feeds to iTunes playlists and then some.
The hot debate is whether HTML 4.01 or XHTML 1.0 is the best approach. Judging
by some of the online discussions, you’d think HTML and XHTML are com-
pletely different languages, which they aren’t. You can build snazzy and functional
websites with HTML 4.01 now, and they’ll continue to work for years in the future.
If you continue using HTML, be sure to follow the guidelines in Chapter 1. In par-
ticular, you must give your HTML page the correct doctype (page 26), or your CSS
will fall apart in certain browsers. Also, you must validate your page (page 24) to
ensure there aren’t any typos or other mistakes that can mess up how your HTML
displays. You need to do those same things for XHTML, but XHTML is stricter in
that it enforces rules that make sure the page works. For example, HTML doesn’t
absolutely require a doctype; XHTML does.
Download at Boykma.Com