The CSS Anthology

412 Pages·2009·12.83 MB·English

by  Rachel Andrew

Summary of Contents
Preface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xvii

1. Making a Start with CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1

2. Text Styling and Other Basics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

3. CSS and Images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63

4. Navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89

5. Tabular Data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 139

6. Forms and User Interfaces . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177

7. Cross-browser Techniques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217

8. Accessibility and Alternative Devices . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 255

9. CSS Positioning and Layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 287

Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 373

iv
The CSS Anthology: 101 Essential Tips, Tricks & Hacks
by Rachel Andrew
Copyright © 2009 SitePoint Pty Ltd
Managing Editor: Chris Wyness Technical Director: Kevin Yank
Technical Editor: Andrew Tetlaw Cover Design: Alex Walker
Editor: Kelly Steele
Printing History: Latest Update: July 2009
First Edition: November 2004
Second Edition: May 2007
Third Edition: July 2009
Notice of Rights
All rights reserved. No part of this book may be reproduced, stored in a retrieval system or transmitted
in any form or by any means, without the prior written permission of the publisher, except in the case
of brief quotations embedded in critical articles or reviews.
Notice of Liability
The author and publisher have made every effort to ensure the accuracy of the information herein.
However, the information contained in this book is sold without warranty, either express or implied.
Neither the authors and SitePoint Pty Ltd, nor its dealers or distributors will be held liable for any
damages to be caused either directly or indirectly by the instructions contained in this book, or by the
software or hardware products described herein.
Trademark Notice
Rather than indicating every occurrence of a trademarked name as such, this book uses the names only
in an editorial fashion and to the benefit of the trademark owner with no intention of infringement of
the trademark.
Published by SitePoint Pty Ltd

Web: www.sitepoint.com

Email: [e-mail]

ISBN 978-0-9805768-0-1

Printed and bound in Canada
v
About the Author
Rachel Andrew is a director of web solutions provider edgeofmyseat.com and a web developer.
When not writing code, she writes about writing code and is the author of several SitePoint
books, including HTML Utopia: Designing Without Tables Using CSS and Everything You
Know About CSS Is Wrong!, which promote the practical use of web standards alongside
other everyday tools and technologies. Rachel takes a common sense, real world approach
to web standards, with her writing and teaching being based on the experiences she has in
her own company every day.
Rachel lives in the UK with her partner Drew and daughter Bethany. When not working,
they can often be found wandering around the English countryside hunting for geocaches
and nice pubs that serve Sunday lunch and a good beer.
About the Technical Editor
Andrew Tetlaw has been tinkering with web sites as a web developer since 1997. At SitePoint
he is dedicated to making the world a better place through the technical editing of SitePoint
books, kits, articles, and newsletters. He is also a busy father of five, enjoys coffee, and often
neglects his blog at http://tetlaw.id.au/.
About the Technical Director
As Technical Director for SitePoint, Kevin Yank keeps abreast of all that is new and exciting
in web technology. Best known for his book, Build Your Own Database Driven Website Using
PHP & MySQL, he also co-authored Simply JavaScript with Cameron Adams and Everything
You Know About CSS Is Wrong! with Rachel Andrew. In addition, Kevin hosts the SitePoint
Podcast and writes the SitePoint Tech Times, a free email newsletter that goes out to over
240,000 subscribers worldwide.
Kevin lives in Melbourne, Australia and enjoys speaking at conferences, as well as visiting
friends and family in Canada. He’s also passionate about performing improvised comedy
theater with Impro Melbourne (http://www.impromelbourne.com.au/) and flying light aircraft.
Kevin’s personal blog is Yes, I’m Canadian (http://yesimcanadian.com/).
About SitePoint
SitePoint specializes in publishing fun, practical, and easy-to-understand content for web
professionals. Visit http://www.sitepoint.com/ to access our blogs, books, newsletters, articles,
podcasts, and community forums.

For Bethany

Table of Contents
Preface
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xvii

Who Should Read this Book? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xviii

What’s Covered in this Book? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xviii

The Book’s Web Site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xx

The SitePoint Forums . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xx

The SitePoint Newsletters . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xx

The SitePoint Podcast . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxi

Your Feedback . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxi

Acknowledgments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxi

Conventions Used in This Book . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxii

Chapter 1 Making a Start with CSS . . . . . . . . . . . . . . . 1

How do I define styles with CSS? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1

What are CSS Selectors and how do I use them effectively? . . . . . . . . . . . 7

How does the browser know which styles to apply? . . . . . . . . . . . . . . . . 15

Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

Chapter 2 Text Styling and Other Basics . . . . . . . 19

How do I set my text to display in a certain font? . . . . . . . . . . . . . . . . . . 20

Should I use pixels, points, ems, or another unit identifier to set font
sizes? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22

How do I remove underlines from my links? . . . . . . . . . . . . . . . . . . . . . . . 30

How do I create a link that changes color when the cursor moves over
it? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32

How do I display two different styles of link on one page? . . . . . . . . . . . 34

How do I style the first item in a list differently from the others? . . . . . 36
x
How do I add a background color to a heading? . . . . . . . . . . . . . . . . . . . 38

How do I style headings with underlines? . . . . . . . . . . . . . . . . . . . . . . . . . 39

How do I remove the large gap between an h1 element and the

following paragraph? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41

How do I highlight text on the page? . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43

How do I alter the line height (leading) on my text? . . . . . . . . . . . . . . . . 44

How do I justify text? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45

How do I style a horizontal rule? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46

How do I indent text? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48

How do I center text? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49

How do I change text to all capitals using CSS? . . . . . . . . . . . . . . . . . . . . 50

How do I change or remove the bullets on list items? . . . . . . . . . . . . . . . 52

How do I use an image for a list-item bullet? . . . . . . . . . . . . . . . . . . . . . . 54

How do I remove the indented left-hand margin from a list? . . . . . . . . 55

How do I display a list horizontally? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56

How do I remove page margins? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57

How can I remove browsers’ default padding and margins from all

elements? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58

How do I add comments to my CSS file? . . . . . . . . . . . . . . . . . . . . . . . . . . 60

Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61

Chapter 3 CSS and Images . . . . . . . . . . . . . . . . . . . . . . . . . . 63

How do I add borders to images? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63

How do I use CSS to remove the blue border around my navigation

images? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66

How do I set a background image for my page using CSS? . . . . . . . . . . . 66

How do I control how my background image repeats? . . . . . . . . . . . . . . 68

How do I position my background image? . . . . . . . . . . . . . . . . . . . . . . . . 71