#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-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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
queries, media, 214-218
Quirks Mode, 25
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
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
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
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
: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
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-grade browsers, 34
X-UA-Compatible headers, 26-27
Yahoo! YSlow, xxii
YUI Library, 227
YUI Library CSS Reset, 221
zebra striping, 43-44