CSS: The Missing Manual, Fourth Edition CSS 4th

User Manual:

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

DownloadCSS: The Missing Manual, Fourth Edition CSS - 4th
Open PDF In BrowserView PDF
free ebooks ==> www.ebook777.com
“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

WWW.EBOOK777.COM

free ebooks ==> www.ebook777.com

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

WWW.EBOOK777.COM

free ebooks ==> www.ebook777.com

CSS
The book that should have been in the box®

David Sawyer McFarland

Beijing | Boston | Farnham | Sebastopol | Tokyo

WWW.EBOOK777.COM

free ebooks ==> www.ebook777.com
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]

WWW.EBOOK777.COM

free ebooks ==> www.ebook777.com

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

WWW.EBOOK777.COM

free ebooks ==> www.ebook777.com
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

WWW.EBOOK777.COM

free ebooks ==> www.ebook777.com
Adding Graphics to Web Pages. . . . . . . . . . . . . . . . . . . . . . . . . . . 229

CHAPTER 8:

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

Sprucing Up Your Site’s Navigation. . . . . . . . . . . . . . . . . . . . . . . 279

CHAPTER 9:

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

CSS Transforms, Transitions, and Animations. . . . . . . . . . . . . 319

CHAPTER 10:

Transforms. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  319
Transitions. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 330
Animations. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 338
Tutorial. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 349

Formatting Tables and Forms. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 357

CHAPTER 11:

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

WWW.EBOOK777.COM

v

free ebooks ==> www.ebook777.com
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

WWW.EBOOK777.COM

free ebooks ==> www.ebook777.com
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

WWW.EBOOK777.COM

vii

free ebooks ==> www.ebook777.com

WWW.EBOOK777.COM

free ebooks ==> www.ebook777.com

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

WWW.EBOOK777.COM

ix

free ebooks ==> www.ebook777.com
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

WWW.EBOOK777.COM

free ebooks ==> www.ebook777.com
• 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

WWW.EBOOK777.COM

xi

free ebooks ==> www.ebook777.com

WWW.EBOOK777.COM

free ebooks ==> www.ebook777.com

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

WWW.EBOOK777.COM

free ebooks ==> www.ebook777.com
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 WWW.EBOOK777.COM free ebooks ==> www.ebook777.com 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 (<).  WWW.EBOOK777.COM xv free ebooks ==> www.ebook777.com 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 WWW.EBOOK777.COM free ebooks ==> www.ebook777.com 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 WWW.EBOOK777.COM 5 free ebooks ==> www.ebook777.com 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 WWW.EBOOK777.COM free ebooks ==> www.ebook777.com 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 WWW.EBOOK777.COM 15 free ebooks ==> www.ebook777.com 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 WWW.EBOOK777.COM free ebooks ==> www.ebook777.com • 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 WWW.EBOOK777.COM 17 THE IMPORTANCE OF THE DOCTYPE free ebooks ==> www.ebook777.com 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 WWW.EBOOK777.COM free ebooks ==> www.ebook777.com 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 WWW.EBOOK777.COM 19 free ebooks ==> www.ebook777.com 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 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. CSS: THE MISSING MANUAL WWW.EBOOK777.COM free ebooks ==> www.ebook777.com 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 WWW.EBOOK777.COM free ebooks ==> www.ebook777.com 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 WWW.EBOOK777.COM free ebooks ==> www.ebook777.com • 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 WWW.EBOOK777.COM 23 free ebooks ==> www.ebook777.com 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 WWW.EBOOK777.COM free ebooks ==> www.ebook777.com 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 WWW.EBOOK777.COM 25 free ebooks ==> www.ebook777.com 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 WWW.EBOOK777.COM free ebooks ==> www.ebook777.com 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 WWW.EBOOK777.COM 27 TUTORIAL: CREATING YOUR FIRST STYLES free ebooks ==> www.ebook777.com 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 WWW.EBOOK777.COM free ebooks ==> www.ebook777.com TUTORIAL: 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. 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 WWW.EBOOK777.COM free ebooks ==> www.ebook777.com TUTORIAL: 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. 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 WWW.EBOOK777.COM 31 TUTORIAL: CREATING YOUR FIRST STYLES free ebooks ==> www.ebook777.com 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 WWW.EBOOK777.COM free ebooks ==> www.ebook777.com TUTORIAL: 2. Type the following rule into the styles.css file: 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 WWW.EBOOK777.COM 71 free ebooks ==> www.ebook777.com 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 WWW.EBOOK777.COM free ebooks ==> www.ebook777.com 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 WWW.EBOOK777.COM 73 free ebooks ==> www.ebook777.com 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 WWW.EBOOK777.COM free ebooks ==> www.ebook777.com 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 WWW.EBOOK777.COM 75 free ebooks ==> www.ebook777.com 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 WWW.EBOOK777.COM free ebooks ==> www.ebook777.com 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 WWW.EBOOK777.COM 77 free ebooks ==> www.ebook777.com 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 WWW.EBOOK777.COM free ebooks ==> www.ebook777.com 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 WWW.EBOOK777.COM 79 free ebooks ==> www.ebook777.com 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 WWW.EBOOK777.COM free ebooks ==> www.ebook777.com 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 WWW.EBOOK777.COM 81 free ebooks ==> www.ebook777.com 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 WWW.EBOOK777.COM free ebooks ==> www.ebook777.com 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 WWW.EBOOK777.COM 83 free ebooks ==> www.ebook777.com WWW.EBOOK777.COM free ebooks ==> www.ebook777.com 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 WWW.EBOOK777.COM free ebooks ==> www.ebook777.com 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 WWW.EBOOK777.COM 99 free ebooks ==> www.ebook777.com 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 WWW.EBOOK777.COM free ebooks ==> www.ebook777.com 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: