Index
- (hyphen), 38
: (colon), 8
. (period), 10
{ } (curly brackets), 8, 9, 274
& (ampersand), 31
< > (angle brackets), 2
% unit notation, 51
A
<a> element, 29
absolute lengths, 50
absolute paths, 30
action attribute, 205
Adobe Kuler, 47
alert message example, 136–137
alignment
float values and, 114
list items, 170
vertical, 91
alpha channels, 48
alt (alternative) text, 179
alternative (alt) text, 179
ampersand (&), 31
anchor elements, 29
anchor tags, 3
angle brackets < >, 2
<article> element, 25
aspect ratio, 180
attributes
for, 213
action, 205
charset, 5
checkbox, 209
cols, 208
container class, 244
datetime, 255
disabled, 215
headers, 234
hidden, 215
hidden, 215
ID, 172
intro ID value, 267
method, 205
multiple, 210
placeholder, 216
poster, 192
rel, 11
required, 216
rows, 208
selected, 210
start, 159
target, 31
audio controls, 192
audio file formats, 193
B
background color, 37–38, 242–243
centering, 135
code example, 136–137, 152–153
considerations, 134
hyperlink paths, 134
vs. image elements, 183
positioning, 135
repeating, 134
shorthand values, 134, 136, 152
specifying surface area, 155–156
background pattern, 180
background property, 133, 134, 142, 164, 183
background-clip property, 155–156
background-color property, 133
background-image property, 134, 142, 183
background-origin property, 155–156
background-position property, 135
background-repeat property, 134
considerations, 132
fallback options, 133
transparent, 133
background-size property, 153–155
block positioning images, 182
block-level elements, 29, 54, 55, 182
<blockquote> element, 128, 130–131
border-collapse property, 238–239, 241, 243
borders
images, 182
padding and, 60
sides, 63
border-spacing property, 240–241
box model
border box, 66
content box, 65
described, 56
padding box, 66
boxes
content, 65
padding, 66
box-shadow property, 116
browsers
cross-browser compatibility, 12–13
cross-browser testing, 13
Firefox, 65
Internet Explorer, 65
Safari, 65
video file formats, 193
<button> element, 211
background color, 43
font size, 43
C
capitalize value, 116
<caption> element, 234
captions
figures, 202
table, 234
Cascading Style Sheets. See CSS
cf class, 83
characters
encodings, 2
special, 28
charset attribute, 5
check boxes, 209
checkbox attribute, 209
class values, 270
classes
names, 275
pseudo-classes, 106
values, 275
clear property, 80
clearfix, 83
clearfix class, 83
clearing floats, 80
closing tags, 3
code validation, 6
coding best practices, 266–281
general guidelines, 281
col value, 232
colon (:), 8
color
background, 37–38, 133, 137, 242–243
borders, 62
hexadecimal values, 46–47, 277
margins and, 62
opacity, 48
padding and, 62
RGB/RGBa, 48
sRGB, 44
transparent, 48
color property, 100
color wheel, 47
cols attribute, 208
comments
in HTML code, 19
contain keyword value, 154
container class, 69
container class attribute, 252
content, 74–98. See also media
centering, 69
embeddable, 3
grouping, 25
positioning with floats, 75–86
positioning with inline-block, 87–89
related, 26
reusable layouts, 90
self-contained, 25
semantic decisions and, 25, 267–268
separating from style, 271
source for, 3
wrapping, 79
content boxes, 65
content-box value, 65, 155–156
cover keyword value, 154
creative works, citing, 128
cross-browser compatibility, 12–13
cross-browser testing, 13
calculating specificity, 38–39
class names/values, 275
code validators, 6
considerations, 2
dropping units from zero values, 278
good vs. bad code examples, 273–280
modularized styles, 280
multiple lines and, 274
reusable layouts, 90
shorthand alternatives. See shorthand values
spacing and, 274
.css extension, 11
CSS pseudo-classes, 106
CSS selectors
IDs and, 275
tips for, 275
CSS3 gradient generators, 146
CSS3 gradients, 146
D
datetime attribute, 255
dialogue citation, 129
dialogue quotation, 129
disabled attribute, 215
display property, 54–55, 167, 182
<!DOCTYPE html> declaration, 4, 5
Dreamweaver, 4
E
elements
classifying, 3
described, 2
floating, 76
hiding, 55
identifying, 3
indenting, 5
nested, 5
self-closing, 5
em unit notation, 51
em units, 51
email addresses
validation, 216
error message styles, 216
external quotation, 130
F
fallback options
backgrounds, 133
fonts, 101
fieldsets, 214
<figcaption> element, 202
file input, 212
files
adding to forms, 212
comments, 19
gradient image, 142
links to, 24
organizing, 19
Firefox browser, 65
:first-of-type pseudo-class selector, 261
float property, 75, 77, 79, 114, 167, 182
floating
clearing floats, 80
considerations, 95
font families, 101
font property, 104
font variants, 102
@font-face at-rule, 124
font-family property, 101, 124
fonts
described, 100
fallback options, 101
Google Fonts, 125
italics, 102
licensing issues, 125
shorthand values, 104
styles, 102
vs. typefaces, 100
font-size property, 101
font-style property, 102
font-variant property, 102
font-weight property, 102–103, 126, 127
for attribute, 213
<form> element, 205
adding files to, 212
adding to pages, 205
check boxes, 209
disabling elements/controls, 215
fieldsets, 214
hidden inputs, 212
initializing, 205
input attributes/values, 215–217
labels, 213
multiple selections, 210
organzing elements in, 212–215
overview, 204
placeholder controls, 216
required values, 216
textareas, 208
validation, 216
G
gif format, 180
Google Chrome browser, 65, 67–68
Google Fonts, 125
changing direction of, 143–144
considerations, 142
CSS3, 146
vendor prefixes, 142
gradients
background. See gradient backgrounds
grid class attribute, 91, 92, 171, 195, 220, 252.
group class, 81
H
headers
headers attribute, 234
height property, 56, 58, 59, 180
hexadecimal colors, 46–47, 277
hexadecimal values, 100, 133, 147
hidden attribute, 215
hidden inputs, 212
hiding elements, 55
:hover pseudo-class, 106
hsl() function, 49
HSLa value, 133
HTML (HyperText Markup Language), 2–4
HTML code
class values, 270
comments in, 19
considerations, 2
described, 2
good vs. bad code examples, 267–272
headings, 20
hyperlinks. See hyperlinks
ID values, 270
inline styles and, 271
paragraphs, 21
refactoring code, 272
removing code, 272
reusable layouts, 90
standards-compliant markup, 267
validators, 6
version, 4
.html extension, 4
hyperlink reference. See href
background images, 134
described, 29
navigation, 24
opening links in new window, 31
to other pages of website, 30
to parts of same page, 32
to quotations, 129
specifying, 3
HyperText Markup Language. See HTML
hyphen (-), 38
I
icons, 180
id attribute, 3, 10, 213, 234, 256
ID attributes, 172
ID values, 270
image elements, 183
image formats, 180
adding to pages, 179
alt attribute, 271
aspect ratio, 180
background. See background images
borders, 182
distorted, 180
embedded, 179
padding, 182
indenting text, 115
index.html file, 15
inline elements, 18
inline-block elements
positioning content with, 87–89
removing spaces between, 88–89
sizing, 59
space between, 55
inline-block value, 55, 166–167
inline-level elements, 59
<input> element, 205
inside property value, 165, 166
internal style sheets, 11
Internet Explorer, 65
intro ID attribute value, 267
J
jpg format, 180
K
key selector, 40
keyword color values, 44–45, 47
L
<label> element, 213
labels, 213
:last-child pseudo-class selector, 170, 241, 253
:last-of-type pseudo-class selector, 261
letter spacing, 117
letter-spacing property, 117
<li> element, 158
linear-gradient () function, 143, 149
<link> element, 11–12, 125–126
links
background images, 134
described, 29
navigation, 24
opening links in new window, 31
to other pages of website, 30
to parts of same page, 32
to quotations, 129
specifying, 3
list item markers
floating and, 167
list items
alignment, 170
changing values in, 160
considerations, 157
horizontally displaying, 166–169
overview, 157
unordered, 158
list-style property value, 166
list-style-position property, 165–166
list-style-type property, 163–165
lowercase value, 116
M
“magic corners,” 144
mailto:, 31
main.css file, 12
margin property, 59–62, 182–183
margins
media, 178–203. See also content
considerations, 178
embedded, 193
images. See images
media player, 192
<meta> element, 5
method attribute, 205
mp3 format, 190
multiple attribute, 210
N
<nav> element, 24
navigation menus, 33–34, 168–169
navigational links, 24
nested elements, 5
none value, 55
Notepad++, 4
:nth-child pseudo-class selector, 242–243
O
offset class, 96
ogg format, 190
:only-of-type pseudo-class selector, 261
opacity, 48
opening tags, 3
<option> elements, 208
outside property value, 165
P
padding property
padding-box value, 66, 155–156
pages. See web pages
paragraphs, 21
paths
absolute, 30
hyperlink, 134
relative, 30
pattern, background, 180
percentages, 51
performance, 276
period (.), 10
photographs, 180
pixels, 50
placeholder attribute, 216
placeholder controls, 216
png format, 180
poster attribute, 192
preload attribute, 189–190, 191
properties
background, 133, 134, 142, 164, 183
background-color, 133
background-image, 134, 142, 183
background-position, 135
background-repeat, 134
border-collapse, 238–239, 241, 243
box-shadow, 116
clear, 80
color, 100
described, 8
float, 75, 77, 79, 114, 167, 182
font, 104
font-size, 101
font-style, 102
font-variant, 102
font-weight, 102–103, 126, 127
letter-spacing, 117
list-style, 166
text-decoration, 114
text-indent, 115
text-transform, 116
vertical-align, 244
word-spacing, 117
prose citation, 129
prose quotation, 129
pseudo-class selectors, 261
px unit notation, 50
Q
R
radial-gradient() function, 145
rel attribute, 11
relative lengths, 51
relative paths, 30
required attribute, 216
rgb() function, 48
rgba() function, 48
RGB/RGBa colors, 48
root directory, 12
row value, 232
rows
gradient background, 148
table, 230
rows attribute, 208
S
Safari browser, 65
scope attribute, 232, 234, 255
<section> elements, 25, 27, 76, 140, 149
<select> element, 210
selected attribute, 210
selectors
additional, 11
calculating specificity, 38–39
described, 8
spaces within, 41
specificity within, 42
background images, 134, 136, 152
borders, 62
fonts, 104
hexadecimal color values, 46, 277
list-style property, 166
tips for, 276
<small> element, 28
spaces
between inline-block elements, 88–89
within selectors, 41
spacing
CSS and, 274
inline-block elements and, 55
special characters, 28
src attribute, 3, 179, 189, 190
sRGB color, 44
start attribute, 159
style sheets, 11. See also CSS
styles. See also CSS
error messages, 216
fonts, 102
separating content from, 271
Styles Conference website. See websites
Sublime Text, 4
submit button, 211
T
<table> element, 230
captions, 234
footers, 235
overview, 229
rows, 230
table body, 235
tags
anchor, 3
described, 3
end, 208
start, 208
target attribute, 31
<tbody> element, 235
text
indenting, 115
inline changes, 116
letter spacing, 117
small caps, 102
word spacing, 117
text decoration, 114
text editors, 4
text-align property, 114, 244–247
<textarea> element, 208
textareas, 208
text-decoration property, 114
text-indent property, 115
text-transform property, 116
TextWrangler, 4
<tfoot> element, 235
<thead> element, 235
<time> element, 255
<title> element, 5
<tr> element, 230
tracking, 117
transparency, 48
transparent backgrounds, 133
.txt extension, 4
typeface weights, 103
typefaces
described, 100
vs. fonts, 100
licensing issues, 125
U
<ul> element, 158
unordered lists
described, 158
uppercase value, 116
url () function, 134
URLs, 193
V
validation
code, 6
email, 216
forms, 216
standards-compliant markup, 267
values
vendor prefixes, 65, 142, 278–279
vertical alignment, 91
vertical margins, 60
vertical padding, 60
vertical-align property, 244
video controls, 192
video fallbacks, 193
video file formats, 193
video hosting websites, 193
video player, 193
Vimeo embedded video, 193
W
wav format, 190
web browsers
cross-browser compatibility, 12–13
cross-browser testing, 13
Firefox, 65
Internet Explorer, 65
Safari, 65
video file formats, 193
adding forms to, 205
adding images to, 179
links on, 32
Webkit, 65
adding container class to, 69
adding content. See content
adding figures/captions, 201–202
adding forms. See forms
adding images. See images
adding new pages, 34
links to pages on, 30
video hosting, 193
word spacing, 117
word-spacing property, 117
Y
YouTube videos, 193
Z
zero values, 278