The CSS3 Anthology: Take Your Sites to New Heights

443 Pages·2012·30.59 MB·English

by  Rachel Andrew

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
THE CSS3
ANTHOLOGY
TAKE YOUR SITES TO NEW HEIGHTS
BY RACHEL ANDREW
4TH EDITION
iv
The CSS3 Anthology: Take Your Sites to New Heights
byRachelAndrew
Copyright©2012SitePointPty.Ltd.
Product Manager:SimonMackie Assistant Technical Editor:DianaMacDonald
Technical Editor:TomMuseth Indexer:MicheleCombes
Expert Reviewer:LouisLazaris Cover Designer:AlexWalker
Editor:KellySteele
Printing History: Latest Update:March2012
1stEd.Nov.2004,2ndEd.May2007,
3rdEd.July2009,4thEd.March2012
Notice of Rights
Allrightsreserved.Nopartofthisbookmaybereproduced,storedinaretrievalsystem,ortransmitted
inanyformorbyanymeanswithoutthepriorwrittenpermissionofthepublisher,exceptinthecase
ofbriefquotationsincludedincriticalarticlesorreviews.
Notice of Liability
Theauthorsandpublisherhavemadeeveryefforttoensuretheaccuracyoftheinformationherein.
However,theinformationcontainedinthisbookissoldwithoutwarranty,eitherexpressorimplied.
NeithertheauthorsandSitePointPty.Ltd.,noritsdealersordistributors,willbeheldliableforany
damagestobecausedeitherdirectlyorindirectlybytheinstructionscontainedinthisbook,orbythe
softwareorhardwareproductsdescribedherein.
Trademark Notice
Ratherthanindicatingeveryoccurrenceofatrademarkednameassuch,thisbookusesthenamesonly
inaneditorialfashionandtothebenefitofthetrademarkownerwithnointentionofinfringementof
thetrademark.
PublishedbySitePointPty.Ltd.
48CambridgeStreetCollingwood
VICAustralia3066
Web:www.sitepoint.com
Email:[email protected]
ISBN978-0-9871530-2-9(print)
ISBN978-0-9871530-6-7(ebook)
PrintedandboundintheUnitedStatesofAmerica
v
About Rachel Andrew
RachelAndrewisafront-andback-endwebdeveloperwhohaswrittennumerousbooks,
includingthefirstthreeeditionsofTheCSSAnthology.Herworkinhercompany
edgeofmyseat.com(http://www.edgeofmyseat.com/)informsherwriting,ensuringitremains
groundedintherealworldofclientprojects,largeandsmall.
About Louis Lazaris
LouisLazarisisafreelancewebdesignerandfront-enddeveloperbasedinToronto,Canada
whohasbeeninvolvedinthewebdesignindustrysince2000.Louishasbeenworkingon
websiteseversincethedayswhentablelayoutsandone-pixelGIFsdominatedtheindustry.
Overthepastfiveyears,hehascometoembracewebstandardswhileendeavoringtopromote
bestpracticesthathelpdevelopersandtheirclientsreachpracticalgoalsfortheirprojects.
Louiswritesregularlyforanumberoftopwebdesignblogsincludinghisownsite,Impressive
Webs(http://www.impressivewebs.com/).
About SitePoint
SitePointspecializesinpublishingfun,practical,andeasy-to-understandcontentforweb
professionals.Visithttp://www.sitepoint.com/toaccessourblogs,books,newsletters,articles,
andcommunityforums.
ForBethany.
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
x
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
xi
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
xii
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