The Art & Science Of CSS

A

A List Apart web site

3–4

absolute positioning

10

absolutely positioned parent

152

choice between floats and

91

image replacement and

109

relatively positioned parent

149, 151

span element

140

tolerance of window resizing

72

accessibility

error messages

149, 151

forms

118–121, 148

headings

6, 12

navigation

88

text as images and

76, 148

addresses, billing and delivery

120–121

Ajax

206

album pages

40–47

alpha transparency

59–60

alternative text

9–12, 151

Altoids homepage

6

anchor elements

110, 172

assistive technology

See screen readers

asterisk symbol

148, 157

attribute selectors, CSS

126

B

background-attachment property

68–69

background-color property

67

alternating background colors

143

fieldset elements

133, 135–137, 143–145

JavaScript highlighter function

204

transparency as default color

72

variable-width tabs

103

background colors

16–17, 26, 192

background-image property

67–68, 78

browser rendering on column groups

193

IE mouseover loss

109

inheritance

99

matrix navigation example

111

page layout with rounded corners

164–165, 208

semi-transparent PNGs

200

variable-width tabs

103

background images

applying to tables

194–196, 201

for body elements

70–71

CSS 3 proposals

83–85

fading to solid color

201

with gradients

61–62, 70–71, 136–137

resizable

71

transparent

59

background-origin property, CSS 3

84–85

background-position property

99–100, 104, 108

background properties

default position

158

limited browser support

154, 193

shorthand notation

67

background-repeat property

68, 71

background-size property

84

behavior

202

Binary Bonsai web site

48

block-level elements

172

styling hooks

168, 171–172

unordered lists as

87

width

157

body text typefaces

4–5

border-collapse property

191–193

border conflict resolution guide

192

border properties

browser rendering, in tables

193

double borders

52–53

extending images beyond content

48–53

fieldset elements

135

image captions

62, 64

inset- and outset-style borders

28–29

removing unwanted borders

89–90

variable-width tabs

103

border-spacing property

192

border-style property

browser rendering

29

outset border-style

62

overriding default fieldset layouts

139

rules attribute and

184

border value, background-origin property

84–85

borders, table, browser rendering

183–184

br tag

32

breadcrumbs

25

browser windows

sizing images to fit

31

resizing

70–72, 80–82, 74–75, 178

browsers

See also Internet Explorer

background property support

154, 194

border-style rendering

29

colgroup element properties and

193

CSS-incapable

76

fieldset element inconsistencies

126

with Flash or JavaScript turned off

12–15

with images turned off

9, 11, 112

with JavaScript turned off

202

legend repositioning and

140

support for background-origin property

84–85

support for background-size property

84

support for multiple backgrounds

84

table border rendering

183

transparency support

17, 59–60

width attribute rendering

189

bullets

34

C

calendars, tabular

196–199

caption element

185, 194, 197

caption-side property

194

captions

53–59, 63–64

Cartography Corner case study

86

horizontal navigation

95–116

logos

165, 176

rounded page layout

163

vertical navigation

88–95

case studies

See Cartography Corner; Deadwood Design

cellindex property

204

cellspacing attribute, table element

183, 192

character metrics

18–21

checkbox grouping

143–146

child pseudo-classes, CSS 3

206

classes

alternating background colors

143, 199

replicating type attributes

126

clear property

30, 42, 130

col element

188–191

colgroup element

188–193

color

5, 67 See also background color

colspan element

187

commenting out

19

conditional comments, IE

59, 133, 201

content value, background-origin

84–85

contextual images

47–64

Cooper Black typeface

14

CSS 3 proposals

background images

83–85

browser support

84

:last-child pseudo-class

175

table styling

206–208

D

Deadwood Design case study

69–83

browser window resizing

80–81

design mockup

70

introductory paragraph

75–76

logo

73–75

portfolio section

77–82

definition lists

156–167

degradation to usable text

12, 14

display property

104, 172–173

div elements

55, 160, 168, 171

dl elements

156–157

double borders

52–53

download times

9, 21, 78

drop shadows

108, 180

E

elements

See also wrapper elements

replacing with sIFR.replaceElement

16–17

styling rounded corners

168, 176

table structure

182–191

em elements

147, 169–170

empty-cells property

192

error messages

149–152

example web sites

See also online resources

Altoids

6

Binary Bonsai

48

LinkedIn

123

A List Apart

3–4

Noodlebox

12–13

NYTimes

123

Rapha

5–6

Subtraction

2

F

feature boxes

162, 174

fieldset element

119–121

browser inconsistencies

126

changing the default layout

138–143

nested fieldsets

144

styling

133, 135–137

submit buttons

126, 128

turning off floating

131

filter property, IE

59, 201

fixed-width table layouts

195–196

Flash IDE alternative

15

Flash replacement techniques

12–21

flexibility

horizontal flexibility

175–178

rounded corner solutions

155

vertical and horizontal flexibility

167–175

float property

choice between absolute positioning and

91

IE whitespace bug workaround

91

images

30

label elements

129

list items

104–105

parent elements

130

fluid layouts

70, 176–178

fonts

See also typefaces

character metrics

19–22

in navigation

88

sIFR.replaceElement and

16

sizing and weights for headings

2–3

footers, tfoot element

186

for attribute, label element and

119

forms

117–153

basic markup

124–125

error messages

149–152

general styling

127–128

grouping form elements

119–121, 143–146

layout alternatives

121–146

required fields

147–149

types of form element

119

visual connections within

118–119

frame attribute, table element

183–185

G

GIF files

72, 78, 165, 200

gradient backgrounds

61–62, 70–71, 136–137, 202

graphics applications

70–71

H

headings

1–22

accessibility advantages of legend

121

Deadwood Designs logo

73–75

Flash replacement techniques

12–21

hierarchies and

1–4

identity and

4–6

image replacement techniques

7–11, 73–75

height property

8–9, 157

hexadecimal colors

67

hierarchies

1–4, 127

highlight color

5, 203–206

hooks

See styling hooks

horizontal flexibility

175–178

horizontal navigation

advanced version

108–116

basic version

95–107

final style sheet

97

:hover pseudo class

105

hover styles

image page

30

matrix navigation example

111–112

tabbed navigation

99–100, 105–106

vertical navigation

90

HTML

See markup

I

icons

151

id attribute

for attribute, label element and

119

unordered list items

87, 110, 112

id property

93

identity

4–6

image display page

25–36

image galleries

25–47

album pages

40–47

final style sheet

44–47

online resources

64–65

thumbnail pages

36–40

image replacement techniques

7–12

advanced horizontal navigation

108–109

compared to Flash replacement

21

logo in rounded corner layout

165

text-indent image replacement

7–9, 73–75, 165

images

24–65

accessibility of

148

captions for

53–64

contextual images

47–64

extending beyond page content

48–53

as GIFs or PNGs

72

image galleries

25–47

as links, obscuring

81–82

page download times

9

portrait format

35

preloading

98

sizing

31, 72

tabbed navigation

98–99

text as

75–76

inheritance

99, 144, 172

inline-blocks

105

inset-style borders

28–29

Internet Explorer

background-attachment support

59–60

background-image loss on mouseover

109

border properties rendering, in tables

193

border-spacing property

192

border width workaround

30

caption-side property

194

CSS attribute selectors and IE 6

126

CSS cellspacing

183

CSS 3 selectors and IE 7

207

double margin bug

104

empty-cells property

192

frame attribute misinterpreted

183

h1 expansion behavior

8

:hover pseudo class access

105

legend element rendering

133–134

opacity property support

201

separate style sheets for

133, 141, 146

transparency support

59–60, 201

whitespace bug

90

width attribute rendering

189

z-index property bug

77

introductory images

47–52

introductory paragraphs

75–76

J

JavaScript

12, 16–18, 202–208

L

label element

118–119

auto width setting

146

error messages within

150–151

left-aligned labels

122–123, 145

nested fieldsets

144

positioning alternatives

121

right-aligned labels

123, 132–133, 145

top-positioned labels

122, 128

:last-child pseudo-class, CSS 3

175, 207

layering

background-images and

157–158, 194

layout grids

2

left-aligned labels

122–123, 145

legend element

119–121

changing the default layout

138–143

styling

133–135

letter-spacing property

18–21

line-height property

61, 159, 172

linear layouts

2–3

linebreak element

32

LinkedIn web site

123

links

21, 89

liquid layouts

70, 175–178

list items

90, 91, 103 See also ordered lists; unordered lists

list-style property

34, 127

logos

73–75, 165, 176

M

margin property

changing for list items

89

fieldset elements

126, 142

floated images and captions

61, 63, 104

images and thumbnails

34

inset- and outset-style borders

28–29

negative margins

52, 138, 145–146

variable-width tabs

104

margin-right property

129

markup

adjusting character metrics

18–21

importance of simplicity

102

users with images disabled

9

mouseover effects

203–206

multiple backgrounds in CSS 3

83

N

navigation

86–116

graphic intensive version

108–114

horizontal navigation

95–116

pagination style navigation

25, 32–36, 38

single include

93

tabbed navigation

98–107

thumbnail page

39

vertical navigation

88–95

You Are Here navigation

92–95, 101–102, 106–107, 112–113

navigation matrix technique

108–115

negative left value, IE legends

134

negative margins

52, 138, 145–146

negative text-indents

7–9, 74

nested fieldsets

144

nesting positioned elements

10

non-semantic markup

11, 83, 105, 171–172

Noodlebox web site

12–13

O

offset captions

63–64

online resources

forms layout

122

image galleries

64–65

precompiled sIFR

15

spreadsheet-like functionality

206

opacity property

201

ordered lists

radio buttons and checkboxes

144

turning off numbering

127

wrapping form elements and labels

125–126, 145

outset borders

62, 28–29

overflow property

8, 11

P

p tags round images

25

padding property

changing for list items

89

extending images beyond content

48–53

fieldset elements

126, 131, 134, 138

form element list styling

127, 141

image captions

61–62, 64

inset- and outset-style borders

28–29

legend elements

135

between paragraphs

162

round-edged boxes

159, 162, 170

styling thumbnail navigation

40

text and background images

76

variable-width tabs

104

padding value, background-origin

84–85

page download times

9, 21, 78

pagination style navigation

25, 32–36, 38

paragraphs with rounded corners

161, 174

parent elements

absolutely positioned

152

floating

130

relatively positioned

149, 151

photographs

See images

PNG images

59–60, 72, 200

portfolio section, Deadwood Design

77–82

portrait format images

35

position property

See also absolute positioning; relative positioning

stack order

81–2

positioning backgrounds

69

positioning captions

58–59

positioning form labels

121

properties useful in tables

191–192

pseudo-classes, CSS 3

206

R

radio button grouping

143–146

Rapha web site

5–6

readability

23, 122, 199

reading direction and layout

121

relative positioning

10

browser window resizing and

74

captions on top of images

60

fieldsets within spans

140

legend element

134

ordered list in grouped form elements

146

unordered list in matrix navigation

109

z-order and

81

required form fields

147–149

resizing

background images

71

browser windows

70–72, 74–75, 80–82, 178

text

134, 145, 169, 174

RGB colors

67

right-aligned labels

123, 132–133, 145

rounded corners

154–180

CSS 3 potential

207

definition lists

156–167

liquid layouts

175–178

tabbed navigation

98–100

whole page layouts

162–167

row group element

186

rowspan element

187

rules attribute, table element

184–185

S

screen readers

120–121, 188 See also accessibility

script tags, including the sifr.js file

16

scrolling

6, 121

search engines and text as images

76

selectors, CSS

17, 206

semi-transparent captions

59

sIFR (scalable Inman Flash Replacement)

12–21

spaces

See whitespace

span element

See also wrapper elements

captioned images

55, 61

hiding markup

10

hiding text

76

legend workaround for Firefox

140

size setting

11

tables, col and colgroup

188–191, 205

stack order

81–82

strong element

149, 151

style sheet simplicity

102

styling hooks

div elements as

168, 171–172, 176

forms layout

125, 147

rounded corner designs

155, 166–167

unordered list items as

87

submit buttons

126, 128, 135–137

Subtraction web site

2

Superfluous Banter web site

108

T

tabbed navigation

98–107

final style sheet

101–102

variable-width tabs

102–107

table element

182–185, 191

tables

182–208

applying backgrounds

194–196

cell backgrounds

194–195

cell spacing

192

CSS 3 potential

206–208

example applications

196–202

row and column highlighting

203–206

sorting

205

spreadsheet functionality

206

striping alternate rows

199–202, 206

styling

191–196

using JavaScript

202–208

‘tag soup’

83, 179 See also non-semantic markup

tbody element

186, 200

td element

182, 187–188

text

See also alternative text; resizing

hiding

7–9, 76

as images

75–76

text-decoration property

173

text-indent image replacement

7–9, 11, 73–75, 165

text wrapping

captioned images and

57

contextual images and

47

Flash replacement techniques

18–21

label elements and

130

legend elements

145

tfoot element

186

th element

182, 187–188

thead element

186

thumbnail images

album pages

41–44

obscuring

81

styling navigation thumbnails

32–36

thumbnail pages

36–40

tiling, background-repeat

68

top-positioned labels

122, 129

tr element

182, 187

transparency

GIF support

200

semi-transparent captions

59

setting for Flash movies

17

submit button backgrounds

136

transparent pixels

78

transparent PNG support

59–60, 72, 200

typefaces

See also fonts

Cooper Black

14

FONTSMACK web site resource

16

headings

3–4

limited distribution of

4, 14

serifs and readability

23

sIFR embedding of

14

varied effects

6

whitespace and

15

U

unitless line-heights

159

universal selectors

157

unordered lists

as block-level elements

87

Cartography Corner navigation

87

navigation matrix technique

109

pagination style navigation

25, 32

portfolio displays

77, 79

usability

12, 22, 88, 113, 122

V

validation, unitless line-heights

159

vertical and horizontal flexibility

167–175

vertical flexibility

156–167

vertical navigation

88–95

visibility property

21

visually impaired users

See screen readers

W

W3C specification

188

white, usefulness of

26, 61

whitespace

15, 90, 127–128

width attribute, colgroup element

189

width property

image captions

61–62, 64

images and thumbnails

31, 34–35

width settings

145, 169

window mode

18

wrapper elements

105 See also div element; span element

rounded corner layouts

163, 176

as styling hooks

125

Y

You Are Here navigation

92–96, 101–102, 106–107, 112–113

Z

z-index property

77, 81–82

zebra tables

199–202