www.it-ebooks.info Summary of Contents Preface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xv 1. Making a Start with CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 2. Text Styling and Other Basics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23 3. Images and Other Design Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77 4. Navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119 5. Tabular Data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 175 6. Forms and User Interfaces . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 223 7. Cross-browser Techniques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 267 8. CSS Positioning Basics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 301 9. CSS for Layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 337 Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 409 www.it-ebooks.info THE CSS3 ANTHOLOGY TAKE YOUR SITES TO NEW HEIGHTS BY RACHEL ANDREW 4TH EDITION www.it-ebooks.info The CSS3 Anthology: Take Your Sites to New Heights by Rachel Andrew Copyright © 2012 SitePoint Pty. Ltd. Assistant Technical Editor: Diana MacDonaldProduct Manager: Simon Mackie Indexer: Michele CombesTechnical Editor: Tom Museth Cover Designer: Alex WalkerExpert Reviewer: Louis Lazaris Editor: Kelly Steele Latest Update: March 2012Printing History: 1st Ed. Nov. 2004, 2nd Ed. May 2007, 3rd Ed. July 2009, 4th Ed. March 2012 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 included in critical articles or reviews. Notice of Liability The authors 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. 48 Cambridge Street Collingwood VIC Australia 3066 Web: www.sitepoint.com Email: business@sitepoint.com ISBN 978-0-9871530-2-9 (print) ISBN 978-0-9871530-6-7 (ebook) Printed and bound in the United States of America iv www.it-ebooks.info About Rachel Andrew Rachel Andrew is a front- and back-end web developer who has written numerous books, including the first three editions of The CSS Anthology. Her work in her company edgeofmyseat.com (http://www.edgeofmyseat.com/) informs her writing, ensuring it remains grounded in the real world of client projects, large and small. About Louis Lazaris Louis Lazaris is a freelance web designer and front-end developer based in Toronto, Canada who has been involved in the web design industry since 2000. Louis has been working on websites ever since the days when table layouts and one-pixel GIFs dominated the industry. Over the past five years, he has come to embrace web standards while endeavoring to promote best practices that help developers and their clients reach practical goals for their projects. Louis writes regularly for a number of top web design blogs including his own site, Impressive Webs (http://www.impressivewebs.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, and community forums. v www.it-ebooks.info For Bethany. www.it-ebooks.info Table of Contents Preface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xv Who Should Read This Book . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xv What’s in This Book . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xvi Where to Find Help . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xvii The SitePoint Newsletters . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xviii The SitePoint Podcast . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xviii Your Feedback . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xix Acknowledgments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xix Conventions Used in This Book . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xix Chapter 1 Making a Start with CSS . . . . . . . . . . . . . . . 1 How do I define styles with CSS? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 CSS Syntax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 What about older browsers? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18 How does the browser decide which styles to apply? . . . . . . . . . . . . . . . . 20 Will using a CSS framework make it easier to learn CSS? . . . . . . . . . . . . 22 A Decent Selection . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22 Chapter 2 Text Styling and Other Basics . . . . . . . 23 How do I set my text to display in a certain font? . . . . . . . . . . . . . . . . . . 24 Should I use pixels, points, ems, or another unit identifier to set font sizes? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26 How do I remove underlines from my links? . . . . . . . . . . . . . . . . . . . . . . . 33 How do I create a link that changes color when the cursor moves over it? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36 How do I display two different styles of link on one page? . . . . . . . . . . . 39 www.it-ebooks.info How do I style the first item in a list differently from the others? . . . . . 41 How do I add a background color to a heading? . . . . . . . . . . . . . . . . . . . 43 How do I style headings with underlines? . . . . . . . . . . . . . . . . . . . . . . . . . 44 How do I remove the large gap between an h1 element and the following paragraph? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46 How do I highlight text on the page? . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49 How do I alter the line height (leading) of my text? . . . . . . . . . . . . . . . . 50 How do I justify text? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52 How do I indent text? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54 How do I center text? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56 How do I change text to all capitals using CSS? . . . . . . . . . . . . . . . . . . . . 57 How do I create a drop-caps effect? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59 How do I add a drop shadow to my text? . . . . . . . . . . . . . . . . . . . . . . . . . 61 How do I change or remove the bullets on list items? . . . . . . . . . . . . . . . 63 How do I use an image for a list-item bullet? . . . . . . . . . . . . . . . . . . . . . . 65 How do I remove the indented left-hand margin from a list? . . . . . . . . 66 How do I display a list horizontally? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68 How do I remove page margins? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69 How can I remove browsers’ default padding and margins from all elements? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70 How do I use fonts other than those installed on most users’ computers? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72 Working with Style . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75 Chapter 3 Images and Other Design Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77 How do I add borders to images? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77 How do I use CSS to remove the blue border around my navigation images? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80 How do I set a background for my page using CSS? . . . . . . . . . . . . . . . . 80 x www.it-ebooks.info How do I control how my background image repeats? . . . . . . . . . . . . . . 83 How do I position my background image? . . . . . . . . . . . . . . . . . . . . . . . . 85 How do I fix my background image in place while the page is scrolled? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88 Can I set a background image on any element? . . . . . . . . . . . . . . . . . . . . 90 How do I create a gradient background? . . . . . . . . . . . . . . . . . . . . . . . . . . 93 Can I create a background image that scales with the browser window? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97 How do I add more than one background image to an element? . . . . . . 99 How do I make an element transparent so that the background shows through? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102 How can I add a drop shadow to an element? . . . . . . . . . . . . . . . . . . . . 108 How do I create rounded corners on an element? . . . . . . . . . . . . . . . . . 110 Can I rotate images without using image-editing software? . . . . . . . . 112 What should I be aware of in terms of accessibility when using color? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115 In the Picture? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117 Chapter 4 Navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119 How do I style a structural list as a navigation menu? . . . . . . . . . . . . . 120 How do I use CSS to create rollover navigation without images or JavaScript? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125 Can I use CSS and lists to create a navigation system with subnavigation? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127 How do I make a horizontal menu using lists and CSS? . . . . . . . . . . . . 133 How do I create tabbed navigation using CSS? . . . . . . . . . . . . . . . . . . . 138 My navigation is in an include, so how can I indicate which is the selected tab? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143 How do I put additional information in my navigation bar? . . . . . . . . 146 How can I visually indicate which links are external to my site? . . . . . 148 xi www.it-ebooks.info How do I create rollover images in my navigation without using JavaScript? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 152 How should I style a sitemap? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158 How do I create a drop-down menu with CSS? . . . . . . . . . . . . . . . . . . . 165 Navigating Your Way to Success . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 174 Chapter 5 Tabular Data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 175 How do I lay out spreadsheet data using CSS? . . . . . . . . . . . . . . . . . . . . 176 How do I make my tabular data accessible? . . . . . . . . . . . . . . . . . . . . . . 177 How do I add a border to a table? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 180 How do I stop spaces appearing between the cells of my tables when I’ve added borders using CSS? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185 How do I display spreadsheet data in an attractive and usable way? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186 How do I display table rows in alternating colors? . . . . . . . . . . . . . . . . . 191 How do I change a row's background color when the mouse hovers over it? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 195 How do I display table columns in alternating colors? . . . . . . . . . . . . . 197 How do I display a calendar using CSS? . . . . . . . . . . . . . . . . . . . . . . . . . . 200 How do I create a pricing table? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 213 Tables Topped . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 222 Chapter 6 Forms and User Interfaces . . . . . . . . . . 223 How do I lay out a form with CSS? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 224 Can I change the look and feel of form elements with CSS? . . . . . . . . 230 How do I highlight a field when the user tabs into or clicks on it? . . . 233 What additional elements and attributes are part of the HTML5 forms spec? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 235 Can I style input elements based on their validity? . . . . . . . . . . . . . . . 242 How do I group related fields? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 248 xii www.it-ebooks.info [...]... definition sets the color for the link state, which displays for links that users have visited If they have visited the link, the second rule is used If they hover over the link, the :hover definition is used, and when clicking or otherwise activating the link, the :active definition is used The :hover and :active pseudoclass selectors are actually termed dynamic pseudo-classes, as they take effect only 2... All the magic lies between the style tags in the head of the document, where we specify that a light blue, sans-serif font should be applied to all h1 and h2 elements on the page Regarding the syntax, I’ll explain it in detail shortly By changing the style definition at the top of the page, it’s unnecessary to add to the markup itself; it will affect all three headings, as well as any other headings... color: #3366cc;"> Amazingly few discotheques provide jukeboxes An inline style has no selector; the style declarations are applied to the parent element In the above example, this is the p tag www.it-ebooks.info 3 4 The CSS3 Anthology Inline styles have one major disadvantage: it’s impossible to reuse them For example, if we wanted to apply the style above to another p element, we’d have to type... lovely day for a walk in the park The birds were singing and the kids were all back at school. www.it-ebooks.info xx If the markup forms part of the book’s code archive, the name of the file will appear at the top of the program listing, like this: example.css footer { background-color: #CCC; border-top: 1px solid #333; } If only part of the file is displayed, this is indicated by the word excerpt: example.css... support for the single colon syntax that these selectors used in the past If you’re utilizing the above selectors, at the time of writing a single colon has better browser support, so I’d suggest employing this The exception is ::selection, which was added in the CSS3 specification First Letter The first-letter pseudo-element selector acts as if you’ve wrapped a span around the first letter of the content... the sidebar of the site are some h2 elements that you want to display white in order to show up against a dark background As we saw earlier, you could add a class to all these headings, but it would be far neater to instead target them with CSS This is when the descendant selector is used Here’s the new selector: sidebar h2 { color: #ffffff; } www.it-ebooks.info 9 10 The CSS3 Anthology And here’s the. .. content on the page—and CSS (Cascading Style Sheets) that tell the browser how the content should be displayed in browsers and other user agents that need to display it CSS tells the browser everything from the layout of the page to the colors of your headings In this chapter, whose format differs to the rest of the book, I’ll explain the basics of CSS syntax and how to apply CSS to your web pages... www.it-ebooks.info Making a Start with CSS when the user interacts with the element; something has to happen before they take effect The order of these definitions in your document is important The a:active definition needs to come last so that it overwrites the previous definitions We’ll find out why that’s the case later on in this chapter, when we discuss the cascade First Child The first-child pseudo-class selector... of these elements labeled in Figure 1.1 Figure 1.1 The components of a CSS rule: a list of selectors and a declaration block The solutions throughout the book focus mainly on the different properties and the values they can take Figure 1.1 also illustrates that a style rule can be written in a single line Some CSS authors prefer to indent their style rules to aid readability, while others write their... then styling it For example, if we used a span within the markup we might have: This is some text within a div with a class of wrapper. www.it-ebooks.info 15 16 The CSS3 Anthology And in the CSS: wrapper firstletter { font-size: 200%; font-weight: bold; } Or we could remove the span from the markup and target the first letter in the . . . . . . . . . . . 409 www.it-ebooks.info THE CSS3 ANTHOLOGY TAKE YOUR SITES TO NEW HEIGHTS BY RACHEL ANDREW 4TH EDITION www.it-ebooks.info The CSS3 Anthology: Take Your Sites to New Heights by. a walk in the park. The birds were singing and the kids were all back at school.</p> xix www.it-ebooks.info If the markup forms part of the book’s code archive, the name of the file will. 409 xiv www.it-ebooks.info Preface When SitePoint asked me to write the fourth edition of this book, I initially thought it would take the same format of other editions—adding new techniques, removing content that