Index
Symbols and Numbers
#id (ID selector), 38
#rgb color values, 62
#rrggbb color values, 62
% (percentage-based units), 59-60
* (universal selector), 38
/* and */ in comments, xix
; (semicolons), at-rules and, 4
<url> function, 61
@font-face rule, 162-163
@media rule, 208-209
@page rule, 211
as escape character, xix
960 grid system, 226
A
A-grade browsers, 33
A+-grade browsers, 34
absolute length-based units of measurement, 60
absolute positioning, 85-88
Accessible Rich Internet Application (WAI-ARIA) specification, 245-246
action pseudo-class selectors, 41
:active pseudo-class, 41
actual values, 9
adjacent sibling combinatory, 49
Adobe Flash 169
Flash replacement with sIFR, 169
z-index and, 92
Adobe Kuler tool, 67
::after pseudo-element selector, 47
Almost Standards Mode, 25
alpha color transparency, 64-66
and keyword, 214
at-rules, 4-5
attribute selectors, 39-41
B
background images 124-125
background-image property, 124-125
background-position property, 125-126
basics, 128
buttons and, 202
for faking rounded corners, 140-141
fitting to elements, 128
layering, 107-109
multiple, 127
sprites, 133-135
background images, basics, 128
background images (buttons), 202
background images, fitting to elements, 128
background images, multiple, 127
background shorthand property, 126-127
background-attachment property, 125
background-color property, 124, 125
background-position property, 125-126
background-repeat property, 125
background-size property, 235-240
bullets, custom, 128-130
faux columns, 106-107
form controls and, 191
images on list items, 174
overlapping elements, 130-131
smart tiling, 131-132
sprite images, 133-135
::before and ::after pseudo-elements, 47, 175, 176
B-grade browsers, 33
Blueprint, 226
body element, 108-109
borders, 135-145
basics, 123
border boxes, 82
border images, 241
border shorthand property, 136-137
border-collapse property (tables), 182-183
border-color property, 135
border-image (shorthand) property, 243-245
border-image property, 242
border-image-repeat property, 243
border-image-slice property, 242-243
border-image-source property, 242
border-radius property, 137-138
border-spacing property (tables), 184
border-style property, 135-136
border-width property, 73, 136
on floated elements, 94
form controls and, 191
outlines, 138-139
rounded corners, faking. 139-145 See rounded corners, faking
box model, 69-82
alternative box model, 81-82
basics, 69-70
box sizing property, 81-82
horizontal centering blocks, 80-81
min and max dimensions, 74-75
negative margins, 78-80
nesting elements, 75-77
percentage calculations and, 60
properties, 71-74
box-shadow property, 232-234
box-sizing property, 81-82
bridge libraries, 222-225
browsers. 21-35 See Web browsers
“Bulletproof @font-face syntax,” 165
bullets, custom, 128-130
Burdette, Lenny, 111
buttons, 201-204. See also radio buttons
C
calc() function, 246-247
Candidate Recommendations (CR), specification drafts, 10
cascading process, 5-6
case sensitivity (CSS), xviii–xix
cells in tables, 182-185
chaining selectors, 50
:checked pseudo-class selector, 193-194
child combinator, 49
child selector, 49
Chrome developer tools, xxi, xxii
Clark, Keith, 223
Clark, Richard, 221
.class (class selector), 39
clear property, 97-99
clearfix utility class, 115
code xvii
code examples for this book, xvii
CSS coding styles, 15-20
writing CSS code, xviii–xxii
color 64-66
with alpha transparency, 64-66
basics, 62-64
border-color property, 135
color gradiants, 240-241
color palettes, 67-68
design and, 67
form controls and, 190-191
outline-color property, 139
text color, 64
columns. 121-122 See also multicolumn layouts
constraints, column design and, 121-122
faux, 106-107
fixed-sized, 117
flexible, 119
combinators, 48-49
combining selectors, 50
comments, CSS code and, xix, 17-20
conditional comments, 29-30
constraints, column design and, 121-122
contain keyword, 238
containers 88
container elements, 88
containing blocks, 89-91
escaping, 110-111
content 101
hiding, 112
content blocks, creating, 102-104
continuous media, defined, 12-13
corners. 139-145 See rounded corners, faking
counters (lists), 177-179
cover keyword, 238
“Creating Presentations/Slideshows with HTML & CSS,” 207
CSS 1-2
basics, 1-2
code, writing, viii–xxii
coding styles, 15-20
CSS2, CSS 2.1, CSS3, 11
Curvy Corners JavaScript library, 145, 224
custom bullets, 128-130
D
dashed keyword, 136
data 61
data: URI scheme, 61
tabular data, inputting (forms), 199
The data: URI kitchen tool, 61
declaration blocks, 3
declarations/declaration blocks, 3
descendant combinator, 48-49
design 133
clever design, 133
color and, 67
responsive design (media), 216-217
developer tools, xxi–xxii
devices 213-214
handheld, 213-214
user agents and, 12
dimensions, min and max in box model, 74-75
:disabled pseudo-class selector, 193-194
display property, 84-85
display:none property, 112
DOCTYPE switches, 25-26
Document Object Model (DOM) JavaScript and, 15
documents, CSS code and, 17-18
DOM, JavaScript and, 15
dotted keyword, 135
drafts, of specifications, 10
drop-down menus, 111-112
duration of transitions, 254
dynamic pseudo-classes, 41
E
eCSStender, 223
Edwards, Dean, 223
elements 9
basics, 9
element types for content display, 84-85
form elements. 189-194 See form controls
nested, font sizes and, 149-151
nesting, 75-77
overlapping in backgrounds, 130-131
required vs. optional embellishments, 140
reusing. 219-222 See resets
embedding fonts, 162-165
empty pseudo-class selector, 46
Eric Meyer’s Reset, 221
escape character (), xix
ex units, 60
F
faux columns, 106-107
F-grade browsers, 34
fields, conditional (forms), 199-201
Firefox xxi
Yahoo! YSlow, xxii
first and last child pseudo-class selectors, 44-45
first and last of type pseudo-class selectors, 45
::first-letter pseudo-element selector, 47
::first-line pseudo-element selector, 47
fixed positioning, 88-89
fixed-sized columns, 117, 119-121
fixed-width layouts, 119
Flash 169
Flash replacement with sIFR, 169
z-index and, 92
flexible columns, 119, 121, 247
floated columns, wrapping, 115
floats 93-97
basics, 93-97
clear property and, 97-99
floated columns, wrapping, 115
floated list items, 109-110
floating into margins, 104-105
:focus pseudo-class, 41
Font Squirrel @font-face Generator, 165, 166
font styling 153-154
font shorthand property, 153-154
font styles, 152
font-family property, 148-149
font-size property, 149-151
font-style property, 152
font-variant property, 152
font-weight property, 152
letter-spacing property, 157
reviewing for style and legibility, 160
text-align property., 157
text-decoration property, 155-156
text-indent property, 158
text-shadow property, 159
text-transform property, 156
white-space property, 158
word-spacing property, 156
word-wrap property, 158
fonts. 153-154 See also font styling; Web fonts and typography
embedding, 162-165
font services, 165-166
Fonts.com offerings, 165-166
form controls, 189-194
backgrounds and borders, 190-191
inheritance, 192-193
pseudo-class selectors, 193-194
sizing, 189-190
form element layouts 199-201
conditional fields, 199-201
labels above fields, 194-195
labels beside fields, 197
multicolumn forms, 195-196
placeholder text, 201
radio buttons and check boxes, 197-199
tabular data, inputting, 199
forms, 187-201
in different browsers, 188, 189, 192
form controls. 189-194 See form controls
form element layouts. 199-201 See form element layouts
in various operating systems, 187-188
four-sided properties, defining values, 4
frameworks, 225-228
common frameworks, 226
limitations of, 227-228
functional notation, 62-63
G
general sibling combinator, 49
generated content, 175-176, 212
global styles, 16
Google 166
Google Font Directory, 166
Google Page Speed, xxii
gradiants, color, 240-241
grading (browsers), 32-34
groove keyword, 136
Gustafson, Aaron, 223
gutters around text, 77, 79, 104-105
H
hacks, targeting browsers with, 28-29
Halbach, Till, 207
handheld devices, 213-214
hasLayout flag, 30-32
height properties, 70, 71, 153
hexadecimal color values, 62
hidden keyword, 93
horizontal centering blocks, 80-81
:hover pseudo-class, 41
hsla(h,s,l,a), color value, 65, 66
hsl(h,s,l), color scheme, 63
HTML <link> element, 13-14
HTML <style> element, 14
html element, 108-109
HTML5 Reset, 221
hue-saturation-lightness color scheme, 63
hyperlinks, printing and, 212
I
ID selector, 38
IE7.js, 223
images. 124-125 See also background images
border images, 241-245
image replacement, 167-169
list-style-image property, 173, 174
“Increase Your Font Stacks With Font Matrix,” 162
inline elements, 9
Internet Explorer (IE) 223
bridge libraries and, 223
conditional comments and, 29-30
Developer Tools, xxi
hasLayout and, 30-32
Irish, Paul, 165
J
JavaScript 145
to add four-corner elements, 145
browser support and, 222-225
drop-in libraries for browser support, 34-35
style sheets and, 15
The JavaScript Pocket Guide, 111
K
keywords. 125 See also specific keywords
background-repeat property and, 125
border-image-repeat property and, 243
border-style property, 135-136
color keywords, 63
font-family property, 148-149
lists, 175
Koch, Peter-Paul, 27
Korpela, Jukka, 27
L
Lamb, Iain, 160
language pseudo-class, 43
Last Call periods (LC), 10
last child pseudo-class, 44-45
last of type pseudo-class, 45
Less, 228
letter-spacing property, 157
library, drop-in JavaScript, 34-35
licensing of fonts, 165-166
line-height property, 153
link pseudo-class selectors, 41
links as buttons, 202-204
liquid layouts, 119
lists, 171-179
::before and ::after pseudo-elements, 175, 176
::marker pseudo-element, 175
counter() function, 177
counters, 177-179
generated content, 175-176
list items, 109-110
list-item default value, 172
ul, ol, and li, 172
LoVe/HAte, 42
M
Marcotte, Ethan, 217
max-width property, 121-122
measurements, 58-60
media 213-214
mobile, 213-214
print, 210-213
queries, 214-218
types. 208 See media types
media types 208
@import rule, 208
@media rule, 208-209
media HTML attribute, 207-208
specifying, 207
Meyer, Eric, 221
Microsoft 29-30
conditional comments, 29-30
Web Embedding Fonts Tool (WEFT), 165
min and max dimensions, 74-75
min-width and max-width properties, 121-122
mixed-column layouts, 119-121
mobile media, 213-214
Modernizr, 223-224
Mozilla Developer Center, 211
multicolumn layouts 121-122
constraints, 121-122
flexible columns, 119, 121, 247
floated columns, wrapping, 115
forms, 195-196
mixed-columns, 119-121
three columns, 117-118
two columns, 113-116
“Multi-column Layouts Climb Out of the Box,” 118
multiple background images, 127
N
negation pseudo-class selector, 46
negative margins, 78-80
negative positioning, 110
Neil, Jon, 22
nesting 75-77
elements, 75-77
lists and, 175
not keyword, 214-215
nth child pseudo-class selectors, 43-44
nth of type pseudo-class selectors, 45
O
Object Oriented CSS (OOCSS), 226
ol list element, 172
only child pseudo-class selector, 45
only keyword, 215
only of type pseudo-class selector, 46
operating systems, forms in different, 187-188
order of appearance of declarations, 6
origins, positioning and, 89-90
outlines, 138-139
outline shorthand property, 139
outline-color property, 139
outline-style property, 139
outline-width property, 139
overlays, 111-112
P
page layouts, 101-122
backgrounds. 105-109 See backgrounds
content blocks, creating, 102-104
escaping containers, 110-111
floating into margins, 104-105
list items, 109-110
multicolumn. 121-122 See multicolumn layouts
overlays, tooltips, drop-down menus, 111-112
page-break properties, 210-211
paged media, defined, 13
pages 211-212
preparing for printing, 211-212
Pearce, Alan, 118
Pedrick, Chris, xxii
Peekaboo bug, 31
percentage-based units (%), 59-60
pixels, faking rounded corners and, 145
position 125
background-attachment property, 125
list-style-position property, 173
positioning elements, 83-99
absolute positioning, 85-88
clear property, 97-99
default positioning, changing, 84
display property, 84-85
fixed positioning, 88-89
floats, 93-97
origins and containing blocks, 89-91
position basics, 85
relative positioning, 85
static value, 85
visibility property, 93
z-index property, 92
positioning properties, 125-126
position:relative, 102
preferences, user browser settings and, 23
preprocessors, 228
print media, 210-213
properties. 71-74 See also specific properties
box model properties, 71-74
camel casing in multi-word, 15
four-sided, values for, 4
inheritance and, 7
style properties, defined, 3
user style, custom, 23
Proposed Recommendation (PR) specification drafts, 10
pseudo-class selectors, 41-46
:enabled, :disabled, :checked (UI pseudo-classes), 42
:first-child, :last-child (pseudo-classes), 44-45
:first-of-type, : last-of-type (pseudo-classes), 45
:hover,:active, :focus (action pseudo-classes), 41
:lang() (language pseudo-class), 43
:link, :visited (link pseudo-classes), 41
LoVe/HAte, 42
:not() (negation pseudo-class), 46
:nth-child(), :nth-last-child() (pseudo-classes), 43-44
:nth-of-type(), :nth-last-of-type() (pseudo-classes), 45
:only-child (pseudo-class), 45
:only-of-type (pseudo-class), 46
:root (root element pseudo-class), 43
:target (pseudo-class), 42
pseudo-element selectors, 46-48
Q
queries, media, 214-218
Quirks Mode, 25
R
radio buttons, 189-190, 192, 197-199
radius 137-138
border-radius property, 137-138
Recommendations (R), specification drafts, 10-11
relational selectors, 48-49
relative length–based units of measurement, 60
rendering modes, 24-27
replaced elements, 9
:required pseudo-class selector, 193-194
resets, 219-222
resources, general, xviii
“Responsive Web Design,” 217
RGB colors, 62-63
rgba(r,g,b,a) color values, 65, 66
rgb(r,g,b), 62-63
ridge keyword, 136
root element pseudo-class selectors, 43
rotations, 249-253
rounded corners, faking, 139-145
background images, using, 140-141
drawing pixels, 145
four backgrounds, using, 143-145
when one edge is fixed, 141-143
rows in tables, 185
rule sets, 3
rules 162-163
@font-face rule, 162-163
@import rule (HTML), 14
@media rule, 208-209
@page rule, 211
coding styles and, 18-20
Rutter, Richard, 162
S
Safari xxi
developer tools, xxi
form controls and, 189
Sass, 229
Schmitt, Christopher, 188
selection pseudo-element selector, 48
Selectivzr, 223
SelectOracle, 50
selectors, 37-56. See also specific selectors
#id (ID selector), 38
* (universal selector), 38
arrangement of, 18-20
attribute selectors, 39-41
browser support for, 54
.class (class selector), 39
combinators, 48-49
combining and chaining, 50
grouping, 54
!important declaration, 53
pseudo-class selectors. 41-46 See pseudo-class selectors
pseudo-element selectors, 46-48
readability of, 55
resuability of, 55-56
specificity, 51-53
speed of, 54-55
statements and, 3
targeting browsers with, 28
type selectors, 38
semicolons (;), at-rules and, 4
shadows, 232-235
Shea, Dave, 169
shorthand properties. 126-127 See specific shorthand properties
background shorthand property, 126-127
border/border radius shorthand properties, 136-138
font shorthand property, 153-154
list-style shorthand property, 174
outline shorthand property, 139
transition shorthand property, 254-255
sidebars 116
two-column layouts with right sidebar, 116
sIFR project, 169
Sitepoint CSS Reference, 211
sites. 25 See Web sites
size 236-240
background-size property, 236-240
fixed-sized columns, 117, 119-121
of fonts, relative vs. fixed, 151
font-size property, 149-151
form controls, sizing, 189-190
smart tiling, 131-132
source order of declarations, 6
specifications, for CSS and HTML, 9-12
specificity of declarations, 5
sprites, background images, 133-135
Standards Mode, 24-25
statements, 2-4. See also at-rules; rules
structural pseudo-classes, 41
style attribute (HTML), 15
style sheets 5
author, user, user agents, 5
basics, 2
browsers, 22
styles. 153-154 See also font styling
border-style property, 135-136
code locations and, 16-17
fonts reviewing for style and legibility, 160
outline-style property, 139
Stylish Firefox extension, 23
Sullivan, Nicole, 226
syntax hacks, 28-29
system fonts, 161-162
T
tables, 180-185
basics, 180-181
border-collapse property, 182-183
border-spacing property, 184
display values, 184-185
table, table-row, table-caption: elements, 84
table-layout property, 182
text-align property, 184
vertical-align property, 184
tabular data, inputting (forms), 199
target pseudo-class selector, 42
text. 153-154 See also font styling; Web fonts and typography
placeholder text (forms), 201
text-align property, 157
text-align property (tables), 184
text-decoration property, 155-156
text-indent property, 158
text-shadow property, 159
text-shadow property, 202
text-transform property, 156
underlining, 156
white-space property, 158
word-spacing property, 156
three-column layouts, 117-118
tiling 125
background-repeat property and, 125
tiling, smart, 131-132
timing of transitions, 254
tools. 153-154 See also font styling
Adobe Kuler tool, 67
basics, xx–xxii
border-radius, 138
for color gradients, 241
The data: URI kitchen tool, 61
outlines as debugging tools, 139
SelectOracle, 50
Stylish Firefox extension, 23
Web Embedding Fonts Tool (WEFT), 165
tooltips, 111-112
transformations and rotations, 247-253
<transform-function> values, 248-249
transform-origin property, 251-253
transitions, 253-255
shorthand transition property, 254-255
transition-duration property, 254
transition-property, 253
transition-timing-function, 254
translation-delay property, 254
transparency, adding to color, 64-66
transparent color keyword, 66
Tricks Button Maker (CSS), 202
two-column layouts, 113-116
type selectors, 38
typeface. 153-154 See font styling
typefaces, specifying, 161-169
@font-face rule, 162-163
custom fonts via text replacement, 166-169
embeddable fonts, creating, 165
font embedding, 162
font formats, 164-165
font licensing and foundries, 165-166
system fonts, 161-162
Typekit, 166
Typograph , 160
typography. 147-169 See Web fonts and typography
U
UI pseudo-class selectors, 42
ul list element, 172
uniform resource identifiers (URIs), 61
universal selector, 38
URLs, 61
used values, 8-9
user agents, 12-13
user interfaces. 187-201 See also forms
radio buttons and check boxes, 197-199
in various operating systems, 187-188
V
:valid and :invalid pseudo-class selectors, 193-194
validation tools, xx
values 248-249
<transform-function> values, 248-249
alpha values, 65
background-repeat property and, 125
basics, 8-9
of declared properties, 3
display values (tables), 184-185
for four-sided properties, 4
inheritance and, 7-8
spcified, computed, used and actual, 8-9
vertical-align property, 154-155, 184
visibility:hidden property, 112
visible property, 93
W
WAI-ARIA roles, 245-246
Walker, Alex, 115
Web browsers, 21-35
bridge libraries and, 222-225
browser style sheets, 22
browser support for CSS properties, 232
CSS support via JavaScript, 34-35
forms in different, 187-188, 192
grading, 32-34
hasLayout flag, 30-32
media queries support, 217-218
rendering modes, 24-27
targeting, 27-30
user agents and, 12
user settings, 23
user style sheets, 23-24
Web Developer Toolbar extension, xxii
Web Embedding Fonts Tool (WEFT), 165
Web fonts and typography, 147-169
@font-face rule, 162-163
customizing text. 153-154 See font styling
embeddable fonts, creating, 165
font formats, 164-165
font licensing and foundries, 165-166
font shorthand property, 153-154
font-family property, 148-149
font-size property, 149-151
font-style property, 152
font-variant property, 152
font-weight property, 152
line-height property, 153
relative vs. fixed-sized fonts, 151
reviewing for style and legibility, 160
system fonts, 161-162
vertical-align property, 154-155
Web inspectors, xx–xxi
Web sites for downloading 67
Adobe Kuler tool, 67
code examples for this book, xvii
The data: URI kitchen tool, 61
Firebug extension, xxi
X-UA-Compatible headers, 27
Web sites for further information 223
bridge libraries, 223
browser support, 232
clearfix utility class, 115
CSS hacks, 29
CSS2.1 and CSS3, 11
floated elements, 99
frameworks, 226
general resources, xviii
Google Page Speed, xxii
“Graded Browser Support,” 32
hasLayout, 32
HSL colors, 63
IE’s base style sheet, 22
image replacement, 169
modes, 27
Mozilla Developer Center, 211
Quirks Mode, 26
resets, 221
screenshots, 188
SelectOracle, 50
shadows, 235
sIFR project, 169
Sitepoint CSS Reference, 211
Stylish Firefox extension, 23
transitions, 255
W3C, 9
W3C validation service, xx
Web fonts and styling, 160, 162
working around styling limitations, 192
Yahoo! YSlow, xxii
Web sites 25
modes and building new, 25
Web standards and specifications, 9-12
WebFonts.info Directory, 166
weight of declarations, 5
Westciv, 241
When Can I Use..., 232
whitespace, xix
white-space property, 158
width, of tables, 182
width properties 136
border-width, 136
outline-width, 139
word-spacing property, 156
word-wrap property, 158
X
X-grade browsers, 34
X-UA-Compatible headers, 26-27
Y
Yahoo! YSlow, xxii
YUI Library, 227
YUI Library CSS Reset, 221
Z
zebra striping, 43-44