329 G Gecko, 23 gel effect, 252 Georgia font, 226, 227 GIF image format, 168, 258 global navigation menus, 248, 252 Good magazine, 272, 274 Google Chrome, 23 gradients, 136, 260, 264, 266 graph paper, 182 greek text, 196 grid-based layouts, 40, 209, 218–223. See also grids Grid System, The, 208, 210 grid.css, 219, 221, 223 grids, 190, 209, 210, 218–223, 262–265 guides, 190 H handheld devices, 118, 282 hard launch, 204 hash mark, 68 <head> tag, 210, 283, 292 header cap image, 268 header tags, 6 headers basic style rule for, 54–55 combining style rules for, 58–59 creating with fi xed elements, 160 declaring multiple styles for, 56–57 for sidebars vs. main body, 70 tips for styling, 238–239 headlines, 234 height, fl uid vs. fi xed, 184–185, 186 height property, 148–151 Helvetica font, 226 hex color values, 24, 54, 194, 310–315 hiding elements, 144–145 hip hop magazine, 50 horizontal menus, 248, 250 hover state, 80, 81, 82, 170, 244, 298 HTML code, for voxLibris, 291–301 as core Web technology, 1, 2 and CSS, 6–9 developer of, 8 and DOM, 4 dynamic, 12 meaning of acronym, 6 purpose of, 2, 6 tags. See HTML tags validating, 275 HTML framework, 212–213 HTML selector, 60–61 HTML tables, 40 HTML tags adding multiple classes to, 66–67 binding styles to, 50 creating basic style for, 50 how CSS acts on, 50 inline styles for, 92–93 purpose of, 6, 50 styling, 60–61 weight of, 114 hypertext links creating, 243 purpose of, 243 styling, 80, 243, 246 underlining, 246 Hypertext Markup Language, 6. See also HTML I i love typography, 224, 226 iCab, 23 ID names, 4, 66, 270, 283, 286 ID selector, 68–69, 114 IE. See Internet Explorer ie6.css, 320 iLife fonts, 228 Illustrator, 32 ilovetypography.com, 224, 226 image editors, 32, 258 image fl ashing, 244, 284 330 image position, 138–139 image sw apping, 244 image tiling, 136–137, 190 ImageReady, 192 images background. See background images embedding directly in page, 257 fl oating, 146–147 transparent, 192, 258–261 <img> tag, 257, 284 Impact font, 226, 227 import rule. See @import rule importance, 120 indents, 130, 132, 200 index.html, 213, 292–294 inherit display type, 142 inherit keyword, 124 inherit position type, 160 inheritance, 106–109 how it works, 106–107 overriding, 108–109 inline-block display type, 142 inline boxes, 140 inline display type, 142 inline elements, 6 inline styles, 90, 91, 92–93, 120, 283 Internet Channel, 23 Internet Explorer (IE). See also specifi c IE versions and CSS, 20 and downloadable fonts, 230 and font sizes, 236 and @import rule, 203, 295 layout engine, 23 market share, 18, 20 and opacity, 144 quirks/fi xes, 317–323 version considerations, 19 and Web standards, 44, 317 Internet Explorer 5 (IE5), 318 Internet Explorer 6 (IE6) and caption-side property, 166 and child/sibling selectors, 76, 86 and conditional styles, 320, 323 and CSS, 20 and CSS box model, 158–159, 222, 318, 322 and Doctype switching, 319, 322 and dynamic pseudo-classes, 84, 323 and fi xed elements, 160 fl aws, 20 and inline-block display type, 142 and max/min-height properties, 150, 323 and max/min-width properties, 150, 323 and padding/borders, 158 and PNG image format, 260, 323 and pseudo-elements, 86 and quirks mode, 318, 319, 321 and stair-stepped elements, 322 testing on Macintosh, 22–23 and underscore hack, 158, 260, 321, 323 and Web standards, 44, 317 Internet Explorer 7 (IE7), 20, 44, 76, 84, 166, 317 Internet Explorer 8 (IE8), 20, 44, 166, 254, 317 invisible elements, 144 italic font, 128 italics tags, 8 iteration, 206–207 J Java, 23 JavaScript as core Web technology, 1, 2 and CSS, 10–13 and DOM, 4, 10 libraries, 12 purpose of, 2 JavaScript Object Notation, 12 jigsaw.w3.org/css-validator, 274, 276 josbuivenga.demon.nl, 237 JPEGs, 168, 192 jQuery, 12 JSON, 12 331 K keywords, 124, 310 KHTML, 23 Koch, Peter-Paul, 318 Konquerer, 23 Krista’s Creations, 13 Kuler, 30, 31 L launch, site, 204 layout engines, 23 layout grids, 209, 218–223, 297. See also grids layout.css, 214, 297 layouts, 209–223 adding CSS to, 214–215 default styles for, 216–217 grid-based, 40, 209, 218–223 structure for, 210–215 left position property, 138, 162, 163, 220 legacy browsers, 18 <length> value, 125, 138 Letter-Photo, 13 letter-spacing property, 130, 131 <li> tag, 248 libraries, JavaScript, 12 Lie, Håkon Wium, 8 line-height property, 130, 131 link actions, 82–83 link colors, 82–83 link pseudo-classes, 80, 82 link states, 80–83, 244–245, 246, 298 <link> tag, 90, 96, 100, 102, 282 links creating, 243 in printed Web pages, 281 purpose of, 243 styling, 80, 243, 246 underlining, 246 Linux, 20 lipsum.com, 196 list element tags, 6 list-item display type, 142 list-style-image property, 168, 169 list-style-position property, 168, 169 list-style property, 168, 169 list-style-type property, 168, 169 list tags, 248 lists, 168–169, 240 Lobo, 23 logos, 214, 260, 266–267, 270, 284 Lorem Ipsum text, 196 M Macintosh code editors, 28, 29 core Web fonts, 226 operating system fonts, 228 testing IE6 on, 22–23 text editor, 98 Web browsers, 18, 20–21 Web-safe fonts, 306 MacRabbit, 29 main.css, 215, 295 margin-bottom property, 156 margin-left property, 156 margin property, 156, 157 margin-right property, 156 margin-top property, 156 margins, 154, 156–157, 186, 322 max-height property, 150, 151, 323 max-width property, 150, 151, 323 media types, 94, 118–119, 120 menus, 160, 240, 248–251 meta information, 210 Microsoft Internet Explorer. See Internet Explorer Offi ce, 228 Visio, 182 and Web standards, 44 Word, 98 min-height property, 150, 151, 323 min-width property, 150, 151, 323 332 mobile devices, 21, 280 modules, 222, 268 mood boards, 188–189 MooTools, 12 Mosaic, 8 mouse pointer, 170 -moz-border-radius property, 174, 175 -moz-box-shadow property, 172, 173 Mozilla and CSS standards, 44 Firefox add-ons, 24–27 MSN Explorer, 23 myths, CSS, 35–45 N navigation, 243–255 and anchor tags, 244 buttons, 252–254 and CSS sprites, 244, 284 hiding in printed Web page, 281 links, 246–247 menus, 248–251 navigation.css, 214, 298–299 Netscape, 23 NewsGator, 28 Nintendo DS Browser, 23 no-repeat property, 136, 137 none display type, 142 normal keyword, 124 NotePad, 98 notes, 104–105 <number> variable, 125 numbered lists, 168 O object IDs, 4 OmniGraffl e, 182 OmniWeb, 23 opacity, color, 310 opacity value, 144, 145 Open Type fonts, 230 Opera and CSS, 21 and downloadable fonts, 230 layout engine, 23 popularity of, 21 and Web standards, 44 Opera Mini, 23 operating system fonts, 228 optimizing, 286 order, style, 110, 120 ordered lists, 168 outline-color property, 174 outline property, 174, 175 outline-style property, 174 outline-width property, 174 outlines, 174, 175, 223 overfl ow property, 148, 149 P padding, 154–155, 186, 218, 284 padding-bottom property, 154 padding-left property, 154 padding property, 154, 155 padding-right property, 154 padding-top property, 154 page fl ow, 184–185 page framework, 212 page header tags, 6. See also headers Palette Grabber, 26 Panic Software, 16, 18, 28 paragraph tags, 6 paragraphs, styling, 86–87, 240 parent-inherited styles, 106, 120 <percentage-box-width+padding> value, 138 <percentage> variable, 125 Photoshop and chrome, 192 color considerations, 190 creating color palette for, 26 low-cost alternative to, 32 Proof Setup options, 190 and transparent PNGs, 192, 258 333 and Web design process, 180 pixels, 285 placeholder content, 196 planning process, 182–191 mood boards, 188–189 page fl ow, 184–185 sketches, 182–183 visual comps, 190–191 wire frames, 186–187 PlayStation, 21 PNG image format, 168, 192, 258–261, 323 point sizes, 281 Portfolio CSS Gallery, 38 position properties, 138, 220 position type, 160–161 Presto, 23 print, adapting designs for, 118, 281, 282 print process, 36 printer-friendly Web pages, 118 programming languages, 36 properties, style rule, 52 property shortcuts, 200, 286 prototypes, 180, 196–203 pseudo-classes, 80, 82, 170, 323 pseudo-elements, 80, 86 public domain books, 292 pull quotes, 146 Q quirks mode, 318, 319, 321 Quirks Mode site, 318 quotes, 78–79, 146, 240 R readmore class, 246 RealPlayer, 23 relative position type, 160, 161 relative URLs, 309 rendering engines, 23 repeat property, 136, 137 repeat-x property, 136, 137, 264 repeat-y property, 136, 137 RGB Alpha color format, 310 RGB proof setup, 190 RGB values, 24, 54, 194, 285, 310–315 right position property, 138, 220 right property, 162, 163 Rijksmuseum Web site, 242, 244 rounded corners, 174, 175, 190, 254, 258 rows, 212, 218–219, 264–265, 297 rules of style, 50–59 basic style rules, 54–55 combining rules, 58–59 declaring styles, 56–57 how they work, 50 limiting scope of, 285 parts of style rules, 52–53 S Safari and CSS, 21 and design enhancements, 254 as development tool, 21 and downloadable fonts, 230 layout engine, 23 and rounded corners, 174 and shadows, 172 and Web standards, 44 screen media type, 118 scroll lines, 186 search engine optimization, 283. See also SEO sections, 212, 222–223, 268–271, 297 selector declarations, 54 selectors, 60–75 adjacent, 78 child, 76 class, 62–67 defi ned, 52 descendent, 72–75 HTML, 60–61 sibling, 76, 78 semantics, 89–121. See also CSS vocabulary adding notes to CSS, 104–105 334 cascade, 120–121 determining CSS rule’s weight, 114–115 embedding styles in Web page, 94–95 external styles in Web site, 96–103 importance, 116–117 inheritance, 106–109 inline styles for HTML tag, 92–93 media types, 118–119 order of style rules, 110–111 specifi city in style rules, 112–113 where to put style rules, 90–103 semicolon, in selector declarations, 56, 92, 285 SEO, 283, 284 server-side technologies, 2 shadows, 172–173, 190 Shiira, 23 shorthand properties, 200, 286 sibling selectors, 76, 78 sidebars, 70, 146 site navigation, 243–255 and anchor tags, 244 buttons, 252–254 and CSS sprites, 244, 284 hiding in printed Web page, 281 links, 246–247 menus, 248–251 site-planning process, 182–191 mood boards, 188–189 page fl ow, 184–185 sketches, 182–183 visual comps, 190–191 wire frames, 186–187 site plans, 180. See also site-planning process sketches, 182–183 soft launches, 204 Sony PlayStation, 21 Speaking In Styles Web site, 2, 172, 228, 291 specifi city, 112–113, 120 sprites, CSS, 168, 192, 244–245, 284 stacking order, 164 stair-stepped elements, 322 states, link, 80–83, 244–245, 246 static position type, 160, 161 strike-through effect, 130 style attribute, 90 style guides, 194–195 style rules, 50–59 basic, 54–55 combining, 58–59 determining weight of, 114–115 how they work, 50 parts of, 52–53 specifi city in, 112–113 where to put, 90–103 style sheet languages, 36 style sheets. See also CSS combining, 202–203 creating, 98–99 external. See external style sheets genesis of, 8 importing, 102–103 linking to, 100–101 for mobile devices, 280 tailoring for specifi c media types, 118–119 <style> tag, 90, 94 styles applying to entire Web site, 96 based on where something is, 72–73 browser-default, 106, 110, 120, 216–217, 296 browser-inherent, 6 for children, 76–77 conditional, 320, 323 in context, 70–79 declaring, 56–57 default, 106, 110, 120, 194, 216–217 dynamic, 80, 84–85 embedded, 90–91, 94–95, 283 external, 90–91, 96–103 forcing application of, 116 framework, 279 inherited, 106 inline, 90, 91, 92–93, 120, 283 for link actions, 82–83 order of priority for, 120–121 organizing, 200–201 overriding, 108, 110, 116 parent-inherited, 106, 120 for parts of paragraph, 86–87 335 reusing, 270 for siblings, 78–79 for special cases, 80–87 text, 130–133 SUMO Paint, 32 syntax, 49. See also CSS syntax T T-shirt company, 88, 90 table-based layouts, 40 table tags, 6 tables, 166–167 tags adding multiple classes to, 66–67 binding styles to, 50 creating basic style for, 50 how CSS acts on, 50 inline styles for, 92–93 purpose of, 6, 50 styling, 60–61 weight of, 114 text aligning, 130, 132, 133 capitalizing, 130 editing, 98 replacement, 266 sizing, 236 styling, 130–133, 238–241 underlining, 8, 130, 133, 216, 246 using placeholder, 196 text-align property, 132, 133 text-decoration property, 132, 133 text editors, 98 text-indent property, 132, 133 text replacement, 266 text-shadow property, 172, 173 text-spacing properties, 130 text styles, 130–133, 238–241 text-transform property, 132, 133 TextEdit, 98 thegridsystem.org, 210 Threadless, 88, 90 tiling, image, 136–137, 190 Times font, 226 Times New Roman font, 226, 227 top-level navigation menus, 248, 280 top position property, 138, 162, 163, 220 TopStyle, 28 transparent images, 192, 258–261 transparent keyword, 124 Trebuchet MS font, 226, 227 Trident, 23 True Type fonts, 230 tutorials, Web design, 34 Twistori, 251 typefaces, 228, 234–235. See also fonts; typography TypeTester, 32, 33 Typographic Desk Reference, The, 224 typography, 225–241 as component of style guide, 194 core Web fonts, 226–227 downloadable fonts, 230–231 fl uid, 232–237 improvements in Web, 32 previewing, 32 styling text, 238–241 Web-safe fonts, 32, 228–229, 234, 306– 308 Typogridphy, 278 U UGSMAG, 50, 71 underlining, 8, 130, 133, 216, 246 underscore hack, 158, 260, 276, 321, 323 Uniform Resource Locators, 309. See also URLs Unix, 20, 21 unordered lists, 168 Urban Dictionary, 122, 124 <url> variable, 125 URLs, 125, 281, 309. See also links usability reviews, 250 user feedback and beta launches, 204 and dynamic pseudo-classes, 84, 170 336 and link pseudo-classes, 80 making changes based on, 180 and mood boards, 188 user interface, 192 UXBooth, 250 V Validation Service, W3C CSS, 274, 276, 277, 321 validator.w3.org, 275 values as component of style rules, 52 types of, 124–125 variables, 125 Verdana font, 226, 227 vertical-align property, 132, 133 vertical menus, 248, 251 video, 14 visibility, 144–145 visibility value, 144, 145 visited state, 80, 81, 82, 244, 298 visual comps adjusting margins/padding in, 186 comparing with actual Web site, 26 cutting chrome from, 192 and fl uid typography, 232 purpose of, 190 and site-planning process, 180 static vs. dynamic, 82 tips for creating, 190 voxLibris code for, 291–301 inspiration for, 292 as model for design process, 180 W W3C and CSS, 44 CSS Validation Service, 274, 276, 277, 321 CSS Work Group, 158 jargon, 255 meaning of acronym, 44 Web applications, 30–33 Web browsers, 18–23. See also specifi c browsers alternatives to leading, 22, 23 and CSS, 18, 20–21, 44, 317 and design enhancements, 172, 254 and downloadable fonts, 230 and font sizes, 236 graphics-based, 8 layout engines for, 23 legacy, 18 Macintosh, 18, 20–21 most commonly used, 18 and outlines, 174 and rounded corners, 174 and shadows, 172 viewing Web page on different, 19 Windows, 20–21 Web design, 179–207 adapting for print, 281 best practices, 284 and browser viewport, 150 building site, 192–203 choosing tools for, 17 deploying site, 204–205 vs. designing for other media, 150, 180 dynamic nature of, 180 as iterative process, 180, 206–207 making CSS central part of, 179 overview of process, 180–181 page-fl ow considerations, 184–185 planning phase, 182–191 source of news and updates on, 2 standards, 275 testing, 196 tools. See Web designer’s toolbox Web Designer Wall, 34, 36 Web designer’s toolbox, 17–34 code editors, 28–29 design ideas, 34 Firefox add-ons, 24–27 online tools, 30–33 tutorials, 34 337 Web browsers, 18–23 Web pages. See also Web sites adding structure to, 50 core components of, 1–3 creating printer-friendly version of, 118 embedding styles in, 94–95 fl uid vs. fi xed, 184–185, 218 meta information for, 210 planning structure of, 186 setting default styles for, 210, 216–217 “skin” of, 257. See also chrome structural elements, 210 tailoring for specifi c media, 118–119 viewing on different browsers, 19 viewing on mobile devices, 280 viewing printed, 281 Web-safe fonts, 32, 228–229, 234, 306–308 Web sites. See also Web pages analyzing CSS for, 29 applying styles to entire, 96 choosing color palette for, 30 choosing fonts for, 225, 234–235. See also fonts deploying, 180 designing. See Web design getting user feedback on. See feedback navigation for. See navigation planning, 180, 182–191 testing, 180, 196 vs. Web applications, 30 Web standards, 275 Web technologies, 2, 4 Web typography, 225–241 as component of style guide, 194 core Web fonts, 226–227 downloadable fonts, 230–231 fl uid, 232–237 improvements in, 32 previewing, 32 styling text, 238–241 Web-safe fonts, 32, 228–229, 234, 306– 308 Webdings font, 226, 227 WebKit, 23 -webkit-border-radius property, 174, 175 -webkit-box-shadow property, 172, 173 weight, rule, 112, 114–115 white-space property, 130, 131 width, fl uid vs. fi xed, 184–185, 186, 218 width property, 148–151 Wii, 23 Windows code editors, 28, 29 core Web fonts, 226 operating system fonts, 228 text editor, 98 Web browsers, 20–21 Web-safe fonts, 306 wire frames, 182, 186–187 Word, Microsoft, 98 word processors, 98 word-spacing property, 130, 131 WordPress, 39 World Wide Web Consortium, 44. See also W3C X XML, 12, 14 Y YAML, 278 YUI Grids, 278 Z z-index property, 164–165 Zen Garden, CSS, 40, 42–43 Simply visit www.peachpit.com/safarienabled and enter code JNZJSAA to try it today. Get free online access to this book for 45 days! And get access to thousands more by signing up for a free trial to Safari Books Online! With the purchase of this book you have instant online, searchable access to it for 45 days on Safari Books Online! And while you’re there, be sure to check out Safari Books Online’s on-demand digital library and their free trial offer (a separate sign-up process). Safari Books Online subscribers have access to thousands of technical, creative and business books, instructional videos, and articles from the world’s leading publishers. . 106–107 overriding, 108–109 inline-block display type, 142 inline boxes, 140 inline display type, 142 inline elements, 6 inline styles, 90, 91, 92–93, 120, 283 Internet. 114 text aligning, 130, 132, 133 capitalizing, 130 editing, 98 replacement, 266 sizing, 236 styling, 130–133, 238–241 underlining, 8, 130, 133, 216, 246 using placeholder,