HTML AND CSS

Index

XX A-Z
XX HTML & CSS shortcuts
XX Troubleshooting

# symbol (links) 87, 88 background gradients 419 top 366–371
_blank 86 backups 487 box-shadow property 320
<!-- --> 182 bandwidth 487 brightness 252
3D borders 310 baseline 268 bring to front 369
3D form buttoms 343 bgcolor attribute 138 browser quirk 242
12 column grid 387–390 blinking text 282 bulleted lists 65
960 pixel grid 387–390, block elements 102, 185, 317,
list-style-type property 333
391–394, 463 229, 361 position of marker 335
blueprint css 391
A bold text 45 C

abbreviations 53 <b> 45 cache control 192
above the fold 379 font-weight property 279 cap height 268
absolute positioning 363, 367 <strong> 51 capitalize 281
absolute URLs 79 borders carriage returns 48
accessibility 7 border attribute 138 cascade in CSS 239
border (CSS shorthand) 312 centering boxes 315
alt text 99, 272, 480 color 311 centering images 412
contrast 253, 420 design 469 centering layouts 315
headings 480 images 319 centering text 285
labelling form controls 163 radius 321 changes to content
screen readers 7 spacing 340
acronyms 53 style 310 <del> 56
adjacent sibling selector 238 width 309 <ins> 56
align attribute 103–105 bottom property 366–371 <s> 56
aligning form controls 345 bounce rate 485 checkboxes (forms) 155
aligning images using CSS 411 boxes 300-327 checked attribute 155, 156
aligning text 285 borders 309-312, 321 child folder 84
alpha transparency 256 child selector 238
alt attribute 99 design 469 chunking / grouping 465
alt text 99, 272, 480 box offsets 364, 364–371 circles in CSS 322
ampersand 194 box-shadow property 320 citations 52, 54
analytics 483–486 centering boxes 315 cite attribute 52
angled brackets 23, 24 circles 322 class attribute 184, 431
animated GIFs 117 elliptical shapes 322 class selector 238
ascender 268, 283 float 370–375 clear property 372
attributes 25, 26, 38 hiding content 317, 318 closing tag 20, 24
attribute names 25, 26 IE6 box model 316 closure 469
attribute selectors 292 margin 307, 314 codecs attribute 215
attribute values 25, 26 max-height property 305 code editors 29, 31-34, 49
audio 217–223 min-height property 305 color 246–261
author details 55, 192 overflow property 306 background color 250
autoplay attribute 214, 219 padding 307, 313 bgcolor attribute 138
positioning schemes 367-375 border color 311
B rounded corners 321 brightness 252
visibility property 318 color names 249, 252
background property 344 box offsets 364, 364–371 color pickers 251
background images 413-416 color values for CSS 251
background colors 138, 250 bottom 366–371 contrast 253, 420
left 366–371
INDEX right 366–371

design 467, 469 float 364, 370–375 design 452–473
hex codes 249, 252 float (images) 411 960 pixel grid 387–390,
hsl / hsla 255–256 fonts 271-280 391–394, 463
hue 252, 255 height 303, 409–410 above the fold 379
lightness 255 hiding content 317-318 chunking / grouping 465
opacity 254 how CSS works 229–232 columns 387–390
rgb values 249, 252 how rules cascade 239 consistency 470
rgba 254 inheritance 239 fixed-width layouts 381,
saturation 252, 255 internal style sheets 236 383–384
selecting a color 251 layout 358-405 getting your message across
cols attribute 154 links 290-291 465–466
colspan attribute 133 lists 333-336 grouping and similarity
columns (layout) 375–376 margins 314 469–470
comments in HTML 182 multiple style sheets 395 information hierarchy 465–
comments in CSS 249 padding 313, 337 466
conditional comments 442 positioning boxes 363-367 layout 358-405
containing elements 362 properties and values 231 liquid layouts 382, 385–386
content attribute 191–192 pseudo-classes 289-290 screen sizes and resolution
content management system rules 231–232 377–378
selectors 231–232, 237–238, site maps 461
(CMS) 33-34 target audience 455
code view 34 292 visitors' motivation 457
templates 81 style attribute 236 visual hierarchy 465, 467–468
visual view 34 <style> element (for internal web page sizes 379–380
continuance 469 what information visitors need
contrast 253, 420 CSS) 236 459
controls attribute 214, 219 tables 337-340 wireframes 463–464
copyright symbol 194 text 282–297
cropping images 113–114 vertical-alignment 286 digital rights management 213
CSS 226–425 what CSS is 6 dimensions of boxes in CSS 303
@import rule 395 what style an element is using directory structure 81-84
!important 239
attribute selectors 292 348 images 98
background images 413-419 width 303, 337, 371, 409-410 direct traffic 486
borders 309-321 cufon (typefaces) 272 diskspace 487
boxes 300–327 currency symbols 194 display property 317
box offsets 366–371 cursive typefaces 270 division symbol 194
bugs and browser quirks 242 cursor styles 347 DOCTYPE declarations 181
clearing floats 372 domain name 10, 487
colors 249, 252, 255–256 D Domain Name System (DNS)
CSS1, CSS2, CSS3 (versions)
dashed borders 310 9, 10
242 databases 149, 488 dotted borders 310
CSS3 8 date input 166 drop down list box 157
declaration 231–232 default pages 81, 82 drop shadows 288, 320
frameworks 391 defining intsance of a term 54
cursor styles 347 definition lists 67
external style sheets 235 definitions 54
external vs internal style descendant selector 238
descender (typefaces) 268, 283
sheets 241 description attribute 191

INDEX

E how flash works 203 type="radio" 155
params 218 type="search" 168
e-commerce 33 swfobject 207–208, 211, 218 types of form control 148
editing content uses of 204 type="submit" 160
flash of unstyled content 278 type="text" 152
<del> 56 float property 364, 370–375 type="url" 167
<ins> 56 float property (images) 411 action attribute 151
<s> 56 FLV (video format) 211 checked attribute 155, 156
editing images 108 folder structure 81-84 cols attribute 154
editing pages in a CMS 33 images 98 for attribute 163
elements 52 fonts id attribute 151, 163
definition of 20, 24, 38 choosing a typeface 269 maxlength attribute 152
diagram of 23, 24 font sizes 276 method attribute 151
elliptical shapes 322 fontsquirrel.com 277 multiple attribute 158
email input 167 specifying a font 273 name attribute 152, 155, 156,
email links 85 preferences / font stack 269
embossed borders 310 styles / terminology 267–268 157, 160
emphasis 51 type scales 275 rows attribute 154
empty-cells property 339 weights 268 selected attribute 157
empty elements 48 font-face property 271 size attribute 152, 158
ems (for font sizes) 274, 276 font-family property 271, 273 value attribute 155, 156, 157,
ems (unit of measurement font-size property 274, 276
font-weight property 279 160
boxes) 303 for attribute 163 aligning form controls 345
encoding 209 foreground color 249 changing submit button on
entity references 193–194 forward slash 24, 48, 84
equality selector 292 formatting code 47 hover 343
escape characters/codes forms 144–173 form validation 165
how forms work 149–150 get method 151
193–194 what HTML forms are 145 grouping form elements 164
existence selector 292 where to position labels 163 hidden form controls 162
exit pages 485 why use forms 147 hover styles 342
expires (meta information) 192 <button> 162 image buttons 161
external style sheets (when to <fieldset> 164 name/value pairs 150
<form> 151 placeholder text 168
use) 241 <input> 155, 159, 160-162, 166 rounded corners on text inputs
<label> 163
F <legend> 164 342
<option> 157 styling with CSS 341–346
fantasy typefaces 270 <select> 157 submit button 160
file input / upload box 159 <textarea> element 154 form validation 165
fixed positioning 364, 368 type attribute 155 frameborder attribute 190
fixed width layouts 381, type="checkbox" 156 FTP 489–490
type="date" 166 full screen layouts 382
383–384 type="email" 167
flash 200–223 type="file" 159 G
type="hidden" 162
adding a flash movie to your type="image" 161 general sibling selector 238
page 207–208 GIF 111

declining usage 204 animated GIFs 117
flash movies 203 GIMP 108
flash player 203 global attributes 183
flashvars 212, 218
flash video 211

INDEX

Google analytics 483–486 <hgroup> 438 background-images 413-416
Google maps 189 <nav> 432, 434 (gradients) 419
Google web fonts 277 <section> 433, 437 indenting text 287
gradients 419 <source> 215, 220
greater than symbol 194 <video> 213–216 border-images 319
grids 387–390, 463 autoplay attribute 219 bullet points 334
grouping and similarity 469, controls attribute 219 choosing images and stock
loop attribute 219
469–470 preload attribute 219 photography 97
grouping / chunking 465 scrolling attribute 190 copyright 97
grouping elements (<div>) 187 seamless attribute 190 cursors 347
grouping inline elements src attribute (audio) 219 dimensions 100, 107, 113–114
date input 166
(<span>) 188 email input 167 in CSS 409–410
search input 168 editing images 108, 113–114,
H URL input 167
form validation 165 116, 117
hCard 55 placeholder text 168 image formats 107
headings 22, 43 helping older browser
animated GIFs 117
<hgroup> 438 understand 442 bitmap 115
height attribute 100, 214 HTML5 shiv / shim 442 GIF 111, 115, 118
height property 303 layout 428–449 JPEG 109–110, 115
height property (images) HTML5 layout 428–449 PNG 112, 115, 118
HTTP SVG 116
409–410 get method 151 transparent GIF/PNGs 118
height iframe 189 post method 151, 159 vector formats 116
hex codes 249, 252 HTTP headers 151 resolution 107, 115
hidden form controls 162 Secure Sockets Layer (SSL) orientation (landscape/
hiding content 317, 318
home pages 81, 82 153 portrait) 114
horizontal rules 48 http-equiv attribute 192 position in surrounding text
hosted video 210 hue 252, 255
href 77, 79, 88, 235 101
hsl / hsla 255–256 I preparing for the web 107
HTML rollovers 417
id attribute 87, 88, 151, 163, 183 sprites 417
what is HTML? 6 id attribute (layout) 431 titles 99
HTML 4 179 id selector 238 indenting code 47
HTML5, 179 IE6 box model 316 indenting text 287
DOCTYPE declaration 181 image button 161 index.html 81, 82
differences from XHTML 179 image resolution 115 information hierarchy 465–466
HTML5 179 images 95–120 inheritance (CSS) 239
Comparison with HTML 4 179 inline elements 102, 186, 229,
<a> (HTML5 block level links) <img> 99, 100
<figcaption> 439 317, 361
441 <figure> 119, 439 Internet Service Provider (ISP)
<article> 432-439 src attribute 99
<aside> 436 alt text 99, 480 10
<audio> 217–220 aligning images 103–105, 412 IP address 10
<figcaption> 119, 422, 439 aligning images with CSS 411 italic text 45
<figure> 119, 422, 439
<footer> 432 <em> 51
<header> 432, 433 font-style property 280
<i> 45

INDEX

J letter-spacing property 284 M
lightness 255
JavaScript 208, 212, 218 like buttons 490 mailto: 85
JPEG 109, 109–112 line breaks 48 margin:auto 315
justify 285 line-height property 283 margin property 314
line items (lists) 65, 66 margin-top property 314
K links 75 margin-right property 314
margin-bottom property 314
kerning 284 <a> 77, 79 margin-left property 314
keywords 191, 479–482 href attribute 77 markers in lists 333
:active 291 markup (definition) 41
L :focus 291 mathematical symbols 194
:hover 291 max-height property 305
labelling form controls 163 :link 290 max-length attribute 152, 153
landing pages 485 :visited 290 max-width property 304
lang attribute 25 add / remove underline 282 meta descriptions 480
layer order 369 link opens in new window 86 meta information 191–192
layout 358–405 link to a part of a page 87 method attribute 151
link to an email address 85 min-height property 305
960 pixel grid 387–390, 391 link to other sites 79 min-width property 304
absolute positioning 363 link to the same site 80 mobile devices 377
box offsets 364 link to top of page 87 monospace typefaces 267–270
centering boxes 315 link text 78, 479, 480 multiple attribute 158
columns 371–376, 387–390 # symbol 87, 88 multiple browsers (testing) 242
design 452–473 liquid layout 382, 385–386 multiple columns 375–376
<div> 431, 440 min and max width 304 multiple languages 25
fixed positioning 364 lists multiple style sheets 395
fixed width layouts 381, definition lists 67 music 217–220
nested lists 68
383–384 ordered lists 65 mp3 player 218
float 364 unordered lists 66
grids 387–397 <ol> 65 N
helping older browsers <ul> 66
<li> 65 name attribute 152, 153, 155,
understand HTML5 442 <dd> 67 156, 157, 160, 191
liquid layouts 382, 385–386 <dl> 67
normal flow 363, 365 <dt> 67 names for attributes 25, 26
positioning schemes bullet or number styles 333- navigation

absolute positioning 367 336 <a> 77, 79
fixed positioning 368 gaps between list items 334 <a> (HTML5 block-level links)
floats displaying items side by side
441
clearing floats 372 317 designing navigation 471–472
normal flow 365 using images for bullet points <nav> 432, 434
relative positioning 366 using lists for navigation 317
position property 365 334 nested elements 362
sidebars 436 list-style-image property 334 nested lists 68
page sizes 379–380 list-style property 336 new window 86
z-index property 364 list-style-type property 333 nofollow (stop search engines
leading 283 loop attribute 214, 219
left property 366–371 lowercase 281 indexing) 191
less than symbol 194 normal flow 363, 365

INDEX

notepad 29-30 fixed positioning 364, 368 rollover images 417
notepad++ 29 float 364, 370–375 root folder 82
position property 365, 366, 367 rounded corners 321
O poster attribute 214 rounded corners on form
post method 151, 159
oblique text 280 pragma (meta information) 192 elements 342
Ogg Vorbis (audio format) 220 prefix selector 292 rows attribute 154
opacity 254 preload attribute 214, 219 rowspan attribute 134
opening tag 20, 23 process (design process)
open source fonts 277 S
ordered lists 65 452–473
overflow property 306 properties (see CSS Properties) sans-serif typefaces 267–270
overlapping content 306 proximity 469 saturation 252, 255
overlapping elements pseudo-classes 289 Scalable Vector Graphics (SVG)

z-index property 369 :active 291 180
overline 282 :focus 291 screen readers
:hover 291
P :link 290 what screen readers do 7
:visited 290 alt text 272
padding property 313 pseudo elements alt text for images 99
padding-top property 313 :first-line 289 interpreting semantic markup
padding-right property 313 :first-letter 289
padding-bottom property 313 50
padding-left property 313 Q link text 78
padding property (tables) 337 screen sizes and resolution
page sizes 379–380 quotations
page titles 27, 28, 480 <blockquote> 52 377–378
page views 484 cite attribute 52 scrolling attribute 190
paragraphs 44 <q> 52 scroll value (overflow property)
parent elements 362
parent folder 84 quote marks 194 306
password input (forms) 153 quotes seamless attribute 190
PC (creating pages on) 29 Search Engine Optimization
percentages (font sizes) 274, quote marks 194
(SEO) 479–482
276 R alt text 480
percentages (boxes) 303 Google keyword tool 481
Photoshop 108, 117 radio buttons (forms) 155 headings 480
PHP 149, 488 referrers 486 keywords 479–482
pixels (images / resolution) 115 relative positioning 363, 366 link text 78, 479, 480
pixels (unit of measurement) relative URLs 80, 83 meta keywords 191
rel attribute (CSS) 235 meta descriptions 480
274, 276, 303 resizing images 113–114 off-page techniques 479
placeholder attribute 168 resolution (images) 107 on-page techniques 479–480
PNG 112 resolution and screen sizes page names / URLs 480
page titles 480
transparent PNGs 118 377–378 preventing pages being
positioning schemes 363 rgb values 249, 252
rgba 254 indexed 191
normal flow 363, 365 right property 366–371 search terms 486
relative positioning 363, 366 robots (meta information) 191 secure sockets layer (SSL) 153
absolute positioning 363, 367 rollover buttons 343 select box 157-158
selected attribute 157
selectors (CSS) 237, 292
semantic markup 41, 50

INDEX

send to back 369 width attribute 137 text-indent property 287
serif typefaces 267, 267–270 styling tables in CSS 337–340 text-shadow property 288
shading alternate table rows border-collapse property 340 text-transform property 281
border-spacing property 340 textwrangler 31
338 empty-cells property 339 title attribute 53, 99
sifr (typefaces) 272 adding/removing gaps tools
site maps 461-462
size attribute 152, 153, 158 between cells 340 960 pixel grid 387
size of boxes in CSS 303 highlighting table rows 337 blogs 490
social networking buttons 490 shading alternate rows 338 CSS frameworks 391
space selector 292 what is a table 130 e-commerce 490
sprites 417 why use tables 127 email newsletters 490
src attribute 99, 189 tags 20-24, 38 Google analytics 483–486
src attribute (audio) 219, 220 target attribute 86 Google keyword tool 481
src attribute (video) 214, 215 target audience 455 HTML5 shiv / shim 442
stacking context 369 templates (in a CMS) 33, 34, 81 social networking buttons 490
strikethrough 56, 282 text web developer toolbar 348
structural markup 41 :active pseudo-class 291 top of page links 87
structure :focus pseudo-class 291 top property 366–371
:hover pseudo-class 291 tracking visitors 483
how documents use structure :first-letter pseudo element trademark symbol 194
15 transparency (images) 118
289 transparecny 256
how HTML describes structure :first-line pseudo element 289 type attribute 152, 153, 155, 159,
20, 21 @font-face 277
aligning text 285-286 236
using word processors 17 blinking text 282 type attribute (audio) 220
style attribute 236 choosing a typeface 269 type attribute (CSS) 235-236
submit button 160 drop shadows 288 type attribute (video) 215
formats 278 typefaces 267–272
styling buttons with CSS 343 font stack 269 typekit.com 277
subscript 46 indenting 287 type scales 275
substring selector 292 kerning/letter-spacing 284 type selector 238
suffix selector 292 leading/line-height 283
superscript 46 open source fonts 277 U
SVG 116, 278 specifying a font 273
swfobject 207–208, 211, 218 size 274 underline 56, 282
typefaces 267–270 Uniform Resource Locators
T type scales 275
underline 282 (URLs) 82
tables 126–141 uppercase/lowercase 281 absolute URLs 79
<table> 131 underline 282 relative URLs 80
<tbody> 135 weight 268, 279 directory structure 81
<td> 131 word-spacing 284 universal selector 238
<tfoot> 135 text-align property 285 unordered lists 66
<thead> 135 text color 249 uploading web pages 489–490
<th> 132 text-decoration property 282 uppercase 281
<tr> 131 textedit 31-32 URLs
bgcolor attribute 138 text editors 29, 31 Search Engine Optimization
border attribute 138 text in CSS 264–297
colspan attribute 133 (SEO) 480
padding property (tables) 337 URL input 167
rowspan attribute 134

INDEX

V exit pages 485
landing pages 485
value attribute 155, 156, 157, 160 referrers 486
values for attributes 25, 26 uploading to a web server
vector images 116
vertical-align property 286 489–490
vertical alignment of images web page sizes 379–380
web servers 7, 9, 10, 81, 84
105–106 white space 308, 469
vertical margins 308
video 200–223 margin and padding 307
padding property 313
<video> 209 margin property 314
hosted services or self-hosting gaps between list items 334
white space collapsing 47, 308
210 white space handling in HTML
digital rights management 213
encoding 209 47
flash video (FLV) 211 width attribute 100, 137, 189,
formats 213–216
214
AVI, Flash Video, h264, width property 303
MPEG, Ogg theora, width property (floating
QuickTime, WebM,
Windows Media 209 elements) 371
width property (images)
players and plugins 209
src attribute 214 409–410
view source 35, 162, 317, 318 width property (tables) 337
Vimeo 210 wireframes 463–464
visibility property 318 word-spacing property 284
visitors
referrers 486 X
tracking 483
visitors / visits / unique visits x height 268
XHTML 179
484
visual editors in a CMS 34, 49 differences from HTML 179
visual hierarchy 465, 467, DOCTYPE declaration 181
Strict/Transitional XHTML
467–468
180
W XML 180

wallpaper (images) 414 XML declaration 181
watermark (images) 414
web browsers 7 Y

testing in multiple browsers YouTube 210
242
Z
view source 35
web developer toolbar 348 z axis 369
web hosting 7, 9, 487 z-index property 364, 369

email accounts 488
web page layout 358–405
web pages

INDEX

TroubleShooting

Here are a few problems that beginners commonly face, along with the
pages where you can find solutions to them.

STARTING OUT TEXT GENERAL CSS

The browser shows the markup Some text flashes up before A specified style is not showing.
typed in (not the result page). showing the correct font. Remember CSS selectors are
Check the file extension is .html You have a Flash Of Unstyled case sensitive.
and not .txt. p 30, 32 Content. p 278
Check that your selectors are
Bold text, italics, headings, or When copying text from word correct. p 238
link text are extending longer processors, lots of extra tags are
than expected. added to the markup. The web developer toolbar can
Check you have closed the Copy the text into a plain text help you find the right selector.
relevant tag e.g. </a>. p 21, 22 editor (to remove formatting) p 348
then paste it into your HTML
The page I linked to is not found. editor. p 49 If the selectors are correct, do
Check the relative URL. p 83, 84 you have another selector that
The text looks bigger/smaller on applies to the same element
IMAGES some screens. later in the CSS? p 239, 240
This is usually due to variances
Images are not showing up. in screen resolutions. Also, CSS varies in some browsers.
Check the relative URL. p 83, 84 check the type scale is set for the There are a number of CSS
<body> element. p 377, 276 bugs/browser quirks that mean
Images are looking blurry. they render the page slightly
Check that you have saved your The font size is wrong in IE when differently - try searching for the
images in the right format and at I use ems. problem and see if it is a known
the size you want to show them See above. p 276 CSS bug/quirk. p 242
at. p 109-113
The font I specified is not HTML 5
Border images are not showing. showing in some browsers.
This only works with latest The computer must have that The browser is not applying
browsers. (Also, check the font installed. p 269-272 styles to HTML5 elements.
relative URL). p 319, 21, 22 If you are use @font-face it must If it is IE, you might need to use
be in several formats. p 341 the HTML5 shiv / shim. p442
GIFs that were resized now look
grainy or have jagged edges. My fonts look jagged on a PC. Block-level elements are
Check the color space in your Some fonts to do not anti-alias rendering as inline elements.
image editing program. It should as well as others on a PC. Try a Use display:block to tell the
be RGB (not indexed color). different typeface or try a thicker browser which HTML5 elements
version. p 272 are block-level elements. p 442

INDEX

LAYOUT A background image is not My floated element takes up the
showing on my box. full width of the browser window
The design looks bigger/smaller Does the box you are applying (or containing box).
on some screens. the style to to have a defined Check that you have specified
The resolution of a monitor height and width? p 303 a width for the floated element.
affects how big the items appear p 371
on the page. p 377, 378 Does the containing box have an
overflow property set to auto? The container around my floated
Margins above and below a box p 373, 374 elements are one pixel tall.
not showing. The containing element doesn't
Vertical margins collapse. p 308 My background images do not know the height of the floated
show when the page is printed. elements inside it. You can
My content does not fit in the Most browsers do not print either add an element that acts
containing box/browser window. background images by default to as a clearing box or use the
You can deal with this using the help save ink. You can adjust this overflow property with a value
overflow property. p 306, 316 in your print preferences. set to auto. p 373

Boxes look a different size in IE. There is a gap between the IE added an extra margin to my
Some versions of IE use a browser window and my floated elements.
different box model than all content. Set the display property to
other browsers. Use a DOCTYPE You may need to set margin and inline.
declaration to make old versions padding on the <body> element
of IE behave like other browsers. to 0. p 313, 314 If you've come across a problem
p 316 that you think belongs in this
FLOAT IN LAYOUT troubleshooting section, please
Boxes do not appear centered feel welcome to email it to us at:
when using auto for left and A box is not sitting next to [email protected].
right margins. another floated element. We will endeavor to address
You may need to use the Ensure that there is enough the most common problems
text-align property on the space in the containing element our readers have faced in future
containing element. p 315 for the two to sit side by side. editions of this book. Thank you!
p 303
Elements are overlapping.
When you take elements out of Margins and padding are added
normal flow, they can overlap. to the width of the box (except
z-index helps you control which for older versions of IE, which
item goes on top. p 369 have a different box model).
Therefore, the box might be
Why is the vertical-align wider than specified in the width
property not vertically centering property. p 316
my block-level element?
This property is not designed for Did you specify a width for the
this purpose. It is used to center floated element? (See next
inline elements on the page. point.)
You will find several ways to
vertically center block-level
elements (depending on their
context) if you search on Google.

INDEX

HTML Elements

<a> 77, 79, 85, 441 <form> 151 <option> 157
<abbr> 53 <h1> 22, 43 <p> 22, 44
<acronym> 53 <h2> 22, 43 <q> 52
<address> 55 <h3> 43 <s> 56
<article> 432-439 <h4> 43 <script> 208, 218
<aside> 436 <h5> 43 <section> 433, 437
<audio> 217–220, 219 <h6> 43 <select> 157
<b> 45 <head> 27 <source> 215, 220
<blockquote> 52 <header> 432, 433 <span> 188
<body> 22, 27 <hgroup> 438 <strong> 51
<br /> 48 <hr /> 48 <style> 236
<button> 162 <html> 22 <sub> 46
<cite> 54 <i> 45 <sup> 46
<dd> 67 <iframe> 189–190 <table> 131
<del> 56 <img> 99, 100 <tbody> 135
<dfn> 54 <input> 152, 155, 159- 162, 166 <td> 131
<div> 187, 431, 440 <ins> 56 <textarea> 154
<dl> 67 <label> 163 <tfoot> 135
<dt> 67 <legend> 164 <th> 132
<em> 51 <li> 65, 66 <thead> 135
<embed> 203 <link> 235, 396 <title> 27, 28
<fieldset> 164 <meta> 191, 192 <tr> 131
<figcaption> 119, 422, 439 <nav> 432, 434 <u> 56
<figure> 119, 422, 439 <object> 203 <ul> 66
<footer> 432, 433 <ol> 65 <video> 209, 213–216

INDEX

HTML Attributes

action 151 href 77, 79, 88, 235 size 152, 153, 158
align 103–105 http-equiv 192 src 99, 189, 214, 215, 219, 220
alt 99 id 87, 88, 151, 163 style 236
autoplay 214, 219 id attribute 183, 431 target 86
bgcolor 138 loop 214, 219 title 53, 99
border 138 maxlength 152, 153 type 152, 155, 159
checked 155, 156 method 151 type (audio/video) 220, 215
cite 52 multiple 158 type (CSS) 235-236
class 184, 431 name 152-157, 160, 191 type="date" 166
codecs 215 placeholder 168 type="email" 167
cols 154 poster 214 type="hidden" 162
colspan 133 preload 214, 219 type="image" 161
content 191, 192 rel 235 type="password" 153
controls 214, 219 robots 191 type="search" 168
description 191 rows 154 type="submit" 160
for 163 rowspan 134 type="url" 167
frameborder 190 scrolling 190 value 155-157, 160
global attributes 183 seamless 190 width 100, 137, 189, 214
height 100, 189, 214 selected 157

INDEX

CSS Properties

background-attachment bottom property 366–371 margin-right property 314
property 414 box-shadow property 320 margin-top property 314
clear property 372 opacity 254
background-color 250 color 249 padding-bottom property 313
background-image property 413 cursor property 347 padding-left property 313
background-image property display property 317 padding property 313
empty-cells property 339 padding property (tables) 337
(gradients) 419 float property 364, 370–375 padding-right property 313
background-position property float property (images) 411 padding-top property 313
@font-face 277 position property 366, 367
415 font-face 271 rgba 254
background property 416 font-family 271, 273 right property 366–371
background-repeat property font-size 274, 276 text-align 285
font-style property 280 text-decoration 282
414 height (images) 409–410 text-indent 287
border-bottom-color 311 hsl / hsla 255–256 text-shadow 288
border-bottom-style 310 left property 366–371 text-transform 281
border-collapse property 340 letter-spacing 284 top property 366–371
border-color 311 line-height 283 vertical-align 286
border-image property 319 list-style-image property 334 visibility property 318
border-left-color 311 list-style-position property 335 width (images) 409–410
border-left-style 310 list-style property 336 width property (floating
border property 312 list-style-type property 333
border-radius property 321 margin-bottom property 314 elements) 371
border-right-color 311 margin-left property 314 width property (tables) 337
border-right-style 310 margin property 314 word-spacing 284
border-spacing property 340 z-index property 364, 369
border-style 310
border-top-color 311
border-top-style 310

Pseudo-Classes, Elements & Rules

:active 291 :hover 291, 343, 342 @font-face 277
:first-letter 289 highlighting table rows 337 @import rule 395
:first-line 289 !important 239
:focus 291, 342 :link 290
:visited 290

INDEX