Index
A
_a suffix
active box shadows, 58
active padding, 62
active rounded borders, 64
active scrollbars, 72–73
active transparency, 67
background gradients, 48
absolute property, positioning
classes for, 38–40
defined, 30
abstopleft superclass, 278–280
active pseudo class, 32
alignment
dropcap, 123
text, 103–105
types of text, 29
vertically centering object inside another, 209
alt argument of image, ondemand class, 217–218
Apple Safari, downloading and installing, 4–5
asterisk (*) symbols
/*.*/ tags for CSS rule comments, 17
wildcards, 21–22
attribute selectors, 21
autofocus class, 255–256
autoscroll class, 72–74
B
_b suffix, background properties, 44, 48, 109
_ba suffix, defined, 44–45
backglow[] class, 250–251
background color
with bcolor[] class, 232–233
for buttons, 132–134
classes for, 43–46
color property, 29–30
odd and even, 200
background property
boxouts, 159–160
gradients, 47–48
inverse gradients, 54
odd and even background color, 200–202
bcolor[] class, dynamic objects, 232–233
_bh suffix, defined, 44–45
block class, visibility and display, 71
body section, DOM, 8–9
bold value, font weight, 28
border property, boxouts, 159–160
border superclass, 277
border-color property, 90–92
border-radius command, rounded borders, 63–65
borders
box model, 34
color, 90–92
rounded, 63–66
styles, 86–88
width, 88–90
border-width property, 34
bottom class, dynamic objects, 213
bottom dock bar plug-in classes, 146–147
bottom dock bar plug-in, navigation, 146–147
bottom property, location, 78–80
bottomdockitem class, 147
box model, CSS
borders, 34
content, 34
margins, 33–34
overview of, 33–34
padding, 34
properties affecting page layout, 33
box shadows plug-in, 58–61
classes, 158–160
layout as left sidebar, 163–165
layout as right sidebar, 165–166
box-shadow property, 58
break class, adding page breaks, 167–168
BROWSER global variable, with if[] class, 269–270
button class, 132–134
button click events, 52–57
buttons
classes for creating, 132–135
clickable, 274–275
RSS, 275–277
C
capitalize property, text transformation, 29
caption image plug-in, visual effects, 188–192
cascade, CSS
defined, 22
!important tag, 24
style sheet creators, 22–23
style sheet methods, 23
style sheet selectors, 23–24
using different number base, 24
Cascading Style Sheets. See CSS (Cascading Style Sheets)
center alignment, text, 29
center class, dynamic objects, 210–211
centimeters, CSS measurement in, 26
checkmark icon, 129–130
child selectors, 19–20
cite[] class, dynamic interaction, 256–259
classes
applying same style to elements with, 12
attribute selectors for, 21
dynamic. See dynamic classes
font style, 28
manipulating objects. See object manipulation plug–ins
menus and navigation. See menu and navigation plug–ins
name conflicts when using plug–ins, 13
narrowing scope of, 21
page layout. See page layout plug–ins
pseudo, 31–32
text and typography. See text and typography plug–ins
visual effects. See visual effect plug–ins
CleanupString( ) function
digitsonly class, 238
minwhitespace class, 244
nopunct class, 242–243
nospaces class, 240–241
textonly class, 239–240
clickable superclass, 274–275
colon (:) character, separating pseudo classes, 31–32
color. See also background color
background and foreground text, 29–30
border, 90–92
odd and even text, 196–199
color property
symbols, 129
text color, odd and even, 197
text color properties, 29–30
text colors plug–in, 109
color[] class, for dynamic text, 230–232
ColorFade( ) function, 249–251
column plug–in, text and typography, 124–127
comma (,) symbol, grouping selectors, 22
comments, applying to CSS rules, 17
companion web site for this book, downloading plug–ins from, 7
content, box model, 34
content property, encapsulation, 117
content property, symbols, 129
creators, style sheet, 22–23
cross icons, 129–130
CSS (Cascading Style Sheets)
box model, 33–34
the cascade, 22–24
colors, 29–30
divs and spans, 25–26
fonts, 27–28
IDs and classes, 12
importing, 11
local style settings, 12
measurements, 26–27
overview of, 10
positioning elements, 30–31
pseudo classes, 31–32
rules, 16–19
selectors, 19–22
and semicolons, 12–13
shorthand, 32
text, 28–29
cursor property, pointer class, 192–193
D
decoration, text, 28
default CSS plug-in, layout, 155–158
default styles, CSS rules for, 17
descendant selectors, 19
digitsonly class, dynamic text and typography, 237–238
display, CSS classes for, 69–71
divs, spans vs., 25–26
document object, 8
Document Object Model. See DOM (Document Object Model)
CSS connected to, 10–12
how it works, 8–10
overview of, 8
drop cap plug-in, text and typography, 122–123
dropcap class, 122–123
DropShadow filter argument, IE, 59
dynamic classes
dynamic interaction. See dynamic interaction
dynamic objects. See dynamic objects
incorporating JavaScript. See JavaScript-aided plug-ins
superclasses. See superclasses
text and typography. See dynamic text and typography
dynamic interaction
autofocus class, 255–256
cite[] class, 256–259
nocopy class, 262–263
placeholder[] class, 254–255
ref[] class, 259–261
dynamic objects
bcolor[] class, 232–233
bottom class, 213
center class, 210–211
color[] class, 230–232
fadein[n] class, 219–220
fadeout[n] class, 220–221
height (h[n]) class, 227–228
left class, 214
middle class, 209–210
nojs and onlyjs classes, 206–209
ondemand class, 216–219
resizeta class, 220–221
right class, 215
rotate[n] class, 223–225
top class, 212
width[] class, 226
x[] class, 228–229
y[] class, 229–230
dynamic text and typography
backglow[] class, 250–251
digitsonly class, 237–238
Google font (gfont[]) class, 244–248
minwhitespace class, 243–244
nopunct class, 241–243
nospaces class, 240–241
textglow[] class, 249–250
textmiddle class, 248–249
textonly class, 239–240
typetext[] class, 236–237
E
e-mail icon, 129–130
embedded styles, style sheets as, 23
embedjs class, using JavaScript, 266–268
ems, CSS measurement in, 27
encapsulation plug-in, text and typography, 116–117
exs, CSS measurement in, 27
external style sheets
creating style sheets as, 23
CSS rules for, 18
F
FadeIn( ) function, fadein[] class, 219–220
fadein[n] class, 219–220
FadeOut( ) function, fadeout[] class, 220–221
fadeout[n] class, 220–221
file extensions, enabling on Windows PC, 8
filter property, IE
box shadows, 58–59
gradients, 47
inverse gradients, 54
symbols, 129
transparency, 67
fixed font size, 28
fixed property, positioning
CSS classes for, 38–40
defined, 30–31
float property, floating plug–in, 40–42
float-left property, drop caps, 122
focus pseudo class, 32
font plug-ins
CSS, 27–28
Google, 118–122
overview of, 96–100
style, 100–102
font-family property
assigning chosen font, 97
Google fonts, 118–119
overview of, 27–28
symbols, 129
font-size property
buttons, 132
CSS units of measurement using, 26–27
drop caps, 122–123
overview of, 28
quotations, 161–162
rules for constructing CSS statements, 16
text point size, 106–108
tooltips and tooltip fade, 148
font-style property
font style, 101–102
local styles, 12
overview of, 28
quotations, 161–162
setting style by assigning ID to element, 12, 20
font-variant property, text transformations, 115
caption image, 190
font styles, 101–102
overview of, 28
symbols, 129–130
foreground color, text and objects, 29–30
functions
autofocus class, 256
backglow[] class, 251
center class, 211
cite[] class, 257
color[] class, 231
digitsonly class, 238
embedjs class, 266
fadein[n] class, 219
fadeout[n] class, 220
gfont[] class (Google fonts), 245
height[] class, 227
if[] class, 268
ifnot[] class, 271
middle class, 210
minwhitespace class, 244
nocopy class, 262–263
nojs and onlyjs classes, 207
nopunct class, 242
nospaces class, 240
ondemand class, 217
placeholder[] class, 255
ref[] class, 260
rotate[] class, 224
textglow[] class, 249–250
textmiddle class, 248–249
textonly class, 239
typetext[] class, 236
width[] class, 226
x[] class, 228
y[] class, 230
G
gfont[] class (Google fonts), 244–248
Google Chrome, downloading and installing, 4–5
Google fonts
classes, 118–122
dynamic text with gfont[], 244–248
gradients
button, 132–134
classes and properties, 46–47
classes for, 48–52
inverse, 52–57
overview of, 46
grouping selectors, 22–24
H
_h suffix, for hover classes, 40
h[] (height) class, dynamic objects, 227–228
head section, DOM
applying styles to, 10–11
JavaScript-aided CSS with pure CSS for, 14
overview of, 8–9
hexadecimal RGB triplets, text and object color, 29–30
hidden class, visibility, 69–71
hmenu class, horizontal menus, 142–144
hmenu1 class, horizontal menus, 143
horizontal menu plug-in, 142–144
hover classes, 40–41
hover pseudo class, 32
htab (horizontal tab) superclass, 282–283
HTML
creating tags compatible with XHTML, 10
doctype declaration, 6
importing CSS from within, 11
local style settings, 12
setting style with IDs and classes, 12
I
icons, top dock bar, 145–146
IDs
attribute selectors and, 21
defined, 20
reusing, 20
selecting elements to be styled with, 23–24
setting style of element with, 12
IE=5 meta tag, 6
IE=6 meta tag, 6
IE=7 meta tag, 6
if[] class
ifnot[] class vs., 270–272
incorporating JavaScript, 268–270
ifnot[] class, 270–272
images
captions, 188–192
on demand, 216–219
padding, 61–62
star ratings for, 171–173
@import directive, style sheets, 11
!important tag, forcing rule to higher precedence, 24
importing, 11
inches, CSS measurement in, 26
indented text
classes, 127–128
using text-indent property, 29
inline class, 71
inline styles
creating style sheets as, 23
CSS rules for, 19
interaction. See dynamic interaction
internal styles, CSS rules for, 18–19
inverse gradients, 52–57
invisible class, 69–71
italic class, font styles, 28
JavaScript
downloading files from companion web site, 7
main setup code for, 208–209
reusing IDs and, 20
JavaScript-aided plug-ins
dynamic objects. See dynamic objects
embedjs class, 266–268
if[] class, 268–270
ifnot[] class, 270–272
overview of, 13–14
for users without JavaScript, 14
using alongside pure CSS, 14
using in your web sites, 13
justify alignment, text, 29
L
_l suffix
box shadows, 58
defined, 48
padding, 62
rounded borders, 64
scroll bars for objects, 73
transition all, 183–184
transparency, 67
_la suffix
box shadows, 58
defined, 48
padding, 62
rounded borders, 64
scroll bars for objects, 73
transition all, 183–184
transparency, 67
largebutton class, 132–134
layout. See page layout plug-ins
_lb suffix, defined, 44
_lba suffix, defined, 44
_lbh suffix, defined, 44
left alignment, text, 29
left class, dynamic objects, 214
left property
location, 78–80
x[] class, 228
left sidebar plug-in, layout, 163–165
leftfloat class, 40–42
line-height property, drop caps, 122
link pseudo class, 32
<link> tag, 11
links, changing background color, 45
Linux, downloading/installing web browsers on, 4–5
local style settings, 12
location, CSS classes for, 77–80
lowercase property, text transformation, 29
M
Mac OS X, downloading and installing web browsers on, 4
margin property, 33–34, 159–160
marginBottom property, 210, 212–213
margin-bottom property, drop caps, 122–123
marginLeft property, 211, 214–215
margin–left property, top dock bar, 145–146
marginRight property, 211, 214–215
margin–right property, drop caps, 122–123
margins
box model, 33–34
selective, 80–83
marginTop property, 210, 212–213
margin-top property, bottom dock bar icons, 146
maxheight class, 76–77
maximum size, setting image dimensions to, 74–77
maxsize class, 76–77
maxwidth class, 76–77
measurements, CSS range of, 26–27
menu and navigation plug-ins
bottom dock bar, 146–147
buttons, 132–135
horizontal menu, 142–144
tooltips and tooltip fade, 148–150
top dock bar, 144–146
vertical menu. See vertical menu plug–in
methods, for creating style sheets, 23
Microsoft Internet Explorer
downloading and installing, 4–5
testing web pages on older versions of, 5–6
middle class, dynamic objects, 209–210
millimeters, CSS measurement in, 27
minwhitespace class, dynamic text and typography, 243–244
mouseovers, creating with inverse gradients, 52–57
–moz–box–shadow property, box shadows, 58
Mozilla Firefox, downloading and installing, 4–5
multiline comments, applying to CSS rules, 17
multiple property assignments, 16–17
N
named colors, for text and objects, 29–30
nocopy class, dynamic interaction, 262–263
nofloat class, 40–42
nojs class, dynamic objects, 206–209
none property, text transformation, 29
nooutline class, 92–94, 274–275
nooverflow class, 72–74
nopunct class, dynamic text and typography, 241–243
normal class, font style, 28
normal value, font weight, 28
<noscript>.</noscript> tags, 14, 206
noscroll class, 72–74
nospaces class, dynamic text and typography, 240–241
O
object manipulation plug-ins
background color classes, 43–46
border color classes, 90–92
border style classes, 86–88
border width classes, 88–90
box shadow classes, 58–61
floating classes, 40–42
gradient classes, 46–52
inverse gradient classes, 52–57
location classes, 77–80
maximum size classes, 74–77
no outline classes, 92–94
overview of, 38
padding classes, 61–63
positioning classes, 38–40
rounded border classes, 63–66
scroll bar classes, 71–74
selective margin classes, 80–83
selective padding classes, 83–86
transparency classes, 66–69
visibility and display classes, 69–71
objects
applying foreground and background colors to, 29–30
dynamic. See dynamic objects
how the DOM works, 8–10
oblique class, font style, 28
odd and even background colors, visual effects, 199–202
odd and even text colors, visual effects, 196–199
ondemand class, dynamic objects, 216–219
online references
downloading and installing web browsers, 4–5
plug-ins from book’s companion web site, 7
Quirks Mode web site, 6
onlyjs class, dynamic objects, 206–209
opacity( ) function
on demand plug-in, 217
fadein plug-in, 219
fadeout plug-in, 220–221
opacity property
caption image, 190
quotations, 161–163
symbols, 129–130
tooltips and tooltip fade, 148–150
transition all, 184–185
transparency, 67–69
P
padding
adding, 61–63
box model, 34
selective, 83–86
padding property
applying padding, 62
box model, 34
boxouts, 159–160
page break plug-in, layout, 167–168
page layout plug-ins
boxout class, 158–160
break class, 167–168
default CSS class, 155–158
leftsidebar class, 163–165
quote class, 160–163
reset class, 152–155
rightsidebar class, 165–166
page–break–before property, 167–168
PC.css, 13
percent, CSS measurement in, 27
period (.) symbol, 12
pixels, CSS measurement in, 26–27
PJ.js
downloading from companion web site, 7
main setup JavaScript code, 208–209
using JavaScript–aided plug-ins, 14
PJsmall.js, 14
placeholder[] class, dynamic interaction, 254–255
Plug-in JavaScript (McGraw–Hill Professional, 2010), 31
plug-ins, how to use
about CSS, 10–12
about Document Object Model, 8–10
CSS and semicolons, 12–13
downloading and installing web browsers, 4–5
downloading from companion web site for this book, 7–8
JavaScript–aided plug-ins, 13–14
older versions of Microsoft Internet Explorer, 5–6
overview of, 4
in your own web sites, 13
point size plug-in, text, 105–108
pointer class
clickable buttons with superclasses, 274–275
visual effects, 192
points, CSS measurement in, 26
positioning
creating absolute, 278–279
CSS classes for, 38–40
CSS properties for, 30–31
pound (#) symbol, 12
PreventAction( ) function, nocopy class, 262–263
progress bar plug-in, visual effects, 173–174
properties
box model, 33–34
cite[] class, 257
color, 29–30
CSS rules for statements, 16
fonts, 27–28
grouping related CSS, into shorthand, 32
how the DOM works, 8–10
multiple assignment, 16–17
placeholder[] class, 255
text, 28–29
properties, dynamic objects
bcolor[] class, 232
bottom class, 213
center class, 211
color[] class, 231
height[] class, 227
left class, 214
middle class, 210
nojs and onlyjs classes, 207
right class, 215
rotate[] class, 224
top class, 212
width[] class, 226
x[] class, 228
y[] class, 230
properties, dynamic text and typography
backglow[] class, 251
digitsonly class, 238
gfont[] class (Google fonts), 245
minwhitespace class, 244
nopunct class, 242
nospaces class, 240
textglow[] class, 249–250
textmiddle class, 248–249
textonly class, 239
typetext[] class, 236
properties, manipulating objects. See also properties, dynamic objects
background color, 43
border color, 90
border style, 87
border width, 89
box shadow, 58
floating objects, 40
gradient, 47
inverse gradient, 54
location, 78
maximum size, 76
no outline, 93
positioning, 38
scroll bar, 72
selective margin, 81–82
selective padding, 84
transparency, 67
visibility and display, 70
properties, menus and navigation
bottom dock bar, 147
buttons, 132
horizontal menus, 143
tooltips and tooltip fade, 148
top dock bar, 144
vertical menus, 136
properties, page layout
boxout, 159
left sidebar, 164
page break, 167
quote, 161
right sidebar, 166
properties, text and typography. See also properties, dynamic text and typography
column, 124
drop caps, 122–123
font, 96–97
font style, 101
Google font, 118
symbols, 129
text alignment, 103–104
text color, 109
text indent, 128
text point size, 106
text transformation, 115
properties, visual effects
caption image, 189–190
odd and even background colors, 200
odd and even text colors, 197
pointer, 192
progress bar, 173
rotation, 194
scale down, 179
scale up, 175
star rating, 170
star rating using images, 172
thumb view, 185
transition all, 183
pseudo classes, 31–32
Q
Quirks Mode web site, 6
quotation marks (“ ”), font names with multiple words, 27
quote plug-in, layout, 160–163
R
relative font size, 28
relative property, positioning, 30, 38–40
replace( ) function
backglow[] class, 251
bcolor[] class, 232–233
color[] class, 231
fadein[] class, 219–220
fadeout[] class, 220–221
resizeta[] class, 222–233
rotate[] class, 224
textglow[] class, 249–250
width[] class, 226
x[] class, 228
y[] class, 230
reset CSS plug-in, layout, 152–155
resizeta[] class, textarea, 222–233
ResizeTextarea( ) function, resizeta[] class, 222–233
rgb( ) function, CSS, 29–30
right alignment, text, 29
right class, dynamic objects, 215
right property, location, 78–80
right sidebar plug-in, layout, 165–166
rightfloat class, 40–42
rollover effects, 279–280
rotation
rotate[] class, dynamic objects, 223–225
visual effects, 193–196
rounded borders
adding to buttons, 132–134
CSS classes for, 63–66
rssbutton class, 275–277
rules, CSS
applying comments to, 17
default styles, 17
external style sheets, 18
forcing to higher precedence with !important tag, 24
inline styles, 19
internal styles, 18–19
multiple property assignments, 16–17
overview of, 16
style sheet selectors, 23–24
style types, 17
user styles, 17–18
S
S( ) function, x[] class, 228
Safari, downloading and installing, 4–5
scale down plug-in, visual effects, 178–181
scale up plug-in, visual effects, 174–178
scroll bars, 71–74
scroll class, 72–74
selective margins, 80–83
selective padding, 83–86
selectors
CSS rules for constructing statements, 16
grouping, 22
style sheet, 23–24
varieties of, 19–22
semicolons
CSS and, 12–13
CSS rules for constructing statements, 16
shadows
adding to buttons, 132–134
box, 58–61
classes for text and typography, 112–114
shorthand, 32
smallbutton class, 132–134
spacing, text, 29
<span> tag
caption class, 190–192
difference between <div> and, 25–26
thumbview class, 185–188
tooltip class, 148–150
star icon, 129–130
star rating
classes, 170–171
using images, 171–173
static property, positioning, 38–40
style sheet
creators, 22–23
methods, 23
selectors, 23–24
style types
default styles, 17
defined, 17–19
external style sheets, 18
inline styles, 19
internal styles, 18–19
user styles, 17–18
<style> . </style> tags, for internal styles, 18–19
styles
border, 86–88
font, 100–102
superclasses
abstopleft, 278–279
border, 277
clickable, 274–275
htab, 282–283
rollover effects, 279–280
rssbutton, 275–277
setting up main JavaScript code with, 209
understanding, 274
vtab, 280–281
symbol plug-in, text and typography, 129–130
T
tablecell class, 71
tags
importance of closing, 10
selecting elements to be styled with, 23–24
text
fonts. See font plug-ins
foreground and background color for, 29–30
indented, 127–128
odd and even text colors, 196–199
properties, 28–29
using color[] class for dynamic, 230–231
text and typography plug-ins. See also dynamic text and typography
column classes, 124–127
drop cap classes, 122–123
encapsulation classes, 116–117
font classes, 96–100
font style classes, 100–102
Google font classes, 118–122
symbol classes, 129–130
text alignment classes, 103–105
text colors classes, 108–111
text indent classes, 127–128
text point size classes, 105–108
text shadow classes, 112–114
text transformation classes, 114–116
<textarea> tag, 222–223
text-decoration property
defined, 28
font styles, 101
horizontal menu, 143
resusing IDs, 20
tooltips and tooltip fade, 148
vertical menu, 136
textglow[] class, dynamic text, 249–250
textmiddle class, dynamic typography, 248–249
textonly class, dynamic typography, 239–240
text-shadow property, 112–113
text-transform property, 29, 115
three-level vertical menu, 139–141
thumb view, visual effects, 185–188
toleft class, location, 77–80
tooltip fade plug-in, navigation, 148–150
tooltip plug-in, navigation, 148–150
top class, dynamic objects, 212
top dock bar plug-in, navigation, 144–146
top property, location, 78–80
topdockbar class, 144–146
topdockitem class, 144–146
toright class, location, 77–80
totop class, location, 77–80
transform property, 175–178, 179–181
transformation
properties for text, 29
text and typography classes, 114–116
transition all plug-in
in rotation, 195
visual effects, 181–185
transition property, transition all plug-in, 181–185
transparency
classes for object, 66–69
in rollover effects, 278–280
two-level vertical menu, 136–139
type selector, 19
typetext[] class, dynamic text, 236–237
typography. See dynamic text and typography; text and typography plug-ins
U
universal (wildcard) selector, 21–22
unordered lists. See vertical menu plug-in
uppercase property, text transformation, 29
users
CSS rules for styles, 17–18
without JavaScript, 14
V
valign class, 71
values, CSS rules for constructing statements, 16
variables
autofocus class, 256
backglow[] class, 251
center class, 211
cite[] class, 257
color[] class, 231
digitsonly class, 238
embedjs class, 266
fadein[n] class, 219
fadeout[n] class, 220
gfont[] class (Google fonts), 245
height[] class, 227
middle class, 210
minwhitespace class, 244
nojs and onlyjs classes, 207
nopunct class, 242
nospaces class, 240
ondemand class, 217
placeholder[] class, 255
ref[] class, 260
rotate[] class, 224
textglow[] class, 249–250
textonly class, 239
typetext[] class, 236
width[] class, 226
x[] class, 228
y[] class, 230
vertical menu plug-in
the class, 141–142
creating three-level menu, 139–141
creating two-level menu, 136–139
overview of, 135–139
vertical tab (vtab) superclass, 280–281
visibility and display, CSS classes for, 69–71
visible class, 69–71
visited pseudo class, 32
visual effect plug-ins
caption image, 188–192
odd and even background color classes, 199–202
odd and even text color classes, 196–199
pointer class, 192
progress bar class, 173–174
rotation classes, 193–196
scale down classes, 178–181
scale up classes, 174–178
star rating classes, 170–171
star rating using images classes, 171–173
thumb view class, 185–188
transition all classes, 181–185
vmenu class. See vertical menu plug-in
vmenul class, 138–142
vtab (vertical tab) superclass, 280–281
W
web browsers
downloading and installing, 4–5
testing web pages on all main, 4
-webkit-box-shadow property, box shadows, 58
width
difference between divs and spans, 25–26
specifying as dynamic class parameter, 226
specifying border, 88–90
width (w[]) class, 226
wildcard (universal) selector, 21–22
windows, how DOM works, 8–9
Windows PC
having access to when developing on non-Windows computer, 4–5
showing file extensions on, 8
Wine windows application interface, 4–5
word-spacing property, text, 29
X
x[] class, dynamic objects, 228–229
XHTML, creating HTML tag compatibility with, 10
Y
y[] class, dynamic objects, 229–230