Index
Symbols
“...” (double quotation marks), declaration lists, 39
‘...’ (single quotation marks), 39
/ (slash), comments, 67
& (ampersand), character entities, 129, 424
* (asterisk), universal selector, 61–63
{ } curly brackets. See curly brackets { }, CSS rules
Numbers
3D
text shadow effect, 168
8-bit Unicode Transformation Format (UTF-8) character set, 126, 423–428
A
absolute values
transforming length value, 311
vertical text alignment, 174–175
accessibility
access keys for, 339
color and, 201
content in <body> for, 240
CSS2 emphasis on, 7
accesskey attribute, 339
adaptive design
responsive Web design, 353
adjacent sibling selector, 78–79
adjacent siblings, family tree, 70
Adobe’s Kuler tool, online color scheme, 200
:after pseudo-element, 96, 98–99
Aggregate method, style sheets, 384
alpha values
color transparency, 190
element opacity, 301
text color, 203
alphabetical order, selectors, 378
ampersand (&), character entities, 129, 424
analogous color-combination scheme, 198
angle quotation marks, 244
angle value
2D transforms, 314
transformations, 311
ANI images, 239
animations, in CSS3, 14
apps, mobile, 357
aspect-ratio, media queries, 104–105
asterisk (*), universal selector, 61–63
attachment property, background image, 205–206, 208
attributes, assigning to styles, 2, 100–103
Audio and Video Timed media playback, 27
author styles, 118
auto value
background-image, 205
background-size, 209
cursor, 238
overriding inheritance, 116
table-layout, 228
text-align-last, 172
text-justify, 173
width and height, 256
automatic method, table-layout, 228
Available symbol, browsers, 410
B
backface-visibility property, 3D transformations, 318
background, specifying gradient as, 195
background color
differentiating hypertext from text, 340
specifying with background image, 211
styling for print, 114
text and, 203
using CSS sprites, 344
background images
best practices, 404
differentiating hypertext from text, 340
gradients and multiple, 212–216
new in CSS3, 14
background properties
adding multiple images and gradients, 212–216
getting started, 184
overview of, 183
putting it all together, 217–218
quick reference, 414
setting background color, 204
setting background images, 205–211
background shorthand property, 212–216
background-color property
setting background color, 204
transitions, 321
values, 212
background-image property
setting background images, 206
setting gradients in background, 195
transitions, 321
values, 212
backward compatibility, XHTML2 and, 25
:before pseudo-element, 96, 98–99
best practices
CSS libraries and frameworks, 376
overview of, 375
readable style sheets, 376–380
troubleshooting CSS code, 386–389
validating CSS code, 395
viewing CSS with Firebug, 390–392
viewing CSS with Web Inspector, 390, 393–394
billing systems, Web font service bureaus, 143
blink value, obsolete for text, 180
block value, display property, 252, 254
Blueprint CSS framework, 376
blur
setting element’s shadow, 302–303
text drop shadow, 166
text shadow effect, 168
<body> tag
adding unique name or ID to each, 401
choosing background color for body, 196
HTML document setup, 30
HTML document structure, 19
keeping content within, 240
specifying styles with @media, 112
bold, bolder, boldest, for text, 149
border property, 190, 251, 269–270
border-bottom property, 340, 359
border-collapse property, 230–231
border-image property, 274–275
border-radius properties, 272–273
borders
background image for, 208, 211, 274–275
collapsing between table cells, 230–231
colors, 197
CSS resets for, 359
element edge within, 287
of element’s box, 251
fixing box model for older versions of IE, 338
multiple, 304
new in CSS3, 14
setting how box sizes, 258
border-spacing property, 229
both keyword, clear, 264
box properties
coming soon, 280
controlling overflow content, 259–261
element’s outline, 268
element’s width and height, 255–258
floating elements in window, 262–264
multicolumn text layout, 278–279
putting it all together, 281–282
rounding border corners, 272–273
setting how box sizes, 258
understanding element’s box, 250–251
boxes
fixing for older IE versions, 333, 337–338
new features in CSS3, 15
box-resize property, 251
box-shadow property, 190, 302–303
break points, 352–353, 366–367
break tag clearfix, fixing float problem, 335
brightness, using color wheel to choose, 198
browser extensions, CSS3, 12–13
browsers
default margin issues, 267
defining style sheets, 118
displaying documents, 286
inherited styles, 20
mouse pointer appearance and, 238
responsive design for multiple. See responsive Web design
symbols indicating values available for use by. See quick reference
using HTML5, 29
Web font support, 134
z-index order determined by, 295
C
cache, font file, 139
Canvas element, new in HTML5, 27
capitalize value, text-transform, 164–165
caption keyword, mimicking visitor’s font style, 152
caption-side property, tables, 233–234
cascade order
!important declaration and, 117–118
best practices, 403
grouped selectors and, 66
troubleshooting CSS code, 386
typeface overrides and, 132
characters
encoding HTML, 129
encoding HTML and UTL, 423–428
specifying character set, 126
child elements
box model, 250
of element’s box, 250
family tree, 70
floating elements in window, 263
in nested tags, 250
pseudo-classes for styling, 90–91
setting position of, 293
choke, setting shadows, 302
Chrome, 393
circle shape value, radial gradients, 193
class selectors
CSS rules, 9
elements styled by, 36
troubleshooting CSS code, 386
classes
generic names for, 401
mixing and matching, 402
setting up float, 264
clear property, 264
clearfix class, 335
clip property
setting background images, 205–206, 210
text-overflow, 261
clipping, defined, 288
colon (:), CSS declarations, 39
color
emotional associations of color, 196
gradients. See gradients, color
new in CSS3, 14
for readable style sheets, 378–379
shadows, 302
transitioning CSS properties, 320–324
color properties
accessibility for visually impaired, 201
choosing color palette, 196–201
choosing color values, 185–190
creating color gradients, 191–195
getting started, 184
other ways to add color, 190
overview of, 183
putting it all together, 217–218
quick reference, 414
Color Scheme Designer tool, 200
color values
alpha values for transparency, 190
backgrounds, 204
color wheel, 198
HSL, 189
multiple background images, 213
overview of, 185
shadows, 303
text, 202
color wheel
online tool for advanced, 200
color-index property, media queries, 106
Colour Contrast Check tool, 203
ColRD: Palette Creator tool, 200
column-count property, 278
column-gap property, 279
column-rule property, 279
columns. See multicolumn layouts
combinatory selectors, 71
comments
best practices, 406
grouping selectors with, 64–66
setting up conditional styles for IE, 364–365
compact property, 254
complementary color-combination scheme, 199
compound color-combination scheme, 199
compression, CSS code, 396–398
condensed fonts, 150
conditional styles, Internet Explorer
fixing box model for older versions, 338
responsive Web design, 353, 370–373
content. See also generated content properties
defining background image, 208, 211
of element’s box, 250
new features in CSS3, 15
progressive enhancement and, 355
setting how box sizes, 258
styling for print, 114
content property, 240, 242–243, 250–251
content-box value, box-sizing, 258
contextual selectors, 70
overview of, 71
converting licensed fonts, 140
copy, color(s) for, 197
counter lists, multiple, 242–243
couplet values, RGB hex, 188
CSS (Cascading Style Sheets), overview
defined, 1
HTML and, 8
libraries and frameworks, 376
rule parts, 11
styles, 2
word processor styles vs., 3
CSS basics
basic selectors, 36
overview of, 35
CSS resets
Eric Meyer’s, 362
overriding browser default styles with, 358–359
with universal selectors, 63
using universal selector for simple, 360
what you should reset, 359
Yahoo’s Reset CSS, 361
adding CSS image rollovers to Web page, 342–344
best practices using RGB for, 405
creating using background images, 211
origin of, 344
overview of, 342
CSS Validator, 395
CSS1 (CSS Level 1), 7
CSS2 (CSS Level 2), 7
CSS2.1 (CSS Level 2.1), 118
CSS3 (CSS Level 3), 7, 14–15, 29
CSS3 Gradient Generator, 195
CSS4 (CSS Level 4), working draft, 15
CUR images, 239
class selectors, 53
embedded styles, 41
external CSS file, 45
troubleshooting CSS code, 386
currentcolor keyword, 188, 204
cursive fonts, 128
cursors, mouse pointer appearance, 238–239
D
debugging CSS, 118
decimal values, color, 185–187, 189
decimals, setting bullet style, 223
declarations
colons in, 39
CSS rules and, 11
grouped selectors receiving same, 64–66
quotation marks in, 39
reusable classes and, 54
troubleshooting CSS code, 386, 389
unique IDs and, 58
universal styles and, 61
default styles, browser, 20, 358–362
DeGraeve’s Color Palette Generator tool, 200
<del> tag, text strikethrough vs., 180
dependent class selector, 36, 54
design and interface techniques
creating CSS drop-down menu, 345–346
creating multicolumn layouts with float, 330–333
fixing box model for older versions of IE, 337–338
putting it all together, 347–348
styling links vs. navigation, 339–341
dingbats, 129
display area, browser, 287
display property, 252–254, 297
Divide and Conquer method, style sheet strategy, 383
doctype (<!DOCTYPE>)
browser modes set by, 363
HTML document structure, 19, 30–31, 399
for markup languages, 29
document type definition (DTD), 337–338
browser windows displaying, 286
editing in HTML5, 27
structure of HTML, 20
double quotation marks (“...”), declaration lists, 39
drag-and-drop, 27
drop shadows, 166–168, 302–303
DTD (document type definition), 337–338
Dynamic method, style sheet strategy, 385
dynamic pseudo-classes, 82–83, 88–89, 320–324
dynamic styles, 402
E
editing declarations, 392, 394
element edge, 287
element family tree, 70
elements, HTML
applying CSS properties to specific, 23
block-level, 22
including default styles for, 401
not setting style for particular, 94–95
setting outline, 268
setting width and height, 255–258, 287
visual formatting properties. See visual formatting properties
ellipsis, text-overflow property, 261
elliptical corners, borders, 273
elliptical shape value, radial gradients, 193
<em> tag, 20, 72–81, 144–145, 160, 174
Emastic CSS framework, 376
Embedded OpenType (EOT) Web font format, 134–135, 137–138, 140
embedded style sheets
making declaration !important, 117–118
not placing in final code, 42
using @media rule to specify styles, 112
emboss text, text shadows, 168
emotional associations, color, 196
empty-cells property, 232
encoding
HTML and UTL character, 423–428
HTML character entities, 129
End User License Agreements (EULA), Web fonts, 140
EOT (Embedded OpenType) Web font format, 134–135, 137–138, 140
EULA (End User License Agreements), Web fonts, 140
expanded fonts, 150
extensions, CSS browser
creating color gradients, 191
defined, 12
importance of coding with, 326
external CSS files
adding styles to Web sites, 43–49
external style sheets
best practices, 400
making declaration !important, 117–118
placing all styles in, 381
progressive enhancement and, 355
using @media rule to specify styles, 112
F
fantasy fonts, 128
<figcaption> tag, HTML5, 28
<figure> tag, HTML5, 28
fire effect text, text shadows, 168
:first-child pseudo-class, 90–91
:first-letter pseudo-element, 96–99
:first-line pseudo-element, 96–99
:first-of-type pseudo-class, 90–91
fixed design, multicolumn layout, 332–333
fixed method, table-layout, 228
Flash, 20
float property, 262–264, 330–336
defined, 125
fonts vs., 130
naming, 137
condensed and expanded fonts, 150
dingbats, 129
encoding HTML character entities, 129
generic font families, 127–128
getting started, 124
overview of, 123
putting it all together, 155–156
quick reference, 412
setting bold, bolder, boldest, 149
setting font-stacks. See font-stacks
setting multiple font values at same time, 152–154
sizing understudy fonts, 146
small caps, 151
specifying character set, 126
understanding Web typography, 125
using Web fonts, 133
Font Squirrel Web site, 140
@font-face Kit Generator, Font Squirrel, 140
@font-face rule
italic text, 147
placing at top of CSS code, 378
small caps, 151
Web font service bureaus using, 142–143
font-family property, 154
fonts. See also Web fonts
applied to styles, 2
new features in CSS3, 15
for readable style sheets, 378
word processor styles vs. CSS, 3–4
font-size property, 143–145, 153, 175
font-size-adjust property, 146
readable style sheets, 378–379
setting with Web fonts, 135–139
font-stretch property, 138–139, 150
font-style property
defining Web font to font stack, 138–139
mimicking visitor’s font style, 152
setting multiple font values, 152, 404
font-variant property, 151, 153
font-weight property, 138–139, 149, 153
<footer> tag, HTML5, 28–29, 31
footnotes, hyperlinking, 175
formats
visual. See visual formatting properties
forms, background color for, 197
frame effect, box shadows, 304
frame tags, eliminated in HTML5, 27
frameworks, CSS libraries and, 376
functionality
organizing style sheets by, 378
progressive enhancement guidelines, 355
G
general sibling selector, 78, 80–81
adding content using CSS, 240–241
overview of, 235
putting it all together, 246
quick reference, 416
specifying quote style, 244–245
teaching browser to count, 242–243
generic class names, 401
generic font families, 127–128, 131
glyphs
encoding HTML and UTL characters, 423–428
encoding HTML characters, 129
graceful degradation, 356
adding to backgrounds, 206, 216
best practices, 405
graphics
as bullets, 223
CSS Sprites. See CSS Sprites
grids, page layout using column, 330–333
grouping selectors, 64–66, 402
H
hanging indents, bulleted lists, 225
hanging punctuation, 181
<head>
defining class selector in, 53
HTML document structure, 19, 30
linking to external CSS files, 46
specifying character set in, 126
using @media rule to specify styles, 112
using links to add styles in, 400
<header> tag
background color for, 197
conditional styles for IE, 365
HTML document structure, 31
height
browser, 286
CSS resets for line, 359
document, 287
element, 287
of element’s box, 250
fixing box model for older versions of IE, 337–338
viewport, 287
height property, 106, 250–251, 255–257
<hgroup> tag, HTML5, 28
horizontal alignment, centering numbers in blocks, 336
horizontal text alignment, 171–173
hotspot, mouse pointer, 239
:hover pseudo-class, 84–89, 167
HSL (hue, saturation, and lightness) values, 189–190, 198
HSVA value, adding text color with, 203
HTML (HyperText Markup Language)
basic document structure, 19
browser inherited styles and, 20
CSS vs., 1
defined, 17
selectors vs. attributes, 11
understanding, 18
UTL character encoding and, 423–428
CSS browser extensions working with, 13
determining cascade order by specificity, 121
styling HTML elements, 21–23, 36
HTML4, 24
HTML5
new features, 27
overview of, 17
hyperlinks
setting negative margins, 266
turning off underlining on, 180
using color change to show states of, 203
using with footnotes, 174
I
icon: keyword, 152
icons
dingbats, 129
Web fonts for. See Web fonts
id attribute, unique IDs, 58
ID selectors
adding to body tag of page, 401
CSS rules, 10
determining cascade order, 121
elements styled by, 36
troubleshooting CSS code, 386
using specific ID names, 401
iframes, 286
images
resizing using width and height properties, 257
setting bullet style using, 223
using as custom cursor, 239
@import rule
adding styles with, 400
best practices, 381
discouraged due to browser issues, 49
favoring <link> over, 406
importing external CSS files, 48–49
importing style sheets, 48
placing at top of CSS code, 378
style sheet methods using, 384–385
!important declaration
avoiding, 403
cascade order and, 117–118, 120
troubleshooting CSS code, 389
importing external styles, to site, 43–44, 48–49
indented paragraphs, 176
indented text, bulleted lists, 225
inherent styles, 115–116, 120–121
inherit value
clip, 298
display, 253
inheritance of styles, 116
opacity, 301
inheritance of styles, 115–116, 119–121
inline elements, 21
inline value, display, 252
inline-block value, display, 253
interaction, styling Web page, 88
Internet Explorer
best practices, 405
converting OTF/TFF files to, 140
defining Web font to font stack, 135–139
fixing box model for older versions of, 337
fixing code in, 405
HTML5 for older versions of, 32–33
quirks mode, 363
resetting browser default styles, 360
Intuit CSS framework, 376
ISO 8859-1 character set, 126
J
justified text, 173
K
keywords
linear gradients, 191
overflowing content, 260
radial gradients, 193
transformation origin, 315
L
language, styling for specific, 92–93
:last-child pseudo-class, 90–91
:last-of-type pseudo-class, 90–91
layouts
Web design. See responsive Web design
legal issues, Web fonts, 140
legibility, and font size, 144
length value
clipping visibility area, 299
defined, 311
element width or height, 256
indenting paragraphs, 176
letter spacing, 159
margins, 266
multicolumn text layout, 278
multiple background images, 215
padding, 276
positioned elements, 292
spacing table cells, 229
text drop shadows, 166
transformations, 311
word spacing, 161
letterforms. See fonts
letterpress text, text shadows, 168
letters
adjusting space between, 159–160
bullet style for, 223
letter-spacing property, 159–160
libraries and frameworks, CSS, 376
lightness, HSL values, 189–190, 198
line height, CSS resets for, 359
linear gradients, 191–192, 195
line-height property, 153, 162–163
line-through, text, 179
link pseudo-classes
adding transitions between states, 320–324
importance of order, 89
link states
add CSS image rollovers to Web page, 344
contrasting link appearances, 86
styling all, 406
<link> tag
conditional styles for IE, 364
connecting external CSS and HTML files, 43, 45
favoring over @import, 406
linking to style sheets with, 46–47
specifying styles with @media rule, 112
WFSBs using, 142
links
color for, 197
contrasting appearances for, 84–87
to external CSS file, 43, 46–47
minimizing, 47
navigation vs. styling, 406
states, 82
to style sheet, 46
styling documents in <head>, 400
text shadows for, 167
troubleshooting CSS code, 386
list properties
quick reference, 415
list-item value, display, 253
lists
background color for, 197
sequentially numbered, 242–243
list-style shorthand property, 226–227
list-style-image property, 224, 226
list-style-position property, 225, 227
list-style-type property, 223, 227
Little Trouble Girl font, 139
local versions, Web font service bureau, 143
logical operators, conditional styles for IE, 364
LoVe HAte mnemonic, pseudo-element order, 89
lowercase text, 164
M
Mac fonts, online resource, 139
margins
collapse of, 267
CSS resets for, 359
of element’s box, 251
favoring padding over, 405
indenting paragraphs and, 176
setting in body tag, 291
table cells not using, 229
matrix() value, 2D transforms, 314
matrix3d() value, 3D transforms, 319
max-width property, 257
media queries
best practices, 402
embedding into style sheets, 112–113
multi-screens with, 357
new in CSS3, 15
in responsive Web design, 352, 370–373
@media rule
best practices, 402
placing at top of CSS code, 378
specifying styles with, 112–113
media type
determining cascade order value, 120
specifying style sheets for particular, 47
values, 104
menu: keyword, 152
message-box: keyword, 152
Meyer’s CSS reset, 362
mid-width property, 257
Minify CSS Compressor, 396–398
minifying your CSS code, 396–398, 407
mobile devices
adapting to environment, 366–373
CSS not accommodated by many browsers, 5
media queries specifying styles for, 107–110, 370–373
multi-screen strategy for, 357
progressive enhancement across multiple, 354–356
monochromatic color schemes, 198
monochrome color schemes, 198
monochrome property, media queries, 106
mouse pointer, changing appearance, 238–239
multiple backgrounds
adding with background shorthand, 212–216
layering images, 205
multi-screens, 357
N
naming conventions
class and ID selectors, 60
defining Web font to font stack, 137
external CSS files styling HTML pages, 45
generic class names, 401
unique IDs, 57
navigation
choosing color for links, 197
styling for print, 114
negative margins, 266
neon glow text effect, 168
nested comments, not allowed, 67
“New in CSS3” mark, in this book, 14
newspaper style, horizontal text alignment, 171
noise, reducing navigation, 345–346
none value
clear property, 264
display property, 254–255, 297
float property, 263
inheritance of styles, 116
normal flow, 287
normal value, inheritance of styles, 116
Not available symbol, browsers, 410
nowrap value, controlling white space, 177–178
:nth-child(#) pseudo-class, 90–91
:nth-last-of-type(#) pseudo-class, 90–91
:nth-of-type(#) pseudo-class, 90–91
number sign (#), ID rules, 57–58
numbers
adjusting font size for understudy fonts, 146
bullet style, 223
centering in blocks horizontally, 336
font-weight, 149
multiple counter lists, 242–243
positioning in browsers, 291
stacking elements in 3D, 294–295
transformations, 311
O
One for All method, style sheet strategy, 382
color and accessibility, 201
Colour Contrast Check tool, 203
CSS frameworks, 376
CSS3 development, 7
CSS3 Gradient Generator, 195
CSS4 working draft, 15
development of new text properties, 181
Eric Meyer’s CSS reset, 362
Firebug, 391
Font Squirrel Web site, 140
Mac and Windows fonts, 139
online color scheme, 200
Scalable Vector Graphics, 20
Web font service bureaus, 142
Web font stores, 142
Web Inspector, 393
Web Typography NOW, 143
Web-safe fonts, 133
World Wide Web Consortium, 10
Yahoo’s Reset CSS, 361
opacity
alpha values for color transparency, 190
new features in CSS3, 15
transitioning CSS properties, 320–324
opacity property, 190, 300–301
OpenType (OTF) Web font format, 134, 138, 140
optimization, creating minified version of CSS code, 396–398
organization scheme, readable style sheets, 378–379
orientation property, media queries, 106
origin property, background images, 205–206, 211
OTF (OpenType) Web font format, 134, 138, 140
outline property, 268
outlines
CSS resets for, 359
defining color with, 190
text, 181
overflow property
controlling content, 257, 259–260
fixing float problem with, 335
setting for text, 261
overlapping text, 266
overrides
float property, 263
font size, 144
font-stack, 132
mouse pointer, 238
P
padding
CSS resets for, 359
of element’s box, 251
favoring margins over, 405
fixing older versions of Internet Explorer, 338
indenting paragraphs and, 176
multicolumn layouts and, 333
page breaks, styling for print, 114
page structure, style sheets by, 378
paragraphs
indenting, 176
justifying last line of text in, 172
parent elements
centering element within, 267
family tree, 70
floating elements in window, 263
in nested tags, 250
positioning, 293
styling descendants, 71
percentage values, RGB, 189
perspective property, 3D transformations, 317
perspective-origin property, 3D transformations, 317
picture fonts, 129
pixel perfection, 354
position property, background images, 205–206, 208–209, 215
positioning
bullets, 225
radial gradients, 193
table captions, 233
transitioning CSS properties, 320–324
pre value, white space, 177–178
preceding sibling elements, family tree, 70
presentation tags, eliminated in HTML5, 27
primary font, 130
indenting paragraphs for, 176
specifying styles with media queries, 107, 109–111
styling for, 114
print.css, responsive Web design, 368–369, 373
progressive enhancements, 352, 354–356
properties
CSS rules and, 11
giving transitions to, 320–321
inheritance of styles, 115–116
overview of CSS, 4
styling based on HTML tags, 20, 23, 38–39, 100–103
troubleshooting CSS code typos, 386
not styling elements with, 94–95
quick reference, 411
setting bullet type, 223
styling contrasting links, 84–87
styling for interaction, 88
styling links, 84
pseudo-elements
defined, 96
highlighting beginning of article, 96–97
quick reference, 411
setting content before and after element, 98–99
working with first letters and lines, 96
pt (point) size, print media, 144
Q
<q> tag (quotation), 236–237, 244–245
basic selectors, 410
color and background properties, 414
font properties, 412
list properties, 415
pseudo-classes, 411
pseudo-elements, 411
text properties, 413
transform properties, 421
transition properties, 422
user interface and generated content properties, 416
visual formatting properties, 420
quirks mode, Internet Explorer
defined, 363
fixing box model for older versions of Internet Explorer, 337
quotation (<q> tag), 236–237, 244–245
quotation marks
specifying quote style with <q> tag, 236–237, 244–245
tips for using, 39
R
radial gradients
available in all browsers, 191
repeating, 195
readable style sheets, best practices
@rules at top of CSS code, 378
colors, fonts, and other constants, 378
overview of, 376
section headers, 378
specificity, 380
Recently available symbol, browsers, 410
references
online. See online references
for subjects in this book. See quick reference
rel property, troubleshooting CSS code, 386
relative positioning, 175, 289–291
relative values
aligning text vertically, 174–175
transforming length value, 311
repeat property, background images, 205–207, 214
repeating gradients, 195
repetition, avoiding unnecessary code, 403
Reset CSS, Yahoo, 361
resetting styles, responsive Web design, 352
resolution property, media queries, 106
adapting to environment, 366–373
adjusting CSS for Internet Explorer, 363–365
developing multi-screen strategy, 357
overview of, 349
with progressive enhancements, 354–356
resetting browser default styles, 358–362
RGB (red, green, blue)
best practices, 404
decimal values, 189
hex values, 188
percentage values, 189
setting alpha channels for decimal values, 190
RGBA value, adding text color, 203
rotate(), rotateX(), or rotate(Y) value, 2D transforms, 314–315
rotate3d() value, 3D transforms, 319
rotateZ() value, 3D transforms, 319
rounded corners, borders, 272–273
rules, CSS
adding embedded style to Web page, 41–42
applying with CSS selectors, 36
class selector, 9
combining into selector lists, 402
defining Web font to font stack, 137
external CSS file, 45
HTML selector, 9
ID selector, 10
parts of, 11
placing @rules at top of CSS code, 378
separating chunks of content, 197
syntax of, 11
tips for, 42
troubleshooting CSS code, 389
universal selector, 10
using specificity for hierarchy of, 380
@rules, placing at top of CSS code, 378
run-in value, display, 253
S
Safari, 393
sans-serif fonts, 127
saturation, HSL values, 189–190, 198
Scalable Vector Graphics (SVG) Web fonts, 20, 135, 139
scale(), scaleX(), or scale(Y) value, 2D transforms, 314–315
scale3d() value, 3D transforms, 319
scaleZ() value, 3D transforms, 319
scientific notation, 175
scroll keyword, overflow, 260
search engines, content property and, 241
section headers, readable style sheets, 378–379
selective styling
!important declaration, 117–118
based on context. See contextual styles
based on tag attributes, 100–103
element family tree, 70
inheritance of styles, 115–116
overview of, 69
for print, 114
with pseudo-classes. See pseudo-classes
selectors
attribute, 100
basic CSS, 36
combinatory, 71
HTML. See HTML selectors
organizing style sheets by types of, 378
pseudo-class, 83
pseudo-element, 96
quick reference to, 410
styling elements to exclude certain, 94–95
troubleshooting CSS code, 386
semicolons (;)
character entities beginning with, 129
defining styles directly in HTML tag, 38
locating in !important declaration, 118
separating multiple declarations, 11
troubleshooting CSS code, 386
separate value, border-collapse, 230–231
serif fonts, 127
SGML (Standard Generalized Markup Language), 19
shadows
shape value, radial gradients, 193
shorthand properties
!important, 404
best practice to use, 404
matrix(), 314
matrix3d(), 319
overriding value set by, 154
siblings, family tree, 70
single quotation marks (‘...’), 39
size, file
best practices, 381
drawbacks of single master style sheet, 382
reducing, 381
setting font-stack and, 132
size property, background images, 205–206, 209
size values, radial gradients, 193
skew(), skewX(), or skew(Y) value, 2D transforms, 314
slash (/), comments, 67
small-caps, 151
small-caption: keyword, 152
smart quotes, 39
spacing
horizontal text alignment, 171–173
between table cells, 229
<span> tag, 56
specificity
cascade order determined by, 121
hierarchy of CSS rules, 380
Standard Generalized Markup Language (SGML), 19
states
adding transitions between element, 320–324
styling navigation and link, 339–341
static positioning, 288, 290–291
status-bar: keyword, 152
stretched images, borders, 275
strict mode, browsers, 363
strikethrough, text, 180
<strong> tag
aligning text vertically, 174
defining font size, 145
as nested tag, 70
structural elements
CSS rules, 11
placing before designing, 399
using, 29
structural pseudo-classes, 82–83
Aggregate method, 384
best practices, 381
Divide and Conquer method, 383
Dynamic method, 385
One for All method, 382
<style> tag
applying media queries, 111
responsive design with media queries, 373
troubleshooting CSS code, 386
styles
browser default, 20
horizontal text alignment, 171–172
progressive enhancement honoring user, 355
resetting browser default, 358–362
text justification, 173
word processor, 2
subscript, vertical text alignment, 175
sub-settings, Web font service bureaus, 143
superscript, hyperlinking footnotes, 175
SVG (Scalable Vector Graphics) Web fonts, 20, 135, 139
symbol fonts, 129
syntax
!important declaration, 117–118
@media rule, 112
CSS rules, 11
defining styles in HTML tag, 37–39
older gradient, 195
T
table of contents (TOC), section headers mimicking, 378–379
table properties
collapsing borders between table cells, 230–231
setting space between table cells, 229
setting table caption position, 233
setting table layout, 228
showing/hiding empty table cells, 232
table value, display property, 253
table-layout property, 228
tables, background color, 197
tags, HTML
adding inline style to, 36
associated with browser inherited styles, 20
CSS files should not contain, 45
defining styles based on attributes of, 100–103
HTML5 in older versions of IE, 32–33
HTML5 structure and, 28
understanding, 18
<td> tag, 174
technology, Web font service bureaus, 142–143
testing
best practices, 405
minified version of CSS code, 398
troubleshooting CSS code, 389
using inline styles, 39
text. See also font properties
adding HTML tags to, 18
controlling overflow, 261
CSS resets for underlining, 359
design limitations of, 125
in graphics or Flash vs., 125
new features in CSS3, 14
positioning overlapping, 266
styling for print by avoiding in graphics, 114
wrapping and bullets, 225
text properties
aligning horizontally, 171–173
coming soon, 181
getting started, 158
indenting paragraphs, 176
overview of, 157
putting it all together, 182
quick reference, 413
text-align-last property, 172
text-decoration property, 179–181
text-indent property, 176
text-justify property, 173
text-overflow property, 261
text-shadow property, 166–170, 190
text-transform property, 164–165
tiled images, borders, 275
titles, small caps for, 151
TOC (table of contents), section headers mimicking, 378–379
transform properties
new features in CSS3, 14
overview of, 307
putting it all together, 325–326
quick reference, 421
transforming elements, 311
transform property, 311, 313–315
transform value, 324
transform-origin keywords, 315
transform-style property, 316–319
adding transitions between element states, 320–324
new features in CSS3, 14
overview of, 307
putting it all together, 325–326
quick reference, 422
transition-delay values, 323–324
transition-duration values, 323–324
transition-property value, 323–324
transition-timing-function values, 323–324
translate(), translateX(), or translate(Y) value, 2D transforms, 314
translate3d() value, 3D transforms, 319
translateZ() value, 3D transforms, 319
transparency
creating border with, 304
setting alpha values for color, 190
styling for print by avoiding color, 114
triad color-combination scheme, 199
troubleshooting CSS code, 386–389
TrueType (TTF) Web font, 134, 138, 140
TTF (TrueType) Web font, 134, 138, 140
type families. See font families
typeface overrides, 132
typography
affecting how text appears, 157
understanding on Web, 125
using Web fonts for. See Web fonts
U
underlines
differentiating hypertext from text, 340
using border-bottom for text, 359
understudy fonts, 131, 133, 146
universal selector
adding default transitions to, 324
CSS rules, 10
defining universal styles, 61–63
elements styled by, 36
styling descendants universally, 74–75
unvisited links, setting appearance, 86–87
uppercase, setting text case, 164–165
URL
adding multiple background images, 214
changing mouse pointer appearance, 239
defining background image, 206
defining own graphic bullets, 224
setting border image, 275
user interface
designing. See design and interface techniques
inline styles, 39
user interface properties
mouse pointer appearance, 238–239
overview of, 235
putting it all together, 246
quick reference, 416
UTF-8 (8-bit Unicode Transformation Format) character set, 126, 423–428
V
validation, CSS code, 395
values
content, 241
CSS browser extensions working with, 13
defining styles based on tag attributes, 100–103
defining styles in HTML tag, 38
font-stretch, 150
grouped selector changing, 66
indenting paragraphs, 176
linear gradient, 191
media type, 104
placing at top of CSS code in comments, 67–68
radial gradient, 192
specifying units for, 399
structural elements of CSS rules, 11
troubleshooting CSS code, 386
vertical text alignment, 174–175
word-spacing, 161
vertical alignment
centering numbers in blocks, 336
CSS resets for text, 359
vertical-align property, 174–175
viewport
browser, 286
responsive design with media queries, 370–372
clipping element’s area of, 298–299
visible keyword, overflow, 260
visited links, setting appearance of, 86–87
visitor styles, determining cascade order, 120
clipping visibility area, 298–299
overview of, 283
putting it all together, 305
quick reference, 420
stacking objects in 3D, 294–295
W
W3C (World Wide Web Consortium)
browser specifications for rendering Web code, 5
CSS Validator for CSS code, 395
evolution of HTML5 under, 24–25
understanding, 10
Web design. See responsive Web design
converting using Font Squirrel, 140
defining to font stack, 137–139
setting better stack font with, 135–136
using dingbats as, 129
using for icons, 408
Web-safe fonts, 133
Web forms, 27
Web Inspector, viewing CSS with, 390, 393–394
Web Open Font Format (WOFF), 135, 138, 140
Web page
adding embedded styles to, 40–42
as document. See documents
Web sites
adding external CSS file to, 43–49
for multi-screen strategy, 357
Webdings, 129
Webkit browser extensions, 13
weights, setting bold/bolder/boldest, 149
WFSB (Web font service bureaus), 141–143
WHATWG (Web HyperText Application Technology Working Group), HTML5, 25–26
white-space property, text, 177–178
width
browser windows and documents, 286–287
of element’s box, 250
fixing older versions of IE, 337–338
floating elements in window, 263
multicolumn layouts and, 332–333
viewport, 287
Windows fonts, online resource, 139
WOFF (Web Open Font Format), 135, 138, 140
word-spacing property, 161
World Wide Web Consortium. See W3C (World Wide Web Consortium)
wrapped text, bullet positions, 225
X
Y
Yahoo’s Reset CSS, 361
Yahoo’s YUI Grids framework, 376