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