Getting StartED with CSS David Powers i GETTING STARTED WITH CSS Copyright © 2009 by David Powers All rights reserved. No part of this work may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording, or by any information storage or retrieval system, without the prior written permission of the copyright owner and the publisher. ISBN-13 (pbk): 978-1-4302-2543-0 ISBN-13 (electronic): 978-1-4302-2544-7 Printed and bound in the United States of America 9 8 7 6 5 4 3 2 1 Trademarked names may appear in this book. Rather than use a trademark symbol with every occurrence of a trademarked name, we use the names only in an editorial fashion and to the benefit of the trademark owner, with no intention of infringement of the trademark. Distributed to the book trade worldwide by Springer-Verlag New York, Inc., 233 Spring Street, 6th Floor, New York, NY 10013. Phone 1-800-SPRINGER, fax 201-348-4505, e-mail [email protected], or visit www.springeronline.com. For information on translations, please e-mail [email protected], or visit www.apress.com. Apress and friends of ED books may be purchased in bulk for academic, corporate, or promotional use. eBook versions and licenses are also available for most titles. For more information, reference our Special Bulk Sales–eBook Licensing web page at http://www.apress.com/info/bulksales. The information in this book is distributed on an “as is” basis, without warranty. Although every precaution has been taken in the preparation of this work, neither the author(s) nor Apress shall have any liability to any person or entity with respect to any loss or damage caused or alleged to be caused directly or indirectly by the information contained in this work. The source code for this book is freely available to readers at www.friendsofed.com in the Downloads section. Credits President and Publisher: Coordinating Editor: Paul Manning Kelly Moritz Lead Editor: Copy Editor: Ben Renow-Clarke Heather Lang Technical Reviewer: Compositors: Peter Elst MacPS, LLC Editorial Board: Indexers: Clay Andres, Steve Anglin, Mark Beckner, Ewan BIM Indexing and e-Services Buckingham, Tony Campbell, Gary Cornell, Jonathan Artist: Gennick, Michelle Lowman, Matthew Moodie, Jeffrey April Milne Pepper, Frank Pohlmann, Ben Renow-Clarke, Dominic Shakeshaft, Matt Wade, Tom Welsh Interior Designer: Anna Ishchenko ii Contents at a Glance Contents at a Glance ....................................................................iv Contents ....................................................................................v About the Author........................................................................ xv About the Technical Reviewer .......................................................xvi Acknowledgments......................................................................xvii Introduction............................................................................. xix Chapter 1: What Is CSS, and Why Should I Learn It?...............................1 Chapter 2: How Do I Improve the Look of Text and Links?.....................39 Chapter 3: How Can I Improve the Layout of My Text?..........................85 Chapter 4: How Can I Flow Text Around Images?............................... 121 Chapter 5: How Do I Add Backgrounds and Borders to Improve the Look of My Page? ..................................... 155 Chapter 6: How Do I Solve the Mysteries of Width and Height? ............. 199 Chapter 7: How Do I Create Differently Styled Sections?..................... 243 Chapter 8: How Do I Style Lists and Navigation Menus?....................... 275 Chapter 9: How Do I Style Tables?................................................. 325 Chapter 10: How Do I Position Elements Precisely on the Page?............ 363 Chapter 11: Are There Any Guidelines for Basic Page Layout?.............. 403 Chapter 12: How Do I Create Styles for Printing? .............................. 453 Appendix: CSS Properties and Selectors.......................................... 495 Index..................................................................................... 535 iv Contents Contents at a Glance ....................................................................iv Contents ....................................................................................v About the Author........................................................................ xv About the Technical Reviewer .......................................................xvi Acknowledgments......................................................................xvii Introduction............................................................................. xix ! Chapter 1: What Is CSS, and Why Should I Learn It?...............................1 ! A short history of CSS................................................................3 ! Why CSS has taken so long to be embraced by designers............................4 ! The time for CSS has finally come.......................................................6 ! What are the advantages of CSS?..................................................7 ! Write simpler markup......................................................................7 ! Turn into a quick change artist.........................................................10 ! Gain greater control over the look of page elements ..............................14 ! So, how do I use CSS?.............................................................. 16 ! Why are they called “cascading” style sheets?......................................18 ! How do I write a style rule?.............................................................19 ! Formatting CSS for ease of maintenance...........................................................................21 ! Adding comments to your CSS...........................................................................................22 ! Where do I create my CSS?..............................................................23 ! Using external style sheets.................................................................................................24 ! Using a <style> block.........................................................................................................27 ! Applying a style directly to an HTML element.....................................................................28 ! Don’t forget the cascade.....................................................................................................28 ! Using Internet Explorer conditional comments...................................................................30 ! Limiting which devices use your styles................................................32 ! Learning to write CSS well........................................................ 35 ! Avoiding common mistakes.............................................................35 ! Test your CSS early in several browsers ..............................................36 ! Building a useful toolset for working with CSS.......................................36 ! Chapter review..................................................................... 38 ! Chapter 2:How Do I Improve the Look of Text and Links?......................39 ! Exploring the CSS text properties ............................................... 40 ! Changing the default font and color of text................................... 43 ! Using font-family to choose a range of alternative fonts..........................44 ! Setting color values in CSS..............................................................51 ! Selectively applying a different font and color......................................53 v Getting StartED with CSS ! Changing the size of fonts........................................................ 56 Setting length with pixels, ems, and other units ! of measurement......................................................... 57 ! Using percentages............................................................... 60 ! Changing the look of fonts........................................................ 64 ! Italicizing text................................................................... 64 ! Making text bolder or lighter.................................................. 64 ! Displaying text in small caps .................................................. 65 ! Switching between uppercase and lowercase .............................. 65 ! Aligning and spacing text......................................................... 68 ! Aligning text horizontally...................................................... 69 ! Aligning text vertically......................................................... 69 ! Indenting the first line of text................................................ 70 ! Adjusting the vertical space between lines of text........................ 71 ! Adding or removing space between words.................................. 71 ! Increasing or decreasing the space between letters ...................... 71 ! Controlling whitespace and line wrapping .................................. 72 ! Styling text links ................................................................... 77 ! Just remember it’s a love-hate relationship................................ 78 ! Controlling underlines.......................................................... 79 ! Making full use of the cascade................................................ 81 ! Using the font shorthand property .............................................. 82 ! Chapter review..................................................................... 84 ! Chapter 3: How Can I Improve the Layout of My Text?..........................85 ! Sliding boxes and blocks .......................................................... 86 Two HTML tags that are the friends of CSS: ! <div> and <span>........................................................ 88 ! How CSS controls margins......................................................... 89 ! Understanding how vertical margins collapse .............................. 91 ! Setting margin values........................................................... 93 ! Using margins to improve page layout.......................................... 94 ! Removing the default margins from your pages............................ 94 ! Centering page content........................................................ 99 ! Using margin-left to indent text.............................................105 ! Using negative margins........................................................109 ! Applying margins to inline elements........................................111 ! Keeping your style sheet manageable .........................................112 ! Using the margin shorthand property.......................................113 ! Organizing your style rules for easier maintenance ......................116 ! Chapter review....................................................................119 vi Contents ! Chapter 4: How Can I Flow Text Around Images?............................... 121 ! CSS classes 101 ....................................................................123 ! Creating and applying CSS classes...........................................123 ! Using float to flow text around images........................................125 ! Creating generic classes to position images ...............................127 ! How do I center an image?....................................................128 ! What happens when the image is taller than the text?..................132 ! Using clear to force elements below a floated image....................134 ! What if an element is too wide to sit alongside a float?.................138 ! What happens to margins alongside a float?...............................139 ! Using ID selectors to style unique elements ..................................144 ! Deciding whether to use a class or an ID...................................145 ! Adding a caption to an image...................................................148 ! Chapter review....................................................................152 Chapter 5: How Do I Add Backgrounds and Borders to ! Improve the Look of My Page?...................................................... 155 ! Controlling backgrounds with CSS..............................................156 ! Changing the background color of an element............................157 ! Adding a background image ..................................................163 ! Controlling how background images repeat.............................166 Fixing a background image in relation to the ! browser viewport ...................................................168 ! Adjusting the position of a background image..........................169 ! Using the background shorthand property .................................176 ! Controlling borders with CSS....................................................179 ! Setting a border color.........................................................181 ! Setting a border style .........................................................181 ! Setting a border width ........................................................183 ! Using border shorthand properties..........................................183 ! Using borders to simulate embossing and indenting......................184 ! Understanding how borders affect layout..................................186 ! How do I get rid of the blue border around link images? ................193 How do I prevent backgrounds and borders from | ! displaying under floats?...............................................194 ! Chapter review....................................................................197 ! Chapter 6: How Do I Solve the Mysteries of Width and Height? ............. 199 ! Padding—the final piece of the CSS box model...............................200 ! Choosing between margins and padding....................................202 ! Using padding to add space around elements .............................203 ! Controlling width and height....................................................212 vii Getting StartED with CSS ! Using a fixed height............................................................214 Using minimum and maximum lengths to scale ! images and text........................................................223 ! How do I stop content spilling out of its container?.........................230 ! Controlling overspill with the overflow property .........................231 Using overflow as an alternative to clear with ! floated elements.......................................................234 Understanding the difference between visibility ! and display..............................................................236 ! Displaying a message to users of old browsers ............................238 ! Chapter review....................................................................240 ! Chapter 7: How Do I Create Differently Styled Sections?..................... 243 ! Adding a sidebar...................................................................245 ! Giving the sidebar different styles ..........................................250 ! Adding an accessible page heading.............................................259 ! Switching the sidebar to the other side .......................................263 ! Improving the image captions...................................................265 ! How do I tell which styles will be applied?....................................267 ! A review of selectors in CSS2.1..............................................268 ! Using specificity to work out which rule wins.............................271 ! Specificity the easy way ...................................................271 ! Specificity the official way................................................273 ! Chapter review....................................................................274 ! Chapter 8: How Do I Style Lists and Navigation Menus?....................... 275 ! Styling unordered and ordered lists............................................277 ! Changing the symbol or number.............................................277 ! Changing the position of the symbol........................................281 ! Replacing the symbol with your own image................................282 ! Using a background image for greater control .........................283 ! Using the list-style shorthand property.....................................285 ! Changing layout with the display property....................................286 ! Setting display to inline.......................................................288 ! Setting display to inline-block ...............................................289 ! Creating a navigation bar from a list...........................................291 ! Creating a vertical text-based navigation bar.............................292 ! Creating a horizontal text-based navigation bar..........................297 ! Using CSS sprites in a navigation bar........................................305 ! How do I continue a numbered list after a break?...........................310 ! Using CSS to generate numbered sequences..................................311 ! Adding content with :before and :after....................................312 viii Contents ! Adding images with pseudo-elements.......................................314 ! Generating content from an HTML attribute ..............................315 Using the content property to generate numbered ! sequences...............................................................315 ! Using generated content with numbered lists.............................321 ! Generating subsection numbers with nested lists.........................322 ! Chapter review....................................................................323 ! Chapter 9: How Do I Style Tables?................................................. 325 ! Understanding the anatomy of a table ........................................326 ! Basic table structure...........................................................326 ! Using HTML tags to define sections of a table.............................328 ! Defining table columns.....................................................328 ! Defining table header and footer rows ..................................330 ! Grouping table rows into sections........................................330 ! How browsers lay out tables .................................................332 ! Styling tables with CSS...........................................................334 ! Using CSS for table borders...................................................335 ! Adding borders to table cells.................................................336 ! How do I stop border widths from being doubled?........................337 ! Adding borders to columns and rows........................................340 ! Applying other styles to columns............................................341 ! What’s the CSS equivalent of cellspacing?.................................342 ! What’s the CSS equivalent of cellpadding?.................................343 ! Controlling the position of the table caption..............................344 ! Handling empty cells ..........................................................345 ! How can I control the width of my table?..................................347 How do I create scrolling table cells that work ! in all browsers?.........................................................350 ! How do I control the position of content in table cells?.................351 ! Chapter review....................................................................362 Chapter 10: How Do I Position Elements Precisely ! on the Page? ................................................................... 363 ! How does CSS positioning work? ................................................364 ! Understanding the different types of positioning.........................366 ! Fixing elements inside the browser window..................................367 ! How do I keep my navigation onscreen all the time?.....................367 ! Understanding the limitations of fixed positioning.......................374 ! Using relative positioning to nudge elements ................................377 ! Using relative positioning to create a containing block..................379 ! Moving elements precisely with absolute positioning.......................380 ix Getting StartED with CSS ! Why do absolutely positioned elements move?............................383 ! How do I center a page and use absolute positioning?...................385 ! What happens if I nest absolutely positioned elements?.................386 How do I control which element is on top when ! they overlap? ...........................................................389 ! What are the drawbacks of using absolute positioning?..................393 ! Positioning elements against a background image........................395 ! Cropping an image nondestructively with CSS................................399 ! Chapter review....................................................................402 ! Chapter 11: Are There Any Guidelines for Basic Page Layout?.............. 403 ! Getting the basics right..........................................................404 ! Who is the target audience?..................................................404 ! What size browser window should I design for? ...........................405 ! What type of layout is best—fixed or flexible? ............................406 ! Creating a single-column layout................................................409 ! Keeping a liquid display centered...........................................413 ! Creating a two-column layout...................................................415 ! Putting the sidebar first and floating it to one side......................416 ! Using a background image to simulate equal columns...................419 ! What happens if the sidebar is longer? .....................................421 ! Adding a “skip to main content” link for screen readers................423 ! Putting the main content first ...............................................424 ! Floating the main content.................................................425 ! Using absolute positioning for the sidebar..............................426 ! Using a negative margin to float the sidebar into position...........428 ! How do I make a more flexible two-column layout?......................434 ! Creating a three-column layout.................................................437 ! Creating faux columns for a three-column layout ........................437 ! Using a single image for a fixed-width layout..........................437 ! Using multiple images for a hybrid layout...............................439 ! Putting the main content first in a three-column layout ................440 ! Creating subcolumns...........................................................444 ! Table-related display—the future of layout?..................................446 ! Chapter review....................................................................451 ! Chapter 12: How Do I Create Styles for Printing? .............................. 453 ! What’s different about print CSS?..............................................454 ! What print style sheets cannot do...........................................455 Setting page margins with the @page rule and ! pseudo-classes..........................................................456 ! Controlling where to break content between pages......................458 x