Index

Symbols

[ ] (square brackets), for grouping values, 124

^ characters, attribute selectors and, 308, 310

! (exclamation marks), !important rules and, 66

# (hash marks), id selectors and, 42

$ (dollar signs), attribute selectors and, 310, 312

* (asterisks)

attribute selectors and, 313, 315

font-family property and, 75

as universal selector, 48

*-resize keywords, 338

+ (plus signs)

next sibling selectors and, 300

numbers and, 29

- (minus signs), numbers and, 29

. (dots), class name selectors and, 40

/ (forward slashes), font size and, 87

: (colon)

pseudo-classes and, 50, 315

separating parts of style sheets and, 18, 19

:: (double colons), pseudo-element syntax and, 315

; (semi-colon)

declarations and, 19

!important rules and, 66

separating parts of style sheets and, 18

< > (left and right angle brackets), styling elements and, 18

> (greater than signs), direct child selectors and, 298

{ } (curly braces), separating parts of style sheets and, 18, 19

| (vertical bars), for grouping values, 125

@font-face rule, 276, 280, 286

@import rule, 34

@media rules, 324, 328, 357, 358, 365

A

<a> elements, :link pseudo-classes and, 50

absolute font sizes, 82

absolute keyword, 82

absolute lengths, 25

absolute measurements, 25

absolute path, defined, 35

absolute positioning

basics, 220–224, 248

z-index property and, 236–238

absolute size, mobile devices and, 356

:active pseudo-class, 50, 52

adjacent sibling combinators, 300–302

Adobe Dreamweaver, for writing CSS, 5

advanced selectors. See selectors, advanced

aligning. See also vertically aligning content

elements in quirks mode, 149

elements with margin property, 147–151

text horizontally, 102–103

vertical-align property, 175

all-scroll keyword, 338

always keyword, 331

Android browser, 356

answers to exercises. See exercise answers

asterisks (*)

attribute selectors and, 313, 315

font-family property and, 75

as universal selector, 48

attribute selectors. See also attribute substring selectors

basics, 302–303, 322

select by attribute value, 305–307

select by presence of an attribute, 303–305

attribute substring selectors, 308–315

values that begin with strings and, 308–310

values that contain strings and, 312–315

values that end with strings and, 310–312

attribute values, selecting by, 305–307

attributes, for linking to external style sheets, 35

auto keyword

Adding Auto Width to a Table (example), 20–22

for aligning elements, 149

printing and, 331

vs. scroll keyword, 171

width and height and, 165

auto values, for width and height, 165

Auto Width, Adding to Tables (example), 20–21

Auto Width, Applying to Div (example), 21–22

B

background colors, 115–117

background images

Applying a Background Image (example), 117–120

background shorthand, 133–135

background-attachment property, 131–133

background-image property, 117–120, 286

background-position property. See background images, positioning

background-repeat property, 120–124

basics, 11, 12, 115

exercises, 135

fixing in place, 131–133

background images, positioning

background-position property, showing icons with, 120

basics, 124–126

center keyword and, 129–131

position values, mixing, 126–128

repeating and controlling positioning, 128–129

background properties (listed), 391–392

background-color declaration, 291

backgrounds

gradient, 285–291

peek-a-boo bug and, 188

baseline for text, defined, 193

baseline keyword, 198

Berners-Lee, Tim, 3

blink value, 106

block elements, floated elements and, 176, 178, 179

blue color keywords, 409–410

body > .into descendent selector, 300

bold keyword, 19

borders, 151–159. See also table borders

Adding Borders Around Content (example), 158–159

border property, 23

border-collapse property, 261–263, 269

border-color family of properties, 155

border-color keywords, 155–156

border-color property, 154–156

border-style family of properties, 153

border-style keywords, 153–154

border-style property, 153–154

border-width properties, 151–153

defined, 131

preventing collapsing margins with, 145–147

shorthand properties, 156–158

border-spacing property (tables), 261–267, 269

bottom keyword, 194, 196, 198

bottom offset property, 219–220, 227–229

box model, 137–173

borders. See borders

dimensions, setting. See dimensions, setting

exercises, 172

floating box model, 178–179

margins. See margins

overview, 137–138

padding basics, 159–162

padding defined, 131

properties (listed), 394–398

Braille

media queries and, 357

styling for, 324

brown color keywords, 412

browsers. See also specific browsers

mobile. See mobile devices, styling content for

resources, 383–384

styles applied by, 58–59

support of alternative style sheets and, 4

support of CSS and, 12–14

bugs. See also float bugs in IE 6

IE 6 and 7 z-index bug, 245–247

bullets

showing by default, 204

styles of, 205–207

suppressing default display, 212

C

caching, defined, 4

Cilia, Robert, 3

canceling floating content, 181–184

capitalizing words, 108–111

captions, positioning (tables), 251–253, 269

caption-side property (tables), 251–253

cascades, 57–69

basics, 57–60, 69

cascading, defined, 57

Experimenting with Specificity (example), 62–65

!important rules, 66

overriding, 66

overriding default styles and, 60

specificity of selectors, calculating, 60–66

Cascading Style Sheets. See CSS

case insensitivity, fonts and, 75

case of text, transforming, 108–111

cells, vertically aligning content, 198–200

center keyword

positioning background images with, 129–131

value of text align property and, 102–103

centering

Center Pages with Margin (example), 149–151

elements with margin property, 147–151

child and parent margins, collapsing, 145

Child Structural Pseudo-classes, Using (example), 318–320

Chrome (Google)

basics, 13

cursor keyword support, 338, 340

class names, 40–42

class selectors

basics, 39, 40–42

Class and ID Selectors (example), 43–48

clear: both; declaration, 183, 184

clear: left; and clear: right; declarations, 184

clear property, floated elements and, 181–182

code

source code for examples, 6

text formatting and source code, 111–112

<col> element (tables), 251, 253–256

<colgroup> element (tables), 251, 253

collapsing borders (tables), 261–263

collapsing margins, 142–147

colons (:)

pseudo-classes and, 50, 315

separating parts of style sheets and, 18, 19

colors

background colors, 115–117

basics, 31–33

of borders, 154–156

color keywords, 19, 32

color keywords reference, 407–413

color properties (listed), 388–389

transparent keyword, 116

columns (tables)

Style Borders for Separating Rows and Columns (example), 266–267

styling, 253–256

columns, mobile devices and, 356

comments, conditional for float bugs, 184–185

computers vs. mobile devices, 356

conditional comments for float bugs, 184–185

content. See also floating content; mobile devices, styling content for

Borders, Adding Around Content (example), 158–159

in cells, vertically aligning, 198–200

floating content, canceling, 181–184

floating content, <div> elements and, 179

generated content properties (listed), 404–406

hiding with overflow property, 169–170

inserting with content property, 333–335, 336

Markup Content Before Adding CSS (example), 272–275

overflowing content, 169–172

conventions, reference, 385

Crimson Editor, 5

CSS, 3–15

advantages of, 4–5

basics, 3, 15, 367–368

browsers and, 12–14

CSS 3, pseudo-element syntax, 315

future of, 368

history of, 3–4

resources, 384

text editors for writing, 5–6

writing, 6–12

CSS reference, 385–406

automatic numbering properties, 404–406

background properties, 391–393

box model properties, 394–398

color properties, 388–389

font properties, 389–390

generated content properties, 404–406

list properties, 27–29

positioning properties, 400–402

pseudo-classes, 387

pseudo-elements, 388

reference conventions, 385

selectors, 386–387

table properties, 402–403

text properties, 392–394

user interface properties, 403–404

visual effects properties, 399–400

curly braces ({}), separating parts of style sheets and, 18, 19

cursor property basics, 337–340

cursors. See mouse cursor, customizing

Custom Fonts, Using (example), 277–280

D

data types, strings as, 23

declarations, 19

Decorate Links (example), 106–108

delimiters, defined, 66

descendant selectors

basics, 48–49

body > .into descendent selector, 300

direct child selectors and, 297–298

desktop computers vs. mobile devices, 356

device-width feature, 358

dimensions, setting, 162–169

auto-values, 165

height, 163–165

minimum and maximum, 166–169

overflowing content, 169–172

percentage measurements, 165

quirks mode and, 165

width, 162–163

direct child selectors, 297–300, 322

display: inline; declaration, double-margin bug and, 193

display: inline-block; declaration, peek-a-boo bug and, 188

<div> elements

adding auto-width to (example), 21–22

color keywords and, 32

floating content and, 179

doctypes, importance of valid, 36

documents

CSS-enabled, creating, 6–11

including CSS in, 34–35

including embedded style sheets in, 35

dollar sign ($), attribute selectors and, 312

dollar signs ($), attribute selectors and, 310

dots (.), class name selectors and, 40

double colons (::), pseudo-element syntax and, 315

double-margin bug, 184, 191–193

downloading. See also websites for downloading

pages, fonts and, 280

Dreamweaver for writing CSS, 5

Dynamic Pseudo-Class Selectors (example), 52–54

dynamic pseudo-classes, 50–54

E

editors. See text editors

elements

horizontally aligning with margin property, 147–151

margin collapsing and, 143–145

of style sheets. See style sheet elements

em units, 25–26, 27

EM values, Changing Size of Headings with (example), 28–29

embedded style sheets, 34–35

ex units, 25–26, 29

examples

Attribute Selector: Attribute Begins with a String, 308–310

Attribute Selector: Attribute Contains a String, 313–315

Attribute Selector: Attribute Ends with a String, 311–312

Attribute Selector: Attribute Value, 306–307

Attribute Selector: Presence of an Attribute, 303–305

Auto Width, Adding to Tables, 20–21

Auto Width, Applying to Div, 21–22

Background Color, Applying, 116–117

Background Image, Applying, 117–120

Background Repetition, Controlling, 122–124

Border, Adding Around Content, 158–159

Center Pages with Margin, 149–151

Child Structural Pseudo-classes, Using, 318–320

Class and ID Selectors, 43

class name selector, 40

Custom Fonts, Using, 277–280

Decorate Links, 106–108

Direct Child Selectors, 298–300

Dynamic Pseudo-Class Selectors, 52–54

:first-letter and :first-line Pseudo-elements, 315–317

Fixed Positioning, Using, 232–234

Floated Navigation, Creating Page Headers with, 180–181

Font of Headings, Changing, 24

Font-Family Property, Applying, 76–78

Font-Style, Font-Weight, and Font-Variant Properties, Applying, 80–82

Gradient Backgrounds, Adding, 286–291

Headings, Changing Size of with Em Values, 28–29

Headings, Changing Size of with Pixels, 26–27

Layouts, Building, 281–285

Letter-Spacing and Word-Spacing Properties, 99–101

Lines of Text, Changing Spacing Between, 95–96

Marker Style of Lists, Changing, 210–212

Markup Content Before Adding CSS, 272–275

Mobile Devices, Applying Styles for, 358–361

Mouse Cursor, Changing, 338–340

Negative Margins, Setting, 30–31

Next Sibling Selector, 300–302

Opacity Property, Using, 346–349

Positioning Sub-Navigation, 224–226

Style Borders for Separating Rows and Columns, 266–267

Styles for Print, Applying, 325–327, 328–330

Text in Tables, Vertically Aligning, 198–200

Visibility Property, Using, 350–352

Web Page, Creating with HTML and CSS, 6–11

exclamation marks (!), !important rules and, 66

exercise answers

background images, 374

box model, 375

CSS basics, 369

floating content, 375–376

font faces, 372–373

layout basics, 377–378

mobile devices, styling content for, 381

mouse cursor, customizing, 380

opacity and visibility, 380

positioning, 376–377

print styling, 379–380

selectors, 370–371

selectors, advanced, 378–379

specificity of selectors, 371–372

style sheet elements, 369–370

styling lists, 376

tables, styling, 377

text display, manipulating, 373–374

vertically aligning content, 375–376

exercises. See also exercise answers

background images, 135

box model, 172

CSS basics, 14

floating content, 200

font faces, 91

layout basics, 292

mobile devices, styling content for, 364

mouse cursor, customizing, 342

opacity and visibility, 12

positioning, 247

print styling, 335

selectors, 55

selectors, advanced, 321

specificity of selectors, 67–68

style sheet elements, 36

styling lists, 217

tables, styling, 268

text display, manipulating, 112

vertically aligning content, 200

expand-to-fit, <div> elements and, 22, 179

external style sheets, linking to, 35

F

fallback fonts, defined, 75

Firefox

cursor keyword support, 338, 341–342

support for CSS, 14

:first-child structural pseudo-class, 318–320

:first-letter and :first-line pseudo-elements, 315–317

fixed keyword, 131–133

fixed positioning, 229–234, 248

fixed width for tables, 256–261

float bugs in IE 6, 184–193

basics, 184

conditional comments, 184–185

double-margin bug, 184, 191–193

guillotine bug, 184, 188–190

hacks, 185–186

peek-a-boo bug, 184, 186–188

three-pixel jog, 184, 190–191

floating content

basics, 201

canceling, 181–184

exercises, 200

float bugs in IE 6. See float bugs in IE 6

float property basics, 175–178

Floated Navigation, Creating Page Headers with (example), 180–181

floating box model, 178–179

unique behavior of floated elements, 178

:focus pseudo-class, 50, 51

font faces, 73–92

basics, 73, 92

bold text, 79

cumulative changes, 85–86

exercises, 91

font shorthand property, 86–90

font-size property, 82–86

font-size values, 87

Font-Style, Font-Weight, and Font-Variant Properties, Applying (example), 80–82

font-style property, 78–79

font-variant property, 79

font-weight property, 79

italic text, 78–79

setting font faces. See font faces, setting

small caps text, 79

font faces, setting

font families, 24, 75–76

font-family property, 23, 73–75, 92, 276

Font-Family Property, Applying (example), 76–78

font families. See font faces, setting

font property

Font Property, Applying (example), 89–90

inheritance and, 66–67

as shorthand property, 87–88

fonts

custom fonts, styling text with, 275–280

Custom Fonts, Using (example), 277–280

default, applying, 276

Font of Headings, Changing (example), 24

font properties (listed), 389–390

font-family property, 23, 73–75, 92, 276

Font-Family Property, Applying (example), 76–78

font-weight property, 19

Headings, Changing Size of with Em Values (example), 28–29

Headings, Changing Size of with Pixels (example), 26–27

measurement based on size of, 26–27

sans-serif fonts, 24, 76, 90, 276, 328

serif fonts vs. sans-serif fonts, 328

size in layouts, 276

forward slash (/), font size and, 87

G

Gecko, 14

generic font families, 74, 75, 76

Google's Chrome, 13

gradient backgrounds, 285–291

gradient property, 136

gray color

IE 6 support of, 413

keywords, 413

greater than sign (>), direct child selectors and, 298

green color keywords, 410–411

grouping selectors, 18–19

guillotine bug, 184, 188–190

H

hacks for float bugs, 185–186

handheld value, 358

hash marks (#), id selectors and, 42

headers

header class, 275

Page Headers, Creating with Floated Navigation (example), 180–181

Headings, Changing Size of with Em Values (example), 28–29

Headings, Changing Size of with Pixels (example), 26–27

height

auto values for, 165

of elements, setting, 163–165

min- and max-height, 166–169

percentage measurements and, 165

quirks mode and, 165

height declaration, 291

height property, three-pixel jog and, 191

hexadecimal colors, 32

hidden value for visibility property, 349, 352

hiding elements, 349, 352

history of CSS, 3–4

horizontal tiling of background images, 121–124

horizontally aligning text, 102–103

:hover pseudo-class

basics, 50, 51

guillotine bug and, 188

hover states, mobile devices and, 356

HTML

creating pages with, 271–275

good markup, importance of, 36

.html extension, 5

resources, 384

Web Pages, Creating with HTML and CSS (example), 6–11

HTML-kit, 5

I

icons

arrow.png and arrow2.png icons, 213

envelope icon, 310

magnifying glass icon, 120

id selectors, 39, 42–48

images. See also background images

list-style-image property, 212–213

important keyword, 66

!important rules, 66

indenting text, 101–102

ingredients class, 275

inheritance, 66–68, 69

integers

basics, 23, 29

z-index property, integer values and, 238–245

interfaces, user interface properties (listed), 403–404

Internet Explorer

6, 7, and 8, support of opacity property and, 345

cursor keyword support, 338, 341–342

Internet Explorer 6. See also float bugs in IE 6

color gray, support of, 407

content property and, 333

cursor keyword support, 341–342

direct child selectors and, 298

:first-child structural pseudo-class, 318

fixed positioning and, 229

:last-child structural pseudo-class, 318

:nth-child(n) structural pseudo-class, 318

z-index bug, 245–247

Internet Explorer (IE). See also float bugs in IE 6

attribute selectors and, 303

border-spacing property and, 263

caption-side property support in, 252

gradient backgrounds and, 291

IE 6, 7 and 8, :last-child structural pseudo-class, 318

IE 6, 7 and 8, :nth-child(n) structural pseudo-class, 318

IE 6 and 7, z-index bug, 245–247

max-width and max-height properties and, 168

min-width and min-height properties and, 166, 167

-ms- vendor prefix and, 286

next sibling selectors and, 300

overflowing content in (tables), 261

overflow-x and overflow-y properties and, 172

quirks mode, aligning elements in, 149

quirks mode, width and height and, 165

text color on <col> elements and, 254

transparent keyword and, 155

versions of, 13

versions of, installing for testing, 14

intro class, 183

invisibility, 349, 352

iPhone Simulator, 357, 361, 363

J

justify keyword (text align property), 102–103

K

keyword values

basics, 19–23

colors and, 31

keywords. See also specific keywords

color keywords reference, 407–413

cursor, changing using, 338–340

cursor keyword support, 338, 341–342

for formatting ordered lists, 207–209

specifying values, positioning and, 128

Koch, Peter-Paul, 356, 357

L

landscape orientation for mobile devices, 362

:last-child structural pseudo-class, 318–320

layering of positioning elements. See z-index property

layout (tables), 256–261, 269

layout fundamentals, 271–293

basics, 292

building layouts, 281–285

exercises, 292

gradient backgrounds, 285–291

Layouts, Building (example), 281–285

pages, creating with HTML, 271–275

text and custom fonts, styling, 275–280

left and right angle brackets (< >), styling elements and, 18

left keyword, 19, 176

left offset property, 219–220, 227–229

legacy websites, quirks rendering mode and, 149

length font sizes, 83–86

length values, vertical-align property and, 197–198

<length> value, letter spacing and, 97

lengths basics, 25

letter-case, transforming, 108–111

Letter-Spacing and Word-Spacing Properties (example), 99–101

letter-spacing property, 97–101

<li> elements (lists), 203, 226

Lie, Håkon Wium, 3

line breaks, 18

line height, 87, 94–96

:link pseudo-class, 50–51

<link /> element, printing and, 324

<link> element

including CSS in documents and, 34

linking to external style sheets and, 35

links

Decorate Links (example), 106–108

styling for mobile devices and, 356

lists. See also styling lists

basics, 203, 218

list container element, 203

lists properties (listed), 404–406

list-style-type property

basics, 205

Marker Style of Lists, Changing (example), 210–212

ordered lists, styling, 207–209

unordered lists, styling, 205–207

LoVe HAte mnemonic device, 51

M

Mac

Mac OS X, fonts and, 75

Mac OS X, text editors for, 5

resources, 384

magnifying glass icon, 120

margin property

with 1 value, 142

with 2 values, 141–142

with 3 values, 140–141

with 4 values, 138–140

basics, 30–31, 138

vs. padding property, 162

spacing and, 60

margins, 138–151. See also margin property

aligning or centering elements, 147–151

collapsing, 142–147

defined, 137, 138

double-margin bug, 191–193

floated elements and, 178

Negative Margins, Setting (example), 30–31

Marker Style of Lists, Changing (example), 210–212

markers

list-style-image property and, 212–213

list-style-position property and, 214–215

list-style-type property and, 205

Marker Style of Lists, Changing (example), 210–212

Markup Content Before Adding CSS (example), 272–275

maximum dimensions, 166–169

McIneney, Matt, 280

measurement, 25–29

media

media queries, 357–358

print styles, targeting for media types, 328–330, 336

print styling based on, 324–327

media attribute, 324, 327, 357, 358, 365

media= “screen” attribute, 325

Meyer, Eric, 62

middle keyword, 194, 198

minimum dimensions, 166–169

minus (-) signs, numbers and, 29

mobile devices, styling content for, 355–365

exercises, 364

importance of, 355, 365

media queries, 357–358, 365

mobile vs. desktop computers, 356

orientation and, 362–364

Styles for Mobile Devices, Applying (example), 358–361

testing mobile devices, 356–357, 365

modes. See quirks mode

mouse cursor, customizing, 337–343

cursor compatibility, 340–342

cursor property basics, 337–340

exercises, 342

Mouse Cursor, Changing (example), 338–340

-moz- vendor prefix, 286

-ms- vendor prefix, 286

N

navigation

Floated Navigation, Creating Page Headers with (example), 180–181

Marker Style of Lists, Changing to create site navigation (example), 210–212

Page Headers, Creating with Floated Navigation (example), 180–181

Positioning Sub-Navigation (example), 224–226

unordered lists and, 204

navigation class, 181

.navigation ul a selector, 221

Negative Margins, Setting (example), 30–31

next sibling selectors, 300–302, 322

none keyword, 117, 176

Notepad, writing CSS and, 5

nth child pseudo-class, defined, 50

:nth-child(n) structural pseudo-class, 318–320

numbers

automatic numbering, 404–406

basics, 29–31

O

-o- vendor prefix, 286

offset positioning, 227–229

<ol> element (lists), 203

opacity, controlling, 345–349

Open Type format for fonts, 277

Opera Software, 3

Opera web browser

basics, 14

cursor keyword support, 338, 341–342

mobile market and, 14, 356

ordered lists

markup, 204

styling, 207–209

orientation, styling for mobile devices and, 362–364

overflow: hidden; declaration, 261

overflow property, 169–172, 261

overflowing content, 169–172

overflow-x property, 171–172

overflow-y property, 171–172

overlining text, 104, 105

P

padding

basics, 159–162

defined, 131

preventing collapsing margins with, 145–147

padding property, spacing and, 60

page breaks

page-break-after: always; declaration, 332

page-break-after property, 331–333

page-break-before property, 331–333

printing and, 331–333

pages

Center Pages with Margin (example), 149–151

creating (example), 6–11

creating with HTML, 271–275

download time, fonts and, 280

inserting content, 333–335, 336

Page Headers, Creating with Floated Navigation (example), 180–181

paragraphs, formatting of first letter/first line, 315

parent margins, collapsing, 145

peek-a-boo bug, 184, 186–188

percentage font sizes, 83–86

percentage measurements

basics, 26, 29

for width and height, 165

pixels

border-width property and, 151–152

Changing Size of Headings with Pixels (example), 26–27

pixel measurements, 25–26, 29

three-pixel jog, 190–191

plus (+) signs

next sibling selectors and, 300

numbers and, 29

pointer cursors, 338, 342

portrait orientation for mobile devices, 362

position: fixed; declaration, 234

position: relative; declaration, peek- a-boo bug and, 188

positioning, 219–248

absolute positioning, 220–224

basics, 248

defined, 219

exercises, 247

fixed positioning, 229–234

IE 6/IE 7 z-index bug, 245–247

position property basics, 219–220

position: relative; declaration, 224, 226

positioning properties (listed), 400–402

relative positioning. See relative positioning

table captions, 251–253

z-axis. See z-axis

z-index property. See z-index property

positioning background images. See background images, positioning

pound signs (#), id selectors and, 42

pre keyword value, 111–112

precedence

basics, 57, 58

specificity and, 60

styles and, 60

percentage value, vertical-align property and, 197–198

percentage width (text indents), 102

presence of attributes, selecting by, 303–305

Presto rendering engine, 14, 356

previewing print pages, 327

print styling

exercises, 335

fundamentals of style sheets for, 323–324

inserting content, 333–335

page breaks, 331–333

Styles for Print, Applying (example), 325–327, 328–330

styling based on media, 324–327, 336

targeting styles for media types, 328–330

printing preview page, 327

properties. See also specific properties; values of properties

automatic numbering, 404–406

background properties (listed), 391–392

box model properties (listed), 394–398

color properties (listed), 388–389

font properties (listed), 389–390

generated content properties (listed), 404–406

lists properties (listed), 404–406

positioning properties (listed), 400–402

table properties (listed), 402–403

text properties, 66–67, 392–394

user interface properties (listed), 403–404

visual effects properties (listed), 399–400

pseudo-classes

basics, 50–54

listed, 387

structural pseudo-classes, 317–320

pseudo-elements

:first-letter and :first-line and, 315–317, 322

listed, 388

px units, 25–26

Q

queries, media, 357–358

quirks mode

aligning elements and, 149

basics, 36

height of elements and, 165

quirks rendering mode, legacy websites and, 149

width of elements and, 165

R

real numbers, 29

red color keywords, 407–408

reference conventions, 385

relative font sizes, 83

relative lengths, 25

relative measurements, 25–26

relative path, defined, 35

relative positioning

basics, 224, 229, 248

offset positioning and, 227–229

Positioning Sub-Navigation (example), 224–226

vs. static positioning, 224

repeat keyword, 121

repeating background images, 120–124, 128–129

repeat-x keyword, 121

repeat-y keyword, 121

resources. See websites for further information

Responsive Design, defined, 364

RGB colors, 33

right keyword, 176

right offset property, 219–220, 227–229

rows, Style Borders for Separating Rows and Columns (example), 266–267

rules, 17–18

S

Safari

basics, 12

cursor keyword support, 338, 341–342

gradient background example in, 290

sans-serif fonts, 24, 76, 90, 276, 328

screens, styling for, 324–325

scroll vs. auto keywords, 171

scrolling background images, 131–133

selectors, 39–55

basics, 18–19

Class and ID Selectors (example), 43–48

class selectors basics, 39, 40–43

descendant selectors, 48–49

id selectors, 39, 42–48

listed, 386–387

pseudo-classes, 50–54

specificity and, 60–62, 65–66

universal selector, 48

selectors, advanced, 297–322

attribute selectors. See attribute selectors; attribute substring selectors

basics, 322

direct child selectors, 297–300, 322

exercises, 321

next sibling selectors, 300–302, 322

pseudo-elements :first-letter and :first-line, 315–317, 322

structural pseudo-classes, 317–320, 322

semantic class names, 41

semi-colons (;)

declarations and, 19

!important rules and, 66

separating parts of style sheets and, 18

specificity, of selectors, 60–66

serif fonts vs. sans-serif fonts, 328

shorthand, for hexadecimal values, 33

shorthand properties. See also margin property

background, 133–135

border shorthand properties, 156–158

border-color, 154

border-style, 153–154

border-width, 151

box model shorthand properties with 2 values, 142

font, 86–90

list-style, 215–217

shrink-to-fit

auto value and, 22

floated elements and, 179

single colons (:)

pseudo classes and, 50, 315

separating parts of style sheets and, 18, 19

small caps text, 79

source code

for examples, downloading, 6

text formatting and, 111–112

Spacing Between Lines of Text, Changing (example), 95–96

spacing table borders, 263–267

special characters, separating parts of style sheets and, 18

specificity

defined, 69

Experimenting with Specificity (example), 62–65

precedence and, 60

of selectors (exercise), 67–68

sprites, background images and, 120

square brackets ([ ]), for grouping values, 124

src declarations, 276–277

stacking context, 239–243

stacking order, changing, 238–239

standards mode

guillotine bug and, 188

quirks mode incompatibility and, 149

star hack, 185

static positioning vs. relative positioning, 224

strikethrough text, 104, 105–106

strings

attribute substring selectors. See attribute substring selectors

basics, 23–24

selection based on values that begin with, 308–310

selection based on values that contain, 312–315

selection based on values that end with, 310–312

substrings, defined, 308

structural pseudo-classes, 317–320, 322

style attribute

applying style to elements and, 58

including CSS in documents and, 34–35

specificity and, 65

style sheet elements, 17–37

colors, 31–33

declarations, 19

documents, including CSS in, 34–35

good HTML, importance of, 36

length and measurement, 9

numbers, 29–31

rules, 17–18

selectors, 18–19

strings, 23–24

URIs, 33–34

values, 19–23

style sheets

basics, 58

precedence and, 58

print styles, controlling within, 328–330, 336

for print styling, 323–324

<style> element, 324

styles

applied by browsers, 58–60

for printing vs. for computer screens, 324

removing default styles, 59–60

Styles for Print, Applying (example), 325–327

styling

borders, 153–154

for print. See print styling

tables. See tables, styling

text and custom fonts, 275–280

styling lists

exercises, 217

list basics, 203, 218

list-style shorthand property, 215–217

list-style-image property, 212–213

list-style-position property, 214–215

list-style-type property. See list-style-type property

markup, 203–204

subscript text

aligning content and, 193–194

defined, 193

substrings

attribute substring selectors. See attribute substring selectors

defined, 308

superscript text

aligning content and, 193–194

defined, 193

T

table borders

collapsing, 261–263

spacing, 263–267

Style Borders for Separating Rows and Columns (example), 266–267

tables

cells, vertically aligning content, 198–200

properties (listed), 402–403

<table> element, 249–251

table-layout: fixed; declaration, 259–261

tables, styling, 249–269

basics, 269

border spacing, 263–267

captions, 251–253

collapsing borders, 261–263

columns, 253–256

exercises, 268

forcing width, 259–261

layout, controlling, 256–261

optional table elements, 249–251

tables defined, 249

<tbody> element, 251, 265

testing mobile devices, 356–357

text. See also font faces; fonts; vertically aligning content

bold, 79

custom fonts and, 275–280

inserting URLs into, 333–335

italic, 78–79

small caps, 79

text properties, inheritance and, 66–67

text properties (listed), 392–394

text display, manipulating. See also vertically aligning content

basics, 93, 113

exercises, 112

horizontal alignment, 102–103

Letter-Spacing and Word-Spacing Properties (example), 99–101

letter-spacing property, 97–98

line-height property, 94–96

text-align property, 19, 149

text-bottom keyword, 194–197

text-decoration property, 104–108

text-indent property, 101–102

text-middle keyword, 194–195

text-top keyword, 194–197

text-transform property, 108–111

white-space property, 111–112

word-spacing property, 98–101

text editors

resources, 383

for writing CSS, 5–6

TextEdit, 5

TextMate, 5

TextWrangler, 5

<tfoot> element (tables), 251, 265

<thead> element (tables), 251, 265

three-pixel jog, 184, 190–191

tiled squares (background images), 120–124, 128–129, 131

time, download time, fonts and, 280

top keyword, 194–196, 198

top offset property, 219–220, 227–229

touch-screen devices, 356

transparency, 345, 349

transparent keyword, 155

Trident, 13–14, 356

.txt extension, writing CSS and, 5

type selectors, 18, 39

U

<ul> element (lists), 203

underlining text, 104

underscore hack, 185

Universal Resource Indicators (URIs), 33–34

universal selector

basics, 48

specificity of, 61

unordered lists

markup, 203

styling, 205–207

URIs (Universal Resource Indicators), 33–34

URLs, inserting into text, 333–335

users

browser selection and, 12

composing style sheets and, 4

user interface properties (listed), 403–404

V

values

basics, 19–23

selection based on values that begin with strings, 308–310

selection based on values that contain strings, 312–315

selection based on values that end with strings, 310–312

values of properties

background property, 133

background-attachment property, 131

background-color property, 115

background-image property, 117

background-position property, 124

background-repeat property, 121

border-collapse property, 261

border-color properties, 155

border-shorthand properties, 156

border-spacing property, 263

border-style properties, 153

border-width properties, 151

caption-side property, 251

clear property, 181–184

cursor property, 337

float property, 175

font property, 87

font-family property, 74

font-style property, 78

font-variant property, 79, 82

font-weight property, 79

height property, 164

letter-spacing property, 97

line-height property, 94

list-style property, 215

list-style-image property, 213

list-style-position property, 214

list-style-type property, 205

margin properties, 138

max-width and max-height properties, 168

offset properties, 220

opacity property, 345–349

overflow property, 169

overflow-x and overflow-y properties, 172

padding properties, 159

page-break-after property, 331

page-break-before property, 331

position property, 219–220

table-layout property, 256

text-align property, 102

text-decoration property, 104

text-indent property, 101

text-transform property, 108

visibility property, 349

white-space property, 111

width property, 162

word-spacing property, 98

z-index property, 235, 245–247

vendor prefixes, 286, 293

vertical bars ( | ), for grouping values, 125

vertically aligning content, 193–201

basics, 193, 201

exercises, 200

percentage and length values, 197–198

subscript and superscript text and, 193–194

table cell contents, 198–200

text-top and text-bottom keywords, 195–197

top, middle, and bottom keywords, 194–195

vertical-align property, 175

vertical-align: super; declaration, 194

Virtual PC, installing multiple versions of IE and, 14

VirtualBox, installing multiple versions of IE and, 14

visibility property, 349–352

visible keyword, 169

:visited pseudo-class, 50–51

visual effects properties (listed), 399–400

W

web pages. See pages

Webkit, 12–13, 356

-webkit- vendor prefix, 286

websites, legacy, quirks rendering mode and, 149

websites for downloading

examples source code, 6

Firefox, 14

free fonts, 280

Google's Chrome, 13

Internet Explorer, 13

Opera web browser, 14

Safari, 12

text editors, 5

websites for further information

browsers, 383–384

conditional comments, 185

CSS, 384

fonts, 75

hacks, 186

HTML, 384

mobile browsers, 357

mobile phone emulators, 357

specificity, 62

sprites, 120

text editors, 383

XHTML versions, 36

Yahoo!'s Graded Browser Support page, 12

white-space: nowrap; declaration, 112

white-space property, 111–112

width

auto values for, 165

Auto Width, Adding to Tables (example), 20–21

Auto Width, Applying to Div (example), 21–22

of borders, 151–153

of elements, setting, 162–163

fixed width for tables, 256–261

min- and max-width, 166–169

percentage measurements and, 165

quirks mode and, 165

wildcard attribute substring selectors, 312–313

Windows

fonts and, 75

Notepad, writing CSS and, 5

resources, 384

text editors for, 5

Word-Spacing and Letter-Spacing Properties (example), 99–101

word-spacing property, 98–101

writing CSS, basics of, 6–12

X

x-height, 29

Y

Yahoo!'s Graded Browser Support page, 12

yellow color keywords, 411

Z

z-axis

relative positioning and, 224, 229

z-index property and, 235

z-index bug, 245–247

z-index property

absolute positioning and, 236–238

basics, 235, 248

integer values, using for, 238–245

position, controlling along z-axis, 235–236

stacking order, specifying, 243–244

zoom: 1; declaration, peek-a-boo bug and, 188

zooming, touch-screen devices and, 356, 362