Css The Missing Manual

CSS_%20The%20Missing%20Manual%20(en)

CSS%20(The%20Missing%20Manual%20-%204th%20Edition)%20-%20David%20Sawyer%20McFarland%20-%20O'Reilly

css-the-missing-manual

CSSTheMissingManual

css-the-missing-manual

User Manual: Pdf

Open the PDF directly: View PDF PDF.
Page Count: 718

DownloadCss-the-missing-manual
Open PDF In BrowserView PDF
“The Missing Manual series is simply the most intelligent and usable series of guidebooks…”
—KEVIN KELLY, CO-FOUNDER OF WIRED

CSS
4th
Edition

David Sawyer McFarland

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 corporate@oreilly.com.
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:

Applied CSS

CHAPTER 6:

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:
CHAPTER 12:

CSS Page Layout
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:
APPENDIX A:

Appendixes
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: nanbarber@
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: myarbrough@oreilly.com.
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: molly@mjibrower.com.
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: rstrauss@mchsi.com.
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 











tag to create columns of text and accurately place pictures and text on a page.
Unfortunately, since that tag was intended to display spreadsheet-like data—research results, train schedules, and so on—designers had to get creative by using
the 
 tag in unusual ways, sometimes nesting a table within a table within a
table to make their pages look good.

WRITING HTML
FOR CSS

Meanwhile, browser makers introduced new tags and attributes for the specific
purpose of making a page look better. The  tag, for example, let you specify
a font color, typeface, and one of seven different sizes. (If you’re keeping score at
home, that’s about 100 fewer sizes than you can get with, say, Microsoft Word.)
Finally, when designers couldn’t get exactly what they wanted, they often resorted
to using graphics. For example, they’d create a large graphic to capture the exact
font and layout for web page elements and then slice the Photoshop files into smaller
files and piece them back together inside tables to recreate the original design.
While all of the preceding techniques—using tags in creative ways, taking advantage
of design-specific tag attributes, and making extensive use of graphics—provide
design control over your pages, they also add a lot of additional HTML code. More
code makes your site more difficult to build and much slower for your visitors to
download.

HTML Present: Scaffolding for CSS
No matter what content your web page holds—the fishing season calendar, driving
directions to the nearest IKEA, or pictures from your kid’s birthday party—it’s the
page’s design that makes it look like either a professional enterprise or a part-timer’s
hobby. Good design enhances the message of your site, helps visitors find what
they’re looking for, and determines how the rest of the world sees your website.
That’s why web designers went through the contortions described in the previous
section to force HTML to look good. By taking on those design duties, CSS lets HTML
go back to doing what it does best—structuring content.
Using HTML to control the look of text and other web page elements is obsolete. Don’t
worry if HTML’s 
 tag is too big for your taste or bulleted lists aren’t spaced just
right. You can take care of that later using CSS. Instead, think of HTML as a method
of adding structure to the content you want up on the Web. Use HTML to organize
your content and CSS to make that content look great.

Writing HTML for CSS
If you’re new to web design, you may need some helpful hints to guide your forays
into HTML (and to steer clear of well-intentioned, but out-of-date HTML techniques).
Or if you’ve been building web pages for a while, you may have picked up a few bad
habits that you’re better off forgetting. The rest of this chapter introduces you to
some HTML-writing habits that will make your mom proud—and help you get the
most out of CSS.
Chapter 1: HTML and CSS

5

WRITING HTML
FOR CSS

Think Structure
HTML adds meaning to text by logically dividing it and identifying the role it plays on
the page: For example, the 
 tag is the most important introduction to a page’s
content. Other headers let you divide the content into less important, but related
sections. Just like this book, a web page needs a logical structure. Each chapter
in this book has a title (think 
) and several sections (think 
), which in turn
contain smaller subsections. Imagine how much harder it would be to read these
pages if the words just ran together as one long paragraph.
NOTE

For a tutorial on HTML, visit www.w3schools.com/html/html_intro.asp. For a quick list of all available
HTML tags, visit the detailed (but a bit technical) reference at the Mozilla Developer network: https://developer.
mozilla.org/en-US/docs/Web/HTML/Element.

HTML provides many other tags besides headers for marking up content to identify
its role. (After all, the M in HTML stands for markup.) Among the most popular are the

 tag for paragraphs of text and the 
 tag for page layout. Use tables only to display information
like spreadsheets, schedules, and charts. As you’ll see in Part Three, you can do
all your layout with CSS for much less time and code than the table-tag tango.
• Don’t abuse the 
 tag. If you grew up using the 
 tag to insert a line
break without creating a new paragraph, then you’re in for a treat. (Browsers
automatically—and sometimes infuriatingly—insert a bit of space between
paragraphs, including between headers and 
 tags. In the past, designers
used elaborate workarounds to avoid paragraph spacing they didn’t want, like
replacing a single 
 tag with a bunch of line breaks and using a  tag
to make the first line of the paragraph look like a headline.) Using CSS’s margin controls, you can easily set the amount of space you want to see between
paragraphs, headers, and other block-level elements.
NOTE In Chapter 5, you’ll learn about a technique called a “CSS Reset,” which eliminates the gaps browsers
normally insert between paragraphs and other tags (see page 109).

As a general rule, adding attributes to tags that set colors, borders, background
images, or alignment—including attributes that let you format a table’s colors, backgrounds, and borders—is pure old-school HTML. So is using alignment properties to
position images and center text in paragraphs and table cells. Instead, look to CSS
to control text placement (page 164), borders (page 194), backgrounds (page 231),
and image alignment (page 229).

14

CSS: THE MISSING MANUAL

WRITING HTML
FOR CSS
UP TO SPEED

Validate Your Web Pages
HTML follows certain rules: For example, the  tag
wraps around the other tags on a page, and the 
tag needs to appear within the <head> tag. It’s easy to forget
these rules or simply make a typo. Incorrect (or invalid, as the
pros would say) HTML causes problems like making your page
look different in different web browsers. More importantly,
even valid CSS may not work as expected with invalid HTML.
Fortunately, there are tools for checking whether the HTML in
your web pages is correctly written.

The easiest way to check—that is, validate —your pages is on
the W3C’s website at http://validator.w3.org (see Figure 1-4).
The W3C, or World Wide Web Consortium, is the organization
responsible for determining the standards for many Web
technologies and languages, including HTML and CSS. If the
W3C validator finds any errors in your page, it tells you what
they are.
The Web Developer extension for Chrome, Firefox, and Opera
( http://chrispederick.com/work/web-developer) provides a
quick way to test a page in the W3C validator.

FIGURE 1-4

The W3C HTML validator
located at http://validator.
w3.org lets you quickly
make sure the HTML in a
page is sound. You can
point the validator to an
already existing page on
the Web, upload an HTML
file from your computer,
or just paste the HTML of
a web page into a form
box and then click the
Check button.

Chapter 1: HTML and CSS

15

WRITING HTML
FOR CSS

Tips to Guide Your Way
It’s always good to have a map to get the lay of the land. If you’re still not sure how
to use HTML to create well-structured web pages, then here are a few tips to get
you started:
• Use headings to indicate the relative importance of text. Again, think outline.
When two headings have equal importance in the topic of your page, use the
same level header on both. If one is less important or a subtopic of the other,
then use the next-level header. For example, follow an <h2> with an <h3> tag
(see Figure 1-5). In general, it’s good to use headings in order and try not to
skip heading numbers. For example, don’t follow an <h2> tag with an <h5> tag.

FIGURE 1-5

Use the headline tags (<h1>, <h2>, and so on) as you would if
you were outlining a school report: Put them in order of importance, beginning with an <h1> tag, which should shout “Listen
up! This is what this whole page is about.”

• Use the <p> tag for paragraphs of text.
• Use unordered lists (<ul>) when you’ve got a list of several related items, such
as navigation links, headlines, or a set of tips like these.
• Use numbered lists (<ol>) to indicate steps in a process or define the order of a
set of items. The tutorials in this book are a good example, as is a list of rankings
like “Top 10 websites popular with monks.”
• To create a glossary of terms and their definitions or descriptions, use the <dl>
(definition list) tag in conjunction with the <dt> (definition term) and <dd> (definition description) tags. (For an example of how to use this combo, visit http://
htmldog.com/guides/html/intermediate/definitionlists/.)

16

CSS: THE MISSING MANUAL

• If you want to include a quotation like a snippet of text from another website,
a movie review, or just some wise saying of your grandfather’s, try the <blockquote> tag for long passages or the <q> tag to place a short quote within a
longer paragraph, like this:

THE
IMPORTANCE
OF THE
DOCTYPE

<p>Mark Twain is said to have written <q>The coldest winter I ever spent
was a summer in San Francisco</q>. Unfortunately, he never actually wrote
that famous quote.</p>

• Take advantage of obscure tags like the <cite> tag for referencing a book title,
newspaper article, or website, and the <address> tag to identify and supply
contact information for the author of a page (great for a copyright notice).
• As explained in full on page 3, steer clear of any tag or attribute aimed solely
at changing the appearance of a text or image. CSS, as you’ll see, can do it all.
• When there isn’t an HTML tag that fits the bill, but you want to identify an element on a page or a bunch of elements on a page so you can apply a distinctive
look, use the <div> and <span> tags (see page 7). You’ll get more advice on
how to use these in later chapters.
• Don’t overuse <div> tags. Some web designers think all they need are <div>
tags, ignoring tags that might be more appropriate. For example, to create a
navigation bar, you could add a <div> tag to a page and fill it with a bunch of
links. A better approach would be to use a bulleted list (<ul> tag), After all,
a navigation bar is really just a list of links. As discussed on page 8, HTML5
provides several new tags that can take the place of the <div> tag, like the
<article>, <section>, and <footer> tags. For a navigation bar, you could use
the HTML5 <nav> tag.
• Remember to close tags. The opening <p> tag needs its partner in crime (the
closing </p> tag), as do all other tags, except the few self-closers like <br> and
<img>.
• Validate your pages with the W3C validator (see Figure 1-4 and the box on page
15). Poorly written or typo-ridden HTML causes many weird browser errors.

The Importance of the Doctype
HTML follows certain rules. You tell a web browser which version of HTML you’re
using (and which rules you’re following) by including what’s called a doctype declaration at the beginning of a web page. This doctype declaration is the first line in
the HTML file, and defines what version of HTML you’re using (such as HTML5 or
HTML 4.01 Transitional).
If you mistype the doctype declaration or leave it out, you can throw most browsers
into an altered state called quirks mode. Quirks mode is browser manufacturers’ attempt to make their software behave like browsers did circa 1999 (in the Netscape 4
and Internet Explorer 5 days). If a modern browser encounters a page that’s missing
Chapter 1: HTML and CSS

17

THE
IMPORTANCE
OF THE
DOCTYPE

the correct doctype, then it thinks, “Gee, this page must have been written a long
time ago, in an HTML editor far, far away. I’ll pretend I’m a really old browser and
display the page just as one of those buggy old browsers would display it.” That’s
why, without a correct doctype, your lovingly CSS-styled web pages may not look
as they should, according to current standards. If you unwittingly view your web
page in quirks mode when checking it in a browser, you may end up trying to fix
display problems that are related to an incorrect doctype and not the incorrect use
of HTML or CSS.
NOTE For more (read: technical) information on quirks mode, visit www.quirksmode.org/css/quirksmode.
html and https://developer.mozilla.org/en-US/docs/Quirks_Mode_and_Standards_Mode.

Fortunately, it’s easy to get the doctype right. All you need to know is what version of
HTML you’re using. Almost everyone is using HTML5 now, and the doctype is simply:
<!doctype html>

Put this at the top of your HTML file and you’re good to go. If you’re still using older
versions of HTML or XHTML such as HTML 4.01 Transitional and XHTML 1.0 Transitional, then the doctype is a lot more convoluted.
If you’re using HTML 4.01 Transitional, for example, type the following doctype
declaration at the very beginning of every page you create:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.
w3.org/TR/html4/loose.dtd">

The doctype declaration for XHTML 1.0 Transitional is similar. It’s also necessary
to add a little code to the opening <html> tag that’s used to identify the file’s XML
type—in this case, it’s XHTML—like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.
w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

If this entire discussion is making your head ache and your eyes slowly shut, keep
your life simple by using the HTML5 doctype. It’s short, easy to remember, works
in all browsers, and what almost all new web pages use. You can use this doctype
even if you don’t touch any of the new HTML5 tags.
NOTE

Most visual web page tools like Dreamweaver add a doctype declaration whenever you create a new
web page, and many HTML-savvy text editors have shortcuts for adding doctypes.

18

CSS: THE MISSING MANUAL

HOW CSS
WORKS

How CSS Works
Now that you have a solid background on writing HTML for CSS, you’re ready for
what this book is all about. CSS is the styling language used to format HTML-based
web pages. While HTML provides the page’s structure, CSS works hand in hand with
the web browser to make HTML look good on screen.
For example, you might use HTML to turn a phrase into a top-level heading, indicating that it introduces the content on the rest of the page. You’d use CSS to format
that heading with, say, big and bold red type and position it 50 pixels from the left
edge of the window. In CSS, that text formatting is a style—a rule describing the appearance of a particular portion of a web page. A style sheet is a set of these styles.
You can create styles to work with any HTML tag. For example, you can create styles
specifically to format the images on a page. For instance, a style can align an image
along the page’s right edge, surround the image with a colorful border, and place a
50-pixel margin between the image and the surrounding text.
The web browser applies the styles you create to text, images, headings, and other
page elements. For example, you can create a style that applies to a single paragraph on your page to instantly change the text’s size, color, and font within that
paragraph. You can create styles that apply to specific HTML tags, so, for example,
a browser displays every first-level heading (<h1> tag) in your site in the same way,
no matter where those headings appear. You can even create styles that apply only
to specific tags that you’ve marked up in a special way in the HTML.
Creating styles is all about determining what you want to style (a single image, every
image, every other item in a list, and so on) and how you want that selected element
or elements to look. In fact, determining what you want to style is such a big topic,
Chapters 3, 4, and 5 of this book are devoted to the subject. All of the different ways
you can make page elements look is an even bigger topic, and is covered in Part Two.

Chapter 1: HTML and CSS

19

HOW CSS
WORKS
UP TO SPEED

The Different Flavors of CSS
Like operating systems and iPhone models, CSS spins off
new versions continuously (well, maybe not as frequently
as iPhones). CSS1, introduced in 1996, laid the groundwork
for Cascading Style Sheets. The basic structure of a style, the
selector concept (Chapter 3), and most of the CSS properties
in this book were all in that very first version.
CSS2 added new features, including the ability to target your
CSS to different printers, monitors, and other devices. CSS2
also added new selectors and the ability to precisely position
elements on a web page.
CSS2.1, which is the currently accepted standard and implemented in all browsers, incorporates all of CSS1, adds several
new properties, and corrects a few problems with the CSS2
guidelines. It wasn’t a radical change from version 2, and
most web browsers have adapted to the new rules just fine,
thank you.
However, CSS3 has been around (and parts of it implemented
in most browsers) for several years now. Unlike previous ver-

20

CSS: THE MISSING MANUAL

sions of CSS, CSS3 isn’t actually one single standard. As CSS has
grown in complexity, the W3C has split CSS up into separate
modules—the Selectors module, the Values and Units module,
the Box Alignment module, and so on. Since each module can
develop independently of the others, there isn’t any single
standard called “CSS3.” In fact, level 3 of the Selectors module
is complete, and work on level 4 is underway.
In other words, what’s known as CSS3 is really just a loose
collection of different modules at various states of completion. Browser manufacturers have already incorporated many
parts of these modules, but other modules aren’t supported in
many browsers. In the future, there won’t be any CSS4; there
will just be new versions of the different modules, each at a
different level of work.
For these reasons, this book covers the core CSS2.1 (which has
simply been rolled over into the various modules of CSS3), as
well as the most exciting, popular, and widely supported new
CSS properties.

CHAPTER

Creating Styles and
Style Sheets

2

E

ven the most complex and beautiful websites, like the one in Figure 2-1, start
with a single CSS style. As you add multiple styles and style sheets, you can develop fully formed websites that inspire designers and amaze visitors. Whether
you’re a CSS novice or a Style Sheet Samurai, you need to obey a few basic rules
about how to create styles and style sheets. In this chapter, you’ll start at square
one, learning the basics of creating and using styles and style sheets.
TIP Some people learn better by doing rather than reading. If you’d like to try your hand at creating styles
and style sheets first and then come back here to read up on what you just did, turn to page 27 for a hands-on
tutorial.

Anatomy of a Style
A single style defining the look of one element on a page is a pretty basic beast.
It’s essentially just a rule that tells a web browser how to format something on a
web page—turn a headline blue, draw a red border around a photo, or create a
150-pixel-wide sidebar box to hold a list of links. If a style could talk, it would say
something like, “Hey Browser, make this look like that.” A style is, in fact, made up
of two parts: the web page element that the browser formats (the selector) and
the actual formatting instructions (the declaration block). For example, a selector
can be a headline, a paragraph of text, a photo, and so on. Declaration blocks can
turn that text blue, add a red border around a paragraph, position the photo in the
center of the page—the possibilities are endless.

21

ANATOMY OF A
STYLE

FIGURE 2-1

Every web page, no matter how complex-looking,
is built using the basic
building blocks of CSS.
The body for this website
(www.freshbooks.com),
for example, includes a
simple style:
body {
font-family:
"Franklin-Book",
Helvetica, Arial,
sans-serif;
color: #222;
}

NOTE Technical types often follow the lead of the W3C and call CSS styles rules. This book uses the terms
“style” and “rule” interchangeably.

Of course, CSS styles can’t communicate in nice clear English like the previous paragraph. They have their own language. For example, to set a standard font color and
font size for all paragraphs on a web page, you’d write the following:
p { color: red; font-size: 1.5em; }

This style simply says, “Make the text in all paragraphs—marked with <p> tags—red
and 1.5 ems tall.” (An em is a unit of measurement that’s based on a browser’s normal
text size. More on that in Chapter 6.) As Figure 2-2 illustrates, even a simple style
like this example contains several components:
• Selector. As described earlier, the selector tells a web browser which element
or elements on a page to style—like a headline, paragraph, image, or link. In
Figure 2-2, the p selector refers to the <p> tag. This selector makes web browsers format all <p> tags using the formatting directions in this style. With the
wide range of selectors that CSS offers and a little creativity, you’ll be able to
pinpoint any item on a page and format it just the way you want. (The next
chapter covers selectors in depth.)

22

CSS: THE MISSING MANUAL

• Declaration Block. The code following the selector includes all the formatting
options you want to apply to the selector. The block begins with an opening
brace ({) and ends with a closing brace (}).

ANATOMY OF A
STYLE

• Declaration. Between the opening and closing braces of a declaration block,
you add one or more declarations, or formatting instructions. Every declaration
has two parts: a property and a value. A colon separates the property name
and its value, and the whole declaration ends with a semicolon.
• Property. CSS offers a wide range of formatting options, called properties. A
property is a word—or a few hyphenated words—indicating a certain style effect.
Most properties have straightforward names like font-size, margin-top, and
text-align. For example, the background-color property sets—you guessed
it—a background color. You’ll learn about oodles of CSS properties throughout
this book. You must add a colon after the property name to separate it from
the value.
TIP

Appendix A: CSS Property Reference (page 637) has a handy glossary of CSS properties.

• Value. Finally, you get to express your creative genius by assigning a value
to a CSS property—by making a background blue, red, purple, or chartreuse,
for example. As upcoming chapters explain, different CSS properties require
specific types of values—a color (like red, or #FF0000), a length (like 18px, 200%,
or 5em), a URL (like images/background.gif ), or a specific keyword (like top,
center, or bottom).

FIGURE 2-2

A style (or rule) is made of two main parts:
a selector, which tells web browsers what to
format, and a declaration block, which lists the
formatting instructions that the browsers use to
style the selector.

You don’t need to write a style on a single line, as pictured in Figure 2-2. Many
styles have multiple formatting properties, so you can make them easier to read by
breaking them up into multiple lines. For example, you may want to put the selector
and opening brace on the first line, each declaration on its own line, and the closing
brace by itself on the last line, like so:
p {
color: red;
font-size: 1.5em;
}

Web browsers ignore spaces and tabs, so feel free to add them to make your CSS
more readable. For example, it’s helpful to indent properties, with either a tab or a
Chapter 2: Creating Styles and Style Sheets

23

UNDERSTANDING
STYLE SHEETS

couple of spaces, to visibly separate the selector from the declarations, making it
easy to tell which is which. In addition, putting one space between the colon and the
property value is optional but adds to the readability of the style. In fact, you can
put as much white space between the two as you want. For example, color:red,
color: red, and color : red all work.
NOTE

Don’t forget to end each property/value pair with a semicolon:

color: red;

Leaving off that semicolon can trip up browsers, breaking your style sheet and ruining the look of your web page.
Don’t worry, this mistake is very common—just make sure you use a CSS validator, as described in the box on page 15.

Understanding Style Sheets
Of course, a single style won’t transform a web page into a work of art. It may make
your paragraphs red, but to infuse your websites with great design, you need many
different styles. A collection of CSS styles comprises a style sheet. A style sheet can
be one of two types—internal or external, depending on whether the style information is located in the web page itself or in a separate file linked to the web page.

Internal or External—How to Choose
Most of the time, external style sheets are the way to go, since they make building
web pages easier and updating websites faster. An external style sheet collects all
your style information in a single file that you then link to a web page with just a
single line of code. You can attach the same external style sheet to every page in
your website, providing a unified design. It also makes a complete site makeover as
easy as editing a single text file.
On the receiving end, external style sheets help web pages load faster. When you
use an external style sheet, your web pages can contain only basic HTML—no bytehogging HTML tables or <font> tags and no internal CSS style code. Furthermore,
when a web browser downloads an external style sheet, it stores the file on your
visitor’s computer (in a behind-the-scenes folder called a cache) for quick access.
When your visitor hops to other pages on the site that use the same external style
sheet, there’s no need for the browser to download the style sheet again. The browser
simply downloads the requested HTML file and pulls the external style sheet from
its cache—a significant savings in download time.
NOTE

When you’re working on your website and previewing it in a browser, the cache can work against
you. See the box on the next page for a workaround.

24

CSS: THE MISSING MANUAL

INTERNAL
STYLE SHEETS
WORKAROUND WORKSHOP

Don’t Get Caught in the Cache
A browser’s cache is a great speed-boost for Web surfers.
Whenever the cache downloads and stores a frequently used
file—like an external CSS file or an image—it saves precious
moments traveling the highways of the Internet. Instead of
re-downloading the next time it needs the same file, the
browser can go straight to the new stuff—like a yet-to-beviewed page or graphic.
But what’s good for your visitors isn’t always good for you.
Because the web browser caches and recalls downloaded
external CSS files, you can often get tripped up as you work
on a site design. Say you’re working on a page that uses an
external style sheet, and you preview the page in a browser.
Something doesn’t look quite right, so you return to your web

editor and change the external CSS file. When you return to
the web browser and reload the page, the change you just
made doesn’t appear! You’ve just been caught by the cache.
When you reload a web page, browsers don’t always reload
the external style sheet, so you may not be seeing the latest
and greatest version of your styles.
To get around this snafu, you can force reload a page (which
also reloads all linked files) by pressing the Ctrl (c) key and
clicking the browser’s Reload button; Ctrl+F5 also works for
Chrome and Internet Explorer; Ctrl+Shift+R (c-Shift-R) is
Firefox’s keyboard shortcut; and Ctrl+R (c-R) works for both
Safari and Chrome for the Mac.

Internal Style Sheets
An internal style sheet is a collection of styles that’s part of the web page’s code.
It always appears between opening and closing HTML <style> tags in the page’s
<head> portion. Here’s an example:
<style>
h1 {
color: #FF7643;
font-family: Arial;
}
p {
color: red;
font-size: 1.5em;
}
</style>
</head>
<body>
<!-- The rest of your page follows... -->

Chapter 2: Creating Styles and Style Sheets

25

EXTERNAL
STYLE SHEETS

NOTE

You can place the <style> tag and its styles anywhere after the <title> tag in the page’s head,
but web designers usually place them right before the closing </head> tag, as shown here. However, if you
also use JavaScript, the style sheet should go before the JavaScript. Many JavaScript programs rely on CSS, so by
adding your CSS first, you can make sure the JavaScript program has all the information it needs to get its job
done.

The <style> tag is HTML, not CSS. But its job is to tell the web browser that the
information contained within the tags is CSS code and not HTML. Creating an internal style sheet is as simple as typing one or more styles between the <style> tags.
Internal style sheets are easy to add to a web page and provide an immediate visual
boost to your HTML. But they aren’t the most efficient method for designing an
entire website composed of many web pages. For one thing, you need to copy and
paste the internal style sheet into each page of your site—a time-consuming chore
that adds bandwidth-hogging code to each page.
But internal style sheets are even more of a hassle when you want to update the
look of a site. For example, say you want to change the <h1> tag, which you originally decided should appear as large, green, bold type. But now you want small,
blue type in the Courier typeface. Using internal style sheets, you’d need to edit
every page. Who has that kind of time? Fortunately, there’s a simple solution to this
dilemma—external style sheets.
NOTE

It’s also possible to add styling information to an individual HTML tag without using a style sheet.
The tutorial on page 28 shows you how to perform that maneuver by using an inline style. You shouldn’t normally
use inline styles to design your web pages; however, many JavaScript programmers do use inline styles when
dynamically adding HTML content to a web page, so it’s good know how inline styles work and how to create
them.

External Style Sheets
An external style sheet is nothing more than a text file containing all your CSS rules.
It never contains any HTML code—so don’t include the <style> tag in an external
style sheet file. In addition, always end the file name with the extension .css. You
can name the file whatever you like, but it pays to be descriptive. Use global.css,
site.css, or simply styles.css, for example, to indicate a style sheet used by every
page on the site, or use form.css to name a file containing styles used to make a
web form look good.

26

CSS: THE MISSING MANUAL

TUTORIAL:
CREATING
YOUR FIRST
STYLES
UP TO SPEED

Validate Your CSS
Just as you should make sure you’ve correctly written the HTML
in your web pages using the W3C HTML validator (see the box
on page 15), you should also check your CSS code to make sure
it’s kosher. The W3C provides an online tool for CSS checking
as well: http://jigsaw.w3.org/css-validator. It operates just
like the HTML validator: You can type the URL of a web page
(or even just the address to an external CSS file), upload a CSS

file, or copy and paste CSS code into a web form and submit
it for validation.
It’s easy to make a typo when writing CSS, and one small
mistake can throw all of your carefully planned designs out of
whack. When your CSS-infused web page doesn’t look as you
expect, a simple CSS error may be the cause. The W3C CSS validator is a good first step when troubleshooting your designs.

TIP

If you have a page with an internal style sheet but want to use an external style sheet, then just cut all
of the code between the <style> tags (without the tags themselves). Then create a new text file and paste the
CSS into the file. Save the file with a .css extension—styles.css, for example—and link it to your page, as described
next.

Once you create an external style sheet, you must connect it to the web page you
wish to format. To do so, use the HTML <link> tag like this:
<link rel="stylesheet" href="css/styles.css">

The <link> tag has two required attributes:
• rel="stylesheet" indicates the type of link—in this case, a link to a style sheet.
• href points to the location of the external CSS file on the site. The value of this
property is a URL and will vary depending on where you keep your CSS file. It
works the same as the src attribute you use when adding an image to a page
or the href attribute of a link pointing to another page.
TIP You can attach multiple style sheets to a web page by adding multiple <link> tags, each pointing to
a different style sheet file. This technique is one way to organize your CSS styles, as you can see in Chapter 18.

Tutorial: Creating Your First Styles
The rest of this chapter takes you through the basic steps for adding inline styles,
writing CSS rules, and creating internal and external style sheets. As you work
through this book, you’ll work through various CSS designs, from simple design
elements to complete CSS-enabled web page layouts. To get started, download
the tutorial files from https://github.com/sawmac/css_mm_4e. Download the zip
archive containing the files. Each chapter’s files are in a separate folder, named 02
(for Chapter 2), 03 (for Chapter 3), and so on.
Chapter 2: Creating Styles and Style Sheets

27

TUTORIAL:
CREATING
YOUR FIRST
STYLES

NOTE

In addition to a folder for each chapter’s tutorial, you’ll find another folder with the completed
tutorial. For example, the 02_finished folder contains the completed files for this chapter’s tutorial. You can use
this finished example if you get stuck and want to compare what you’ve written with the finished product.

Next, launch your favorite web page–editing software, whether it’s a simple text
editor like Notepad or TextEdit or a more full-featured editor like Sublime Text,
Atom, or Dreamweaver.

Creating an Inline Style
When you type a CSS rule directly into a page’s HTML, you’re creating an inline style.
Inline styles offer none of the time- and bandwidth-saving benefits of external style
sheets, so the pros hardly ever use them. Still, in a pinch, if you absolutely must change
the styling on a single element on a single page, then you may want to resort to an
inline style. (For example, when creating HTML-formatted email messages, it’s best
to use inline styles. That’s the only way to get CSS to work in Gmail, for one thing.)
And if you do, you at least want the style to work properly. The important thing is
to carefully place the style within the tag you want to format. Here’s an example
that shows you exactly how to do it:
1. In your web page–editing program, open the file 02→index.html.
This simple-but-elegant HTML5 file contains a couple of different headings, a
few paragraphs, and a copyright notice inside an <address> tag. You’ll start by
creating an inline style for the <h1> tag.
2. Click inside the opening <h1> tag and type style="color: #6A94CC;".
The tag should look like this:
<h1 style="color: #6A94CC;">

The style attribute is HTML, not CSS, so you use the equal sign after it and
enclose all of the CSS code inside quotes. Only the stuff inside the quotes is
CSS. In this case, you’ve added a property named color—which affects the
color of text—and you’ve set that property to #6A94CC, a hexadecimal code for
defining a color that’s blue. (You’ll learn more about coloring text on page 147.)
The colon separates the property name from the property value that you want.
Next, you’ll check the results in a web browser.
3. Open the index.html page in a web browser.
For example, start up your favorite web browser and choose File→Open File
(or press Ctrl+O [c-O] and select the index.html file in the 02 tutorial folder
from your computer; or just drag the file from the desktop—or wherever you’ve
saved the tutorial files—into an open browser window). Many HTML editors
also include a “Preview in Browser” function, which, with a simple keyboard
shortcut or menu option, opens the page in a web browser. It’s worth checking
your program’s documentation to see if it includes this time-saving feature.

28

CSS: THE MISSING MANUAL

When you view the page in a browser, the headline is now blue. Inline styles
can include more than one CSS property. You’ll add another property next.

TUTORIAL:
CREATING
YOUR FIRST
STYLES

4. Return to your HTML editor, click after the semicolon following #6A94CC, and
then type font-size: 3em;.
The semicolon separates two different property settings. The <h1> tag should
look like this:
<h1 style="color: #6A94CC; font-size: 3em;">

5. Preview the page in a web browser. For example, click your browser window’s Reload button (but make sure you’ve saved the HTML file first).
The headline is now much larger. And you’ve had a taste of how labor-intensive
inline styles are. Making all the <h1> headings on a page look like this one could
take days of typing and add acres of code to your HTML files.
6. Return to your page editor and delete the entire style property, which returns the heading tag back to its normal <h1>.
Next, you’ll create a style sheet within a web page. (You’ll find a finished version
of this part of the tutorial in the 02_finished folder in a file named inline-style.
html.)

Creating an Internal Style Sheet
A better approach than inline styles is using a style sheet that contains multiple CSS
rules to control multiple elements of a page. In this section, you’ll create a style that
affects all top-level headings in one fell swoop. This single rule automatically formats
every <h1> tag on the page.
1. With the file index.html open in your text editor, click directly after the
closing  tag. Then hit Enter and type .
Now, you’ll add a CSS selector that marks the beginning of your first style.
3. Click between the opening and closing 


30

CSS: THE MISSING MANUAL

7. Save the page and preview it in a web browser.
You can preview the page by opening it in a web browser as described in step
3 on page 28, or, if the page is still open in a browser window, just click the
Reload button.

TUTORIAL:
CREATING
YOUR FIRST
STYLES

Next you’ll add another style.
NOTE Always remember to add the closing  tag at the end of an internal style sheet. When you
don’t, a web browser displays the CSS style code followed by a completely unformatted web page—or no web
page at all.

8. Back in your text-editing program, click after the closing brace of the h1
style you just created, press Enter, and then add the following rule:
p {
font-size: 1.25em;
color: #616161;
line-height: 150%;
margin-top: 10px;
margin-left: 60px;
}

This rule formats every paragraph on the page. Don’t worry too much right now
about what each of these CSS properties is doing; later chapters cover these
properties in depth. For now, just practice typing the code correctly and get a
feel for how to add CSS to a page.
9. Preview the page in a browser.
The page is starting to shape up and should look like Figure 2-3. You can see
what stylistic direction the page is headed in. You can see a completed version
of this tutorial by opening the 02_finished→internal-stylesheet.html file.
The process you’ve just worked through is CSS in a nutshell: Start with an HTML page,
add a style sheet, and create CSS rules to make the page look great. In the next part
of this tutorial, you’ll see how to work more efficiently, using external style sheets.

Chapter 2: Creating Styles and Style Sheets

31

TUTORIAL:
CREATING
YOUR FIRST
STYLES

FIGURE 2-3

CSS easily formats text in
creative ways, letting you
change fonts, text colors,
font sizes, and a lot more,
as you’ll see in Chapter 6.

Creating an External Style Sheet
Since it groups all of your styles at the top of the page, an internal style sheet is a
lot easier to create and maintain than the inline style you created a few pages ago.
Also, an internal style sheet lets you format any number of instances of a tag on a
page, like every 
 tag, by typing one simple rule. But an external style sheet gets
even better—it can store all of the styles for an entire website. Editing one style in
the external style sheet updates the whole site. In this section, you’ll take the styles
you created in the previous section and put them in an external style sheet.
1. In your text-editing program, create a new file and save it as styles.css in
the same folder as the web page you’ve been working on.
External style sheet files end with the extension .css. The file name styles.css
indicates that the styles contained in the file apply throughout the site. (But
you can use any file name you like, as long as it ends with the .css extension.)
Start by adding a new style to the style sheet.

32

CSS: THE MISSING MANUAL

2. Type the following rule into the styles.css file:

TUTORIAL:
CREATING
YOUR FIRST
STYLES

html {
padding-top: 25px;
background-image: url(images/bg_page.png);
}

This rule applies to the HTML tag—the tag that surrounds all other HTML tags
on the page. The padding-top property adds space between the top of the
tag and the content that goes inside it. In other words, what you just typed will
add 25 pixels of space between the top of the browser window and the page’s
content. The background-image adds a graphic file to the page’s background.
The CSS background-image property can display the graphic in many different
ways—in this case, the graphic will tile seamlessly from left to right and top to
bottom, covering the entire browser window. You can read more about background image properties on page 231.
3. Add a second rule following after the rule you just typed to the styles.css file:
body {
width: 80%;
padding: 20px;
margin: 0 auto;
border-radius: 10px;
box-shadow: 10px 10px 10px rgba(0,0,0,.5);
background-color: #E1EDEB;
}

This rule applies to the  tag—the tag that holds all the content visible
in a web browser window. There are a lot of different things going on in this
style, and each of these properties is covered in-depth later in the book. But in
a nutshell, this style creates a box for the page’s content that’s 80 percent the
width of the browser window, has a little bit of space inside that moves text from
the edge of the box (that’s the padding property), and centers the box on the
page (that’s the margin property, and the particular trick of centering a page’s
content is discussed in the tutorial starting on page 81). Finally, the box gets a
light blue background color and a transparent black drop shadow.
Instead of recreating the work you did earlier, just copy the styles you created
in the previous section and paste them into this style sheet.
4. Open the index.html page that you’ve been working on and copy all of the
text inside the .
These are the opening and closing style tags—it’s a good idea to type both tags
at the same time, so you don’t accidentally forget to add the closing 
tag. Together, these two tags tell a web browser that the information between
them is Cascading Style Sheet instructions. The HTML should now look like this
(the stuff you added is in bold):
Selector Basics



Chapter 3: Selectors: Identifying What to Style

71

TUTORIAL:
SELECTOR
SAMPLER

Type selectors—like the one you’re about to create—are the most basic kind of
selector. If you completed the tutorial in the last chapter, you’ve already created
a few. Here, you’ll add a background color to the page.

FIGURE 3-10

Plain HTML looks cold and
monotonous in a web
browser. But with a little
CSS, you can turn drab
(shown here) into fab
(Figure 3-11) in 31 easy
steps.

4. Click between the opening and closing style tags you just added and type
body { , hit Enter twice, and type the closing }.
It’s a good idea to always add the closing brace immediately after typing the
opening brace, just so you don’t forget. To create a tag selector, simply use the
name of the HTML tag you wish to format. This style applies to the  tag.
Now you can set the background color and the margin of space around the page.

72

CSS: THE MISSING MANUAL

5. Click between  style’s opening and closing braces ( { } ) and add the
following three CSS properties to supply the style’s formatting—color, size,
font, and left indent (as set by the padding):

TUTORIAL:
SELECTOR
SAMPLER

body {
background-color: rgb(50,122,167);
padding: 0 20px 20px 20px;
margin: 0;
}

Press Enter to place each CSS property on its own line. It’s also a good idea to
visually organize your CSS code by indenting each property with the Tab key
(some designers use two spaces instead of a tab—it’s up to you).
The properties here change the background color of the page: rgb() is one
way to specify a color’s red, green, and blue values. In this case, the color is a
dark blue. This background makes the black text hard to read, so you need to
change the color of the paragraph tags.
NOTE

These property names and their values may look unfamiliar. For now, just type them as is so you can
get a taste of padding and margins work. You’ll learn much more about these properties in Chapter 6.

6. Add another style below the body style you just created:
p {
color: rgba(255,255,255,.6);
font-size: 1em;
font-family: "Varela Round", Arial, Helvetica, sans-serif;
}

With four CSS properties, this style supplies formatting for all paragraphs (all

 tags)—color, size, and font. This time, the color is determined by an rgba()
color value. With an extra “a” after the usual “rgb,” this versatile value lets you
create a color that’s partially transparent. In this case, you’ve set the paragraph’s
text to white (which is 255,255,255 in rgb), but only 60 percent opaque (that’s
the .6 part). A bit of the blue background color shows through, so the paragraph
text appears light blue.
Time for a look-see.
7. Open the page in a web browser to preview your work.
Unless you tinker with the preference settings, most browsers display black text
in a standard serif font like Times. If your CSS style works properly, then you
should see seven paragraphs using the Varela Round font in a light blue color.

Creating a Group Selector
Sometimes you’ll want several different elements on a page to share the same look.
For instance, you may want all your headings to have the same font and color for a

Chapter 3: Selectors: Identifying What to Style

73

TUTORIAL:
SELECTOR
SAMPLER

consistent style. Instead of creating separate styles and duplicating the same property settings for each tag—
, 
, and so on—you can group the tags together
into a single selector.
1. Return to your text editor and the selector_basics.html file.
Let’s add a new style below the 
 tag style you just created.
2. Click at the end of the closing brace of the p tag selector, press Enter to start
a new line, and the following code:
h1, h2, h3 {
}

As explained earlier in this chapter, a group selector is simply a list of selectors
separated by commas. This rule applies the same formatting, which you’ll add
next, to all 
, 
, and 
 tags on the page.
3. Click in the empty line between the opening { and closing } and add five
CSS properties:
color: rgb(255,255,255);
font-family: Arial, "Palatino Linotype", Times, serif;
border-bottom: 2px solid rgb(87,185,178);
padding-top: 10px;
padding-bottom: 5px;

There’s a lot going on here, but basically you’re setting the color and font type
for the headlines, adding a border line below the headlines for visual interest,
and controlling the top and bottom spacing by using the padding property. The
padding property adds space from the edges of an element without affecting
a background or border—you’re adding a bit of space above the headline, and
inserting a bit of space between the bottom of that text and the border line
below it.
4. Save the file, and preview it in a web browser.
The 
 heading near the top of the page and the 
 and 
 headings
lower on the page all have the same font and font color as well as a greenishblue border below them (see Figure 3-11). The 
 tag looks a bit small, but
you can easily bump up its size.
5. Go back to your text editor and the selector_basics.html file. Add another
style below the group selector style you just created:
h1 {
font-size: 2em;
}

This style increases the size of the font. An em is the default browser font-size,
so 2em is twice the normal text size. Notice, as well, that it’s possible to have

74

CSS: THE MISSING MANUAL

more than one style apply to an element at the same time—the h1, h2, h3 rule
and the h1 rule in this case. Both the group selector and this new type selector
apply to h1 tags on this page. This process is the cascade in Cascading Style
Sheets. You’ll learn all about how styles interact in Chapter 5.

TUTORIAL:
SELECTOR
SAMPLER

FIGURE 3-11

A simple type selector
can completely transform
the appearance of every
instance of a tag, making
quick work of styling all
the paragraphs of text on
a page. And in this case, a
group selector does even
more by formatting every
instance of three different
headline tags!

Creating and Applying an ID Selector
ID selectors are used to style a single tag. You create the style and add an ID attribute
to a tag on the page, and then the properties from that style are applied to that single
tag. You’ll frequently use IDs to identify form elements, to create in-page links in a
page (see the box on page 48), and to use JavaScript to control elements on a page.

Chapter 3: Selectors: Identifying What to Style

75

TUTORIAL:
SELECTOR
SAMPLER

Although many web designers now shy away from ID selectors (you’ll learn exactly
why on page 108), it’s still good to know how to use them.
In this exercise, you’ll create a style that controls the look of the text that appears
at the very top of the page: “CSS: The Missing Manual.” This text is considered the
page’s logo, and you’ll create a special ID style to format it.
1. Return to your text editor and the selector_basics.html file.
You’ll add a new style below the h1 class style you created before.
2. Click after the previous style’s closing bracket (}), hit Enter to create a new
line, and then type #logo {.
ID selectors always begin with the pound symbol (#). The style’s name indicates
that you’ll apply this to a page element that’s considered the site’s logo.
3. Hit Enter again, and then type:
font-family: Baskerville, Palatino, sans-serif;
font-size: 2em;
color: rgba(255,255,255,.8);
font-style: italic;
text-align: center;
margin-bottom: 30px;
background-color: rgb(191,91,116);
border-radius: 0 0 10px 10px;
padding: 10px;

It looks like a long list of properties, but all it does it set some font properties,
background color, and spacing for the logo text.
4. Finish the style by typing the closing brace. The whole thing should look
like this:
#logo {
font-family: Baskerville, Palatino, sans-serif;
font-size: 2em;
color: rgba(255,255,255,.8);
font-style: italic;
text-align: center;
margin-bottom: 30px;
background-color: rgb(191,91,116);
border-radius: 0 0 10px 10px;
padding: 10px;
}

If you save the file and preview it in a web browser, you won’t see any difference.
That’s because this style doesn’t do anything until you apply it. So you’ll add an
ID attribute to the page’s HTML, indicating where you want the ID style to apply.

76

CSS: THE MISSING MANUAL

5. Find the 
 tag near the opening  tag—it has the text “CSS: The Missing Manual” in it. Add id="logo" to the opening div so the HTML looks like this:

TUTORIAL:
SELECTOR
SAMPLER



The 
 tag now reflects the formatting defined in the #logo style. As with
all things CSS, there are many ways to arrive at the same destination: You could
instead use a class style and apply it to the 
 tag. But in this case you’re
using an ID selector, since the point of this style—identifying the logo on the
page—is in keeping with the general notion of ID selectors.
6. Save the page, and preview it in a browser.
Now the “CSS: The Missing Manual” text is centered, light-colored, and inside
a small box at the top of the page (Figure 3-12).

FIGURE 3-12

ID selectors are one way to style
unique elements, like the logo bar
at the top of this page.

Chapter 3: Selectors: Identifying What to Style

77

TUTORIAL:
SELECTOR
SAMPLER

Creating and Applying a Class Selector
Type selectors are quick and efficient, but they’re a bit indiscriminate in how they
style a page. What if you want to style a single 
 tag differently than all the other

 tags on a page? A class selector is the answer.
1. Return to your text editor and the selector_basics.html file.
Add a new style below the ID selector style you just created.
2. Click at the end of the closing brace of the #logo selector, press Enter, and
then type
.note {
}

This style’s name, .note, indicates its purpose: to highlight paragraphs that
contain extra bits of information for your site’s visitors. Once you create a class
style, you can apply it wherever these notes appear—like the third paragraph
in this page.
3. Click in the empty line between the opening { and closing } and add the
following list of properties to the style:
color: black;
border: 2px solid white;
background-color: rgb(69,189,102);
margin-top: 25px;
margin-bottom: 35px;
padding: 20px;

Notice that you’re not using the rgb() color values to color the font and border.
CSS has several different ways to specify a color, including keywords like white,
black, or orange. You’ll learn about those on page 147.
If you preview the page now, you see no changes. Like ID selectors, class
selectors don’t have any effect on a web page until you apply the style in the
HTML code.
4. In the page’s HTML, there are two 
 tags that begin with the word “Note”
inside  tags.
To apply a class style to a tag, simply add a class attribute, followed by the class
selector’s name—in this case, the note style you just created.
5. Click just after the p in the first 
 tag, and then type a space followed by
class="note". The HTML should now look like this (what you just typed is
in bold):

NOTE:

78

CSS: THE MISSING MANUAL

Be sure not to type class=".note". In CSS, the period is necessary to indicate
a class style name; in HTML, it’s verboten. Repeat this step for the second paragraph (it’s just above the 
 tag with the text “Not Me!”).

TUTORIAL:
SELECTOR
SAMPLER

NOTE There’s no reason you can’t add this class to other tags as well, not just the 
 tag. If you happen
to want to apply this formatting to an 
 tag, for example, then your HTML would look like this:



6. Save and preview the web page in a browser.
The note paragraph is nicely highlighted on the page (see Figure 3-13).

FIGURE 3-13

You can make detailed
formatting changes
with class selectors. A
class style gives selected
paragraphs different
formatting from all other
paragraphs on the page.
The distinctive note box
pictured here uses a class
style to stand out from
the crowd.

Chapter 3: Selectors: Identifying What to Style

79

TUTORIAL:
SELECTOR
SAMPLER

NOTE

If your page doesn’t look like Figure 3-13, then you may have mistyped the name of a property or
its value. Double-check your code with the steps above. Also, make sure to end each declaration (property:
value combination) with a semicolon and conclude the style with a closing brace at the very end. When your
style is not working correctly, missing semicolons and closing braces are frequent culprits.

Creating a Descendant Selector
On the selectors_basics.html page, you applied the note class to two paragraphs.
Each of those paragraphs begins with the word “Note:” in bold—actually the word
is wrapped inside the HTML  tag, which all browsers display as bolded text.
But what if you want to format those bolded words in bright orange? You could
create a tag style for the  tag, but that would affect all  tags on
the page, and you only want to change the strong tag inside those note boxes. One
solution would be to create a class style—.noteText, for example—and apply it to
each of the  tags inside the note boxes. But that’s a lot of work, and you
might forget to apply the class if you have a lot of pages with those notes.
A better method is to create a descendant selector (page 50), which targets only the
 tag when it’s inside one of these note boxes. Fortunately, that’s easy to do.
1. Return to your text editor and the selector_basics.html file. Create a new
empty line for the descendant selector style.
If you just completed the previous steps, click after the closing brace of the
.note style, and then hit Enter.
2. Type .note strong {.
The last tag in the selector—strong—is the element you ultimately want to
format. In this case, the style formats the  tag only when it’s inside
another tag with the class note applied to it. It has no effect on  tags
inside other paragraphs, lists, or heading tags, for example.
3. Hit Enter, type color: #FC6512;, and then hit Enter again to create another
blank line. Finish the style by typing the closing brace character.
The finished style should look like this:
.note strong {
color: #FC6512;
}

4. Save the page and preview it in a web browser.
The word “Note:” should appear in orange in each of the note boxes on the page.
Descendant selectors are among the most powerful CSS tools. Professional web
designers use them extensively to target particular tags without littering the HTML
with CSS classes. You’ll learn a lot more about descendant selectors as they’re used
throughout this book.

80

CSS: THE MISSING MANUAL

Finishing Touches
The text on this page expands to fill the browser window. To see this in effect,
preview the page and resize your browser window. You’ll see the lines of text get
wider as you stretch the window. If you have a large monitor, you’ll see that the
text becomes pretty hard to read past a certain width: The lines of text are too long
to read comfortably. Fortunately, you can set a width for the page’s content, so it
doesn’t get too wide to read.

TUTORIAL:
SELECTOR
SAMPLER

1. Return to your text editor and the selector_basics.html file. Create a new
empty line for a new style.
If you just completed the previous steps, click after the closing brace of the
.note strong descendant selector style, and then hit Enter.
2. Add another style:
article {
max-width: 760px;
}

This is another type selector. It applies to the HTML5 
 tag, which
is used to define the content that makes up an article like a blog post, or the
content on this page.
The max-width property sets the maximum width for the tag, meaning that the
article tag will never get wider than 760 pixels. Save the file and preview it in
a browser. If you widen the browser window, you’ll notice that past 760 pixels,
the window gets wider and the blue background of the page appears, but the
text no longer expands.
On the other hand, if you make the browser window smaller than 760 pixels,
the text lines do get shorter. That’s the power of the max-width property, which
sets a maximum width, but no minimum. This property is extremely useful when
you’re designing sites that need to work on a variety of screen sizes—desktop
computers, laptops, tablets, and smart phones. It’s an important part of responsive design, which you’ll learn about in Chapter 17.
Now that you’ve limited how far the text can expand, it would be nice to keep
the content centered on the screen instead of sticking to the left edge as the
browser window expands.
3. Add one more property to the article style so it looks like this (addition
in bold):
article {
max-width: 760px;
margin: 0 auto;
}

Chapter 3: Selectors: Identifying What to Style

81

TUTORIAL:
SELECTOR
SAMPLER

The margin property sets the space between an element and other elements
around it. You’ll read more about margins on page 187, but here this line sets
the left and right margins to auto, which tells the web browser to automatically
figure out how much space to add to the left and right sides of the article tag.
Once the browser window gets past 760 pixels, the article element gets no
wider, so the browser basically adds empty space to both the left and right of
the tag, in essence centering it in the middle of the browser window.
For fun, you’ll add one more advanced style—an adjacent sibling selector discussed on page 67—to format the paragraph immediately following the first
headline on the page. (You can achieve the same effect by creating a class style
and applying it to that paragraph, but the adjacent sibling selector requires no
changes to your HTML.)
4. Add one last style:
h1+p {
color: rgb(255,255,255);
font-size: 1.2em;
line-height: 140%;
}

This style will apply to any paragraph that immediately follows an 
 tag—in
other words, the first paragraph after the top headline on the page. It won’t
apply to the second or any subsequent paragraphs. This selector provides an
easy way to create a unique look for an introductory paragraph to set it off
visually and highlight the beginning of an article.
The style changes the font color and size. The line-height property (which
you’ll read about on page 163) controls the space between lines in a paragraph
(also known as leading).
If you preview the page now, you’ll see that the top paragraph is white and its
text is larger, and there’s more space between each line of text (see Figure 3-14).
If you actually deleted this paragraph in the HTML, you’d see that the remaining
paragraph would suddenly be white with larger text, since it would be the new
adjacent sibling of the 
 tag.
And there you have it: a quick tour through various selector types. You’ll get familiar
with all of these selectors (and more) as you go through the tutorials later in the
book, but by now, you should be getting the hang of the different types and why
you’d use one over the other.
NOTE

82

You can see a completed version of the page you’ve just created in the 03_finished folder.

CSS: THE MISSING MANUAL

TUTORIAL:
SELECTOR
SAMPLER

FIGURE 3-14

The page has really come
together. The set width
and the typographic
details have really
improved the look of the
boring HTML page you
started with.

Chapter 3: Selectors: Identifying What to Style

83

CHAPTER

Saving Time with
Style Inheritance

4

C

hildren inherit traits from their parents—eye color, height, male-pattern baldness, and so on. Sometimes we inherit traits from more distant ancestors, like
grandparents or great-grandparents. As you saw in the previous chapter, the
metaphor of family relations is part of the structure of HTML as well. And just like
humans, HTML tags can inherit CSS properties from their ancestors.

What Is Inheritance?
Inheritance is the process by which some CSS properties applied to one tag are
passed on to nested tags. For example, a 
 tag is always nested inside of the
 tag, so properties applied to the  tag get inherited by the 
 tag. Say
you created a type selector style (page 41) for the  tag that sets the color
property to a dark red. Tags that are descendants of the  tag—that is, the ones
inside the  tag—will inherit that color property. That means that any text in
those tags—
, 
, 
, or whatever—will appear in that same dark red color.
Inheritance works through multiple generations as well. If a tag like the  or
 tag appears inside of a 
 tag, then the  and the  tags also
inherit properties from any style applied to the  tag.
NOTE

As discussed in Chapter 3, any tag inside of another tag is a descendant of that tag. So a 
 tag
inside the  tag is a descendant of the , while the  tag is an ancestor of the 
 tag.
Descendants (think kids and grandchildren) inherit properties from ancestors (think parents and grandparents).

85

HOW
INHERITANCE
STREAMLINES
STYLE SHEETS

Although this may sound confusing, inheritance is a really big timesaver. Imagine if
no properties were passed onto nested tags and you had a paragraph that contained
other tags like a  tag, an  tag to emphasize text and an  tag to add
a link. If you created a style that made the paragraph text white and 32 pixels tall,
using the Varela Round font, it would be weird if all the text inside the , 
and  tags reverted to its regular, “browser boring” style (see Figure 4-1). You’d
then have to create another style to format the  tag to match the appearance
of the 
 tag. What a drag.
Inheritance doesn’t just apply to tag styles. It works with any type of style, so when
you apply a class style (see page 43) to a tag, any tags inside that tag inherit properties from the styled tag. The same holds true for ID styles, descendant selectors,
and the other types of styles discussed in Chapter 3.

How Inheritance Streamlines Style Sheets
You can use inheritance to your advantage to streamline your style sheets. Say you
want all the text on a page to use the same font. Instead of creating styles for each
tag, simply create a tag style for the  tag. (Or create a class style and apply it
to the  tag.) In the style, specify the font you wish to use, and all of the tags
on the page inherit the font:
body {
font-family: Arial, Helvetica, sans-serif;
}

You can also use inheritance to apply style properties to a section of a page. For
example, like many web designers, you may use the 
 tag (page 47) to define
an area of a page like a banner, sidebar, or footer; or if you’re using HTML5 elements,
you might use one of the sectioning elements like 
, 
 tag, and another style defining
a different text color were applied to a 
 tag inside that table, then tags inside
that table cell ()—such as a paragraph, headline, or unordered list—would use
the color from the  style, since it’s the closest ancestor.

The Directly Applied Style Wins
Taking the “nearest ancestor” rule to its logical conclusion, there’s one style that
always becomes king of the CSS family tree—any style applied directly to a given tag.
Suppose a font color is set for the body, paragraph, and strong tags. The paragraph
style is more specific than the body style, but the style applied to the  tag
is more specific than either one. It formats the  tags and only the 
tags, overriding any conflicting properties inherited from the other tags (see Figure
5-2, number 2). In other words, properties from a style specifically applied to a tag
beat out any inherited properties.

Chapter 5: Managing Multiple Styles: The Cascade

99

HOW STYLES
CASCADE

This rule explains why some inherited properties don’t appear to inherit. A link
inside a paragraph whose text is red still appears browser-link blue. That’s because
browsers have their own predefined style for the  tag, so an inherited text color
won’t apply.

FIGURE 5-2

Here’s how web browsers figure out which properties to display when inherited properties conflict:
The  tag in the first paragraph (1) inherits
the font family and color from both the 
tag and the paragraph. But since the body and
paragraph have different fonts and colors applied
to them, the  tag uses the font and color
specified for its closest ancestor—the 
 tag.
When a style applies directly to a tag—the font
family and color are specified for the 
tag (2)—browsers ignore conflicting inherited
properties.

NOTE You can learn how to overcome preset styles for the  tag and change link colors to your heart’s
content. See page 279.

One Tag, Many Styles
Inheritance is one way that a tag can be affected by multiple styles. But it’s also possible to have multiple styles apply directly to a given tag. For example, say you have
an external style sheet with a 
 tag style and attach it to a page that has an internal
style sheet that also includes a 
 tag style. And just to make things really interesting,
one of the 
 tags on the page has a class style applied to it. So for that one tag, three
different styles directly format it. Which style—or styles—should the browser obey?
The answer: It depends. Based on the types of styles and the order in which they’re
created, a browser may apply one or more of them at once. Here are a few situations
in which multiple styles can apply to the same tag:
• The tag has both a tag selector and a class style applied to it. For example,
a tag style for the 
 tag, a class style named .leadHeadline and this HTML:

Your Future Revealed!


Both styles apply to this 
 tag.
100

CSS: THE MISSING MANUAL

NOTE

Hold onto your hat if you’re worried about what happens when these multiple styles conflict; details

to follow.

HOW STYLES
CASCADE

• The same style name appears more than once in the style sheet. For example,
you might have two styles—a group selector (page 49), like .leadHeadline,
.secondaryHeadline, .newsHeadline and a class style .leadHeadline—in the
same style sheet. Both of these rules define how any element with a class of
leadHeadline looks.
• A tag has both a class and an ID style applied to it. Maybe it’s an ID named
#banner, a class named .news, and this HTML: