-
(hyphen), 38
:
(colon), 8
.
(period), 10
{
}
(curly brackets), 8, 9, 274
&
(ampersand), 31
<
>
(angle brackets), 2
%
unit notation, 51
<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
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
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
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
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
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
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
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
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
jpg
format, 180
key selector, 40
keyword color values, 44–45, 47
<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
“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
<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
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
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
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
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
<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
<ul>
element, 158
unordered lists
described, 158
uppercase
value, 116
url ()
function, 134
URLs, 193
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
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
YouTube videos, 193
zero values, 278
18.226.88.110