Symbols!important rule, 209 @import rule, 140-144, 146, 155-156, 157 @media rule, 155-156 A <a> element. See anchors abbr attribute, 36-37 <abbr> element, 87, 90-91 absolute positioning, 177, 178, 182, 189, 225, 226 accessibility, of tables, 30-32 accesskey attribute, 72-73, 79 <acronym> element, 87, 90-91 active class, 12 :active pseudo-class, 103 :active rule, 218 active state, 106, 218 Adaptive Path, 236 :after pseudo-class, 159 a:hover,12 alignment of text, 197-198 all media type, 154, 155, 156 alt text, 213 alternate styles, 147-151,219 anchors, 95-107 id attribute, 98-99 overview, 95-96 styling links, 103-106 active state, 106 a:visited declaration, 105 backgrounds, 104 dotted borders, 104-105 hovering over links, 105 order of declarations, 106 title attribute, 101-103 using empty anchor tag with name attribute, 96-97 using name and id attributes, 100-101 wrapping <a> tag around headings, 97-98 antialiased text, 192 <applet> element, 100 applying C55. See C55 application Asterisk* web log, 237 aural media type, 154 aural style sheets, 90, 154 automatic numbering, of lists, 111-112, 117 a:visited declaration, 105 B <b> element. See bold «b> element) background images and bullets, 9 colors of, 104 to create illusion of colored columns, 188 with definition lists, 116 and mini-tab navigation bars, 13 multiple, 57-59 in table headers, 43-45 in tiled backgrounds, 23 background property and adding icons, 115 and assigning icons to IDs, 45-47 and background quote marks, 56 and bullets, 132 and chameleon effect, 25 and Fahrner Image Replacement (FIR), 204-209 and swappable icons, 23 background:#ccc; rule, 46 background-image property, 13, 57, 204, 229 242
background-position variable, 217 backgrounds colors of, 174, 175, 176, 187 of headings, 22-23 of links, 104 backward compatibility, 99, 100, 101 "Be nice to Opera" rule, 186 block-level element,s, 128, 130, 135 <blockquote> element, 53-62 cite attribute, 54-55 inline quotations, 55-56 misusing, 53-54 overview, 53 styling, 56-61 <body> element, 223-231 adding ids, 228-231 assigning class to, 224, 227 font-size percentages, 79 line height, 193 two and three columns, 223-225 bold «b> element), 84-85 vs. <strong>, 82-83 using with <p> element, 17 using with italics, 85-87 books about Web standards solutions, 238 border attribute, 39 border rule, 39 border-bottom, 13 border-collapse property, 40-41 border-left, 39-40 borders adding, 133-135 for headings, 22 of links, 104-105 border-top, 39-40 bottom center, 13 bottom coordinates, 178 box model, 171, 183-184,209 Box Model Hack, 185, 186-187, 189,209,210, 211,237 box model problem, 183-187 braille media type, 154 Brainstorms and Raves weblog, 237 break «br I» element, ~ 2-3 in forms, 65-66 using with lists, 4, 7 using with terms and descriptions, 114 browsers C552-compliant, 184, 186 Internet Explorer, 139 for Mac, 41 for Windows, 58, 91, 105, 183 Mozilla, 149 Netscape, 139, 141, 146, 148, 157,237 nonvisual, 18, 84 Opera, 186, 220 Safari,192 bullets, 4, 111 c custom, 9, 132-133 turning off, 8-9 capitalization, 196-200 drop caps, 196-197 small caps, 198-200 <caption> element, 31, 32 cascade property, 144-145, 150 Cascading Style Sheets, 238 243
CDATA comment syntax, 138 <;:elik, Tantek, 237 chameleon effect, 24-26 child element, 128 cite attribute, 54-55 <cite> element, 87-89, 93 class attribute, 38, 130, 135 class label, 127 class="active", 12, 229 class="quotation", 53 classes using few, 125-128 using many, 124-125 clear property, 173, 178 clear: right; rule, 171 ClearType, 192 <code> element, 87, 92 color property, 104 columns, 187-189 compatibility, 99, 100, 101 contextual selector, 25 C55 application, 137-151 @import rule, 140-144 <style> element, 138-139 alternate styles, 147-151 cascade property, 144-145 external style sheets, 139-140 in line styles, 145-146 multiple style sheets, 142-143 overview, 137-138 C55 layouts, 165-189 box model problem, 183-187 faux columns, 187-189 floating content, 173-176 floating sidebars, 167-173 double float, 172-173 general discussion, 167-172 overview, 165-166 positioning, 176-182 column space, 177 footers, 178-180 header height, 177 sidebars, 178 three-column layout, 180-182 "C55 Layout Techniques: For Fun and Profit," 183 C55 Zen Garden, 183, 235, 236 C552-compliant browsers, 184, 186 css-discuss mailing list, 235 custom bullets, 9, 132-133 custom.css file, 144, 145 D The Daily Report web log, 236 dashed value, 1 04, 105 data relationships, and table headers, 35-36 data table, 30, 31, 33 <dd> element, 69, 70, 114, 115, 116 decimal list-style-type, 112 "default" style sheet, 148 definition description element «dd» element, 69, 70, 114, 115, 116 definition list «dl» element, 69, 70,114-116 descendant selector, 124, 126, 128, 130, 132, 135 Designing With Web Standards, 236, 238 <dfn> element, 87 Digital Web Magazine, 235 display: inline, 218 display property, 158, 206, 207, 208, 209, 211, 213 244
<div class="quotation"> element, 52-53 <div> element and faux columns, 187 and floating content, 173-176 and floating sidebars, 167-173 and index pages, 226-227 and markup minimization, 124, 126, 128-130,227 and positioning, 176-180 using with quotations, 53 dive into accessibility website, 235 dive into mark website, 89 <dl> element, 69, 70,114-116 Document Object Model, 150 dotted borders, of links, 104-105 drop caps, 196-197 drop class, 196 <dt> element, 69, 70, 114, 115, 116 E em dash, 52 em units, 193, 200 <em> element, 82-84 embedded style sheets, 139 embossed media type, 154 extensible HyperText Markup Language (XHTML), 2,3,6,10,12 extensible Markup Language (XML), 6 external style sheets, 139-140, 145, 146, 147, 157 F Fahrner Image Replacement (FIR), 204-208 Fast Company magazine, 24, 142, 215-227, 236 "Fast Rollovers, No Preload Needed," article, 216 faux columns, 187-189 <field set> element adding style to, 77-78 using to group form sections, 76-77 FIR (Fahrner Image Replacement), 204-208 :first-letter pseudo-class, 196 fixed-pitch character grid, 155 fixed-width layout, 171 flexible-width layout, 171 flicker effect, 217 float: left, 11 float method, 172 float property, 167, 169, 173, 176, 189 floating content, 173-176 floating sidebars, 167-173 double float, 172-173 general discussion, 167-172 <font> element, 192 font-family property, 76, 194-195 font-style property, 85, 92 font-variant property, 199-200 footers, 129 for attribute, 67 <form> element, 74, 79, 100, 129 forms, 63-79 accesskey attribute, 72-73 containing each label and control in own paragraph, 66-68 defining, 68-71 overview, 63-64 styling, 73-79 adding style to <field set> and <legend>, 77-78 avoiding redundancy, 76 customizing fonts, 74-75 245
grouping form sections, 7&-77 setting width of text inputs, 73-74 three-dimensional <legend>, 78-79 tabindex attribute, 71-72 using single paragraph and <br />tags in, 65-66 using tables with, 64-65 forward compatibility, 100, 101 <frame> element, 100 "From Table Hacks to (55 Layout: A Web Designer's Journey," 183 G gaps in tables, closing, 40-42 GIF image, 56, 118 global styling, 100, 101, 103 grids in tables, creating, 39-40 H <h1> through <h6> tags. See heading elements handheld media type, 154 <head> element, 138, 142, 145, 146, 147, 156, 157 headers, in tables with background images, 43-45 customizing, 42-43 and data relationships, 35-36 overview, 33-34 heading class, 16, 20 heading elements and <a> element, 97-98 background images applied to, 206 and classified (55, 125 and contextual (55, 12&-127 and custom.css, 144-145 easy styling with, 17-18 and Fahrner Image Replacement (FIR), 205 heading order, 19 and Leahy/Langridge Image Replacement (LlR), 208-209 letter-spacing property applied to, 195 reasons some designers avoid, 18-19 and search engines, 19 text-align property applied to, 198 text-transform property applied to, 199 and toggling of columns, 228 headings, 15-27 <p> tag used with <b> tag, 17 <span> tag, 1 &-17 backgrounds for, 22-23 for borders, 22 chameleon effect. 24-26 overview, 16 simple styling, 20-21 swappable icons, 23-24 for tiled backgrounds, 23 updating, 24 height rule, 209 help symbol, 91 hi-fi logo, 213, 214, 215 hifi.css file, 143, 144 horizontal navigation, 10, 229 :hover pseudo-class, 103 :hover rule, 218 hover state, 218 hovering over links, 105 href attribute, 139 246
HTML 4.01 <cite> element, 88 phrase elements, 82 type attribute, 113 <html> element, 138 <i> (italics) element, 84-87, 93 icons assigning to IDs, 45-48 and headings, 23-24 id attribute adding to <body> element, 228-231 anchors, 98-99 assigning icons to, 45-48 and markup minimization, 131, 135 using with <blockquote>, 57 using with anchors, 99, 100 using with forms, 66, 67, 73-74 using with headers, 35, 36 using with lists, 10, 117, 118, 119 <iframe> element, 100 image replacement, 203-221 Fahrner Image Replacement (FIR), 204-208 image-tab rollovers, 215-221 compatibility, 220 reasons to use, 219 results of, 218-219 text scalability, 219 Leahy/Langridge Image Replacement (LlR), 208-209 logo swapping, 212 overview, 203-204 Phark Method, 209-210 images, in table header backgrounds, 43-45. See also background images "images off/c55 on," 208, 209, 210, 211, 215 <img> element, 24, 25, 100 Inc.com website, 12 indenting paragraphs, 200-201 index class, 227 index pages, 224, 226-227 inline elements,s, 10 inline quotations, 55-56 inline style, 145-146, 147 <input> element, 65, 66, 70, 73-74 Internet Explorer browser, 139 for Mac, 41 for Windows, 58, 91, 105, 183 italics «i» element, 84-87, 93 J Java5cript, 12, 149-150,216,217,219 justification, 197-198 K <kbd> element, 87, 93 kerning (letter-spacing), 195-196 L <label> element, 67-68, 70, 72, 74-75, 76 lang attribute, 55 language code, 55 "The Layout Reservoir" website, 183 layouts. See C55 layouts Leahy/Langridge Image Replacement (LlR), 208-209,216 247
left coordinates, 178 <legend> element, 7&-77 adding style to, 77-78 three-dimensional effect, 78-79 letter-spacing (kerning), 195-196 <li> element, 5-6 adding id to, 117-119,216,217,229 automatic numbering, 111 creating tab-like effect with, 12 using with bullets, 4, 5, 9 using with site maps, 132, 133 lines of text height of, 193 wrapping, 3-4, &-8 :link pseudo-class, 98, 103 <link> element, 155 media attribute, 154, 157 order in markup, 144 using with external style sheets, 139 using with multiple style sheets, 142, 143, 147 links, 103-106. See also anchors active state, 106 a:visited declaration, 105 backgrounds, 104 dotted borders, 104-105 hovering over, 105 order of declarations, 106 LlR (Leahy/Langridge Image Replacement), 208-209,216 A List Apart magazine, 13, 149-150, 187, 234-235, 236 lists, 1-13, 109-121 <br /> tag, 3 block level vs. inline elements,s bullets, 4 custom, 9 turning off, 8-9 indenting, 8 mini-tabs, 12-13 navigation via, 10-13 numbered, 11 0-113, 117-120 overview, 1-2, 109-110 terms and descriptions, 113-116 wrapping lines, 3-4, &-8 list-style: none, 218 list-style-image property, 9 list-style-type property, 112, 118 "Little Boxes," 183 Living Can Kill You weblog, 237 lo-fi logo, 213, 215 logo swapping, 212 low vision users, 219 lower-alpha list-style-type, 112 lower-roman list-style-type, 112 M main.css file, 144, 145 <map> element, 100 margin-left value, 53 markup, minimizing, 123-135 <div> element, 128-130 adding borders, 133-135 adding style, 131-132 custom bullets, 132-133 descendant selectors, 124 overview, 123-124 using few classes, 125-128 using many classes, 124-125 248
master.css file. 144 media attribute. 154. 155. 156. 157 media types. 154-155. 162 meyerweb.com weblog. 236-237 mezzoblue weblog. 236 minimizing markup. See markup. minimizing mini-tabs. 12-13. 230 mobility-impaired users. 67. 72 mouseover effects. 105 Mozilla browser. 149 multiple style sheets. 142-143 N name attribute. 96-97. 99. 100. 101 navigation image-tab rollovers. 215-220 by using id attached to <body>element. 229-230 via lists. 10-13 negative letter-spacing. 195 negative text-indent value. 210 nesting inline quotations. 56 lists. 135 Netscape browser. 139. 141. 146. 148. 157. 237 none list-style-type. 112 nonsemantic markup. 82 nonvisual browsers. 18. 84 no-repeat. 9. 24 normal state. 218 numbered lists. 110-113. 117-120 numbering. of lists. 111-112 o <01> element. 4. 111. 117 Opera browser. 186. 220 organizations related to Web standards solutions. 234-236 p <p> element. See paragraph «p» element padding. 21. 22. 23. 41-42.43. 53. 59 padding-top value. 208 page layouts. 224 paged media. 154 paragraph «p» element and headings. 17 indenting paragraphs. 200-201 using with forms. 66. 75. 77 paragraph indentation. 200-201 PDAs (Personal Digital Assistants). 4 Phark Method. 209-210 phrase elements. 81-93 <abbr> and <acronym>. 90-91 <cite> element. 87-89 <code> element. 92 <em> element. 82-84 <kbd> element. 93 <samp> element. 92 <strong> element. 82-83 <var> element. 92-93 bold and/or italic. 84-87 list of. 87 overview. 81-82 pixel location. 9 249
pixel width. 73 point values. 158 position: absolute. 178. 220 positioning. 176-182 column space. 177 footers. 178-180 header height. 177 sidebars, 178 three-column layout. 180-182 positive letter-spacing. 195-196 presentational vs. structural markup, 82 preview option. 160 "Print Different" article. 161 print styles. 153-163 @media rule or @import rule, 155-156 building print style sheets. 157-162 appearance. 160-162 exposing links. 159 hiding unnecessary elements. 158-159 link text. 160 point values. 158 print preview, 160 media attribute. 155 media types. 154-155 multiple values. 156 overview. 153-154 separating screen and print styles. 157 print value. 157 print.css file. 157 projection media type. 154 publications about Web standards solutions. 234-236 Q <q> element. 55 quotations. 51-61 <blockquote> element. 53-62 cite attribute. 54-55 inline quotations. 55-56 misusing. 53-54 overview. 53 styling. 56-61 <div c1ass="quotation"> element. 52-53 overview. 51-52 R rei attribute. 147. 148 repeat-x command. 23 repeat-y command. 23. 188 resources about Web standards solutions. 234-236 "Revised Image Replacement" article. 211 rollovers. image-tab. 215-221 compatibility. 220 reasons to use. 219 results of. 218-219 text scalability. 219 5 Safari browser. 192 <samp> element. 87. 92 screen media style. 157 screen media type. 154 screen media types. 155 screen readers <abbr> element. 90 emphasized words and phrases. 83 250
and Fahrner Image Replacement (FIR), 207 header and data information, 35 hidden images, 213 and Leahy/Langridge method, 209 links, 84, 103 and Phark Method, 210 screenandprint.css file, 156 screenstyles.css file, 155 search engines, 19 selected class, 218 selected state, 218 semantic markup, 5, 7, 82 server-side software, 89 shaped tab, 229 shared rule, 76 shorthand method, 46-47 sidebars, floating, 167-173 double float, 172-173 general discussion, 167-172 SimpleBits website, 188,218 single pixel grid, 39 size attribute, 73 small caps, 198-200 solid value, 105 <span> element background property, 213-214 and Fahrner Image Replacement (FIR), 205-207 and headings, 16--17 and Leahy/Langridge method, 208-209 and Phark Method, 210 using drop class with, 196 using with forms, 64 using with headings, 18, 19 speech media type, 154 speech synthesizer user agents. See screen readers Speed Up Your Site, 238 standards-based markup, 238 Stopdesign weblog, 236 <strong> element, 60, 82-83 structural markup, 82, 89, 93 style attribute, 145 style sheet switcher script, 150 <style> element, 138-39, 144, 145, 146, 156 styles.css file, 142-143, 157 styling <blockquote> element, 56--61 forms, 73-79 adding style to <fieldset> and <legend>, 77-78 avoiding redundancy, 76 customizing fonts, 74-75 grouping form sections, 76--77 setting width of text inputs, 73-74 three-dimensional effect, 78-79 text, 191-201 changing line height, 193 drop caps, 196--197 font-family property, 194-195 kerning (letter-spacing), 195-196 overview, 191-192 paragraph indentation, 200-201 small caps, 198-200 text alignment, 197-198 'transforming text, 198 summaries, adding to tables, 33 superfluous banter weblog, 237 swappable icons, 23-24 synthesis parameter, 83 251
T tabbed navigation, 219 tabindex attribute, 71-72, 79 <table> element, 32, 33, 39, 40 tables, 29-49 <tbody> element, 37-38 <tfoot> element, 37-38 <thead> element, 37-38 abbr attribute, 36-37 accessibility of, 30-32 adding summaries to, 33 assigning icons to IDs, 45-48 closing gaps, 40-42 creating grids, 39-40 headers in with background images, 43-45 customizing, 42-43 and data relationships, 35-36 overview, 33-34 overview, 29-30 and tabular data, 30 using with forms, 64-65 tabs, 12-13, 230 tabular data, 30, 31 "Taming Lists" article, 13 <tbody> element, 37-38 <td> element, 33, 35, 39, 41 terms and descriptions, in lists, 113-116 text, styling, 191-201 changing line height, 193 drop caps, 196-197 font-family property, 194-195 kerning (letter-spacing), 195-196 overview, 191-192 paragraph indentation, 200-201 small caps, 198-200 text alignment, 197-198 transforming text, 198 text-align property, 197-198 textlcss value, 138 text-decoration property, 104 text-indent property, 200-201 text-transform property, 199 <th> element assigning icons to, 45, 46 and background images, 43 in grids, 39-40 and header and data relationships, 35, 36 and heading customization, 42 overridden default colors, 47 overview, 33-34 three-column layout, 180-182 three-dimensional effect, in forms, 78-79 tiled backgrounds, 23 TimeslTimes New Roman font, 192 title attribute, 90,101-103,107,147,149 toggling alternate style sheets, 149 tooltips, 91, 102-103 <tr> element, 37, 38 transforming text, 199 tty media type, 155 tv media type, 155 type attribute, 113, 138 u <ul> element, 4, 6, 7, 125, 129 unordered lists navigation via, 10-12, 228-229 252
using with bullets. 8 using with image-tab rollovers. 216 using with terms and descriptions. 114 wrapping lines. 6 updating headings. 24 upper-alpha list-style-type. 112 upper-roman list-style-type. 112 "Using Background Image to Replace Text" tutorial. 205 x XHTML (extensible HyperText Markup Language). 2. 3. 6. 10. 12 XML (extensible Markup Language). 6 z ZeIdman. Jeffrey. 236 v validation. 4 <var> element. 87. 92-93 :visited pseudo-class. 103 voice-family property. 186 w W3C (World Wide Web Consortium). 234 Web Standards Project. 234. 236. 237 Web-Graphics website. 235 weblogs. 236-237 Weekly Standards website. 236 What Do I Know? weblog. 237 width property. 184. 185 width rule. 186 width variable. 217. 218 Willison. Simon. 237 Wired News. 236 World Wide Web Consortium (W3C). 234 wrapping <a> tag around headings. 97-98 lines. 3-4. 6-8 253