The CSS Anthology: 101 Essential Tips, Tricks & Hacks

414 Pages·2007·12.84 MB·English

by  Rachel Andrew

Summary of Contents
Preface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xv

1. Getting Started with CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1

2. Text Styling and Other Basics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

3. CSS and Images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59

4. Navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83

5. Tabular Data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135

6. Forms and User Interfaces . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 175

7. Cross-browser Techniques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 215

8. Accessibility and Alternative Devices . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 259

9. CSS Positioning and Layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 293

Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 377
THE CSS
ANTHOLOGY
101 ESSENTIAL TIPS, TRICKS & HACKS
BY RACHEL ANDREW
2ND EDITION
iv The CSS Anthology
The CSS Anthology: 101 Essential Tips, Tricks & Hacks
by Rachel Andrew
Copyright © 2007 SitePoint Pty Ltd
Editor: Georgina Laidlaw Index Editor: Bill Johncocks
Managing Editor: Simon Mackie Technical Director: Kevin Yank
Technical Editor: Matthew Magain Cover Design: Alex Walker
Expert Reviewer: Simon Willison
Printing History:
First Edition: November 2004
Second Edition: May 2007
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

424 Smith Street Collingwood

VIC Australia 3066

Web: www.sitepoint.com

Email: [email protected]

ISBN 978-0-9758419-8-3

Printed and bound in Canada
The CSS Anthology v
About the Author
Rachel Andrew is a web developer and the director of web solutions provider
edgeofmyseat.com. When not writing code, she writes about writing code and is the coauthor
of several books promoting the practical usage 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
Before joining the SitePoint team as a technical editor, Matthew Magain worked as a software
developer for IBM and also spent several years teaching English in Japan. He is the organizer
for Melbourne’s Web Standards Group,1 and enjoys swimming, listening to classical jazz,
and drinking Coopers Pale Ale, though not all at the same time. Matthew lives with his wife
Kimberley and their daughter Sophia.
About the Technical Director
As Technical Director for SitePoint, Kevin Yank oversees all of its technical publica­
tions—books, articles, newsletters and blogs. He has written over 50 articles for SitePoint on
technologies including PHP, XML, ASP.NET, Java, JavaScript and CSS, but is perhaps best
known for his book, Build Your Own Database Driven Website Using PHP & MySQL, also
from SitePoint. Kevin now lives in Melbourne, Australia. In his spare time he enjoys flying
light aircraft and learning the fine art of improvised acting.
About SitePoint
SitePoint specializes in publishing fun, practical, and easy-to-understand content for web
professionals. Visit http://www.sitepoint.com/ to access our books, newsletters, articles and
community forums.
1 http://webstandardsgroup.org/

For Bethany

Table of Contents
Preface
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xv

Who Should Read this Book? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xvi

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

The Book’s Web Site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xviii

The SitePoint Forums . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xviii

The SitePoint Newsletters . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xviii

Your Feedback . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xix

Acknowledgments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xix

Conventions Used in this Book . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xx

Chapter 1 Getting Started with CSS . . . . . . . . . . . . . . . 1

Defining Styles with CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1

CSS Selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

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

How do I replace <font> tags with CSS? . . . . . . . . . . . . . . . . . . . . . . . . . 13

Should I use pixels, points, ems, or something else to set font
sizes? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14

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

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

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

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

How do I style the first item in a list differently from the others? . . . . . 32

How do I add a background color to a heading? . . . . . . . . . . . . . . . . . . . 34
x The CSS Anthology
How do I style headings with underlines? . . . . . . . . . . . . . . . . . . . . . . . . . 35

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

lowing paragraph? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36

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

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

How do I justify text? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42

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

How do I indent text? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44

How do I center text? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46

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

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

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

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

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

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

How do I remove page margins without adding attributes to the

<body> tag? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55

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

elements? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56

Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58

Chapter 3 CSS and Images . . . . . . . . . . . . . . . . . . . . . . . . . . 59

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

How do I use CSS to replace the deprecated HTML border attribute

on images? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62

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

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

How do I fix my background image in place when the page is

scrolled? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70