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 Download at WoweBook.Com Download at WoweBook.Com 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: [email protected] ISBN 978-0-9805768-0-1 Printed and bound in Canada Download at WoweBook.Com 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. Download at WoweBook.Com Download at WoweBook.Com For Bethany Download at WoweBook.Com Download at WoweBook.Com 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 Download at WoweBook.Com 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 Download at WoweBook.Com