.urhc { color: black; vertical-align: top; } A:active { color: black; font-weight: bold; } .menubar a:hover { color: white; } body { font-family: Garamond, Georgia, Times, “Times New Roman”, serif; } .inter { } .lhs { color: black; } h1, h2, h3, h4. h5, h6, dt, .heading { color: black; font-variant: small-caps; } .lhrc a:link, .lrhc a:visited { text-decoration: none; font-weight: bolder; color: black; } .urhc H1 { color: white; text-align: center; border: none; padding: 0% 5%; margin: 0px; line-height: 75px; } A:link { font-weight: bold; color: #000066; text-decoration: none; } .lrhc { color: black; } .ulhc img { border: 2px solid white; padding-left: 15px; padding-right: 15px; } .llhc { color: black; } h1, h2, h3, h4, h5, h6, .heading { border-bottom: 1px solid white; } body { background-color: #cca580; background-image: url(“/photos/feb2002/arizona/painted-desert_sm.jpg”); background-position: top right; background-repeat: no-repeat; } .vert { } A:visited { font-weight: bold; color: #006600; text-decoration: none; } If that was a bit hard to follow, don’t feel bad; that was intentional. On the Kynn.com site, I use tables to divide the page into six content cells that can each be styled indepen- dently. Vertical and horizontal bars separate these cells, and the bars, as well as their intersections, can also have styles applied to them. The layout is shown in Figure 18.1, which indicates the class attribute for each cell. The classes have names like urhc for “upper right hand corner” and lhs for “left hand side.” 332 Hour 18 LISTING 18.1 Continued 23 0672324091 ch18 6/13/02 10:31 AM Page 332 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. The current style sheet, as given in Listing 18.1, actually eliminates the bars between the content cells by not giving them a distinct background color, but you can’t tell that by skimming the style sheet. The style sheet in Listing 18.2 is really the same as before; both produce the same results when applied to the Web page, but the second one is easier to understand. Comments make clearer what each section of the style sheet does, and the order is much easier to understand. LISTING 18.2 A Better-organized Style Sheet /* k-orderly-18.2.css */ /* For kynn.com */ /* By Kynn, 6-22-1999 */ /* Last tweaked 02-20-2002 */ /* Default styles */ body { background-color: #cca580; background-image: url(“/photos/feb2002/arizona/painted-desert_sm.jpg”); background-position: top right; background-repeat: no-repeat; } /* Styled cells */ .ulhc { color: black; vertical-align: top; } .urhc { color: black; vertical-align: top; } Web Design with CSS 333 18 FIGURE 18.1 The layout of cssin24hours.com, done with tables. continues 23 0672324091 ch18 6/13/02 10:31 AM Page 333 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. .vert { } .horiz { } .inter { } .lhs { color: black; } .rhs { color: black; } .llhc { color: black; } .lrhc { color: black; } /* lower right hand corner */ .lhrc a:link, .lrhc a:visited { text-decoration: none; font-weight: bolder; color: black; } /* upper right hand corner */ .urhc h1 { color: white; text-align: center; border: none; padding: 0% 5%; margin: 0px; line-height: 75px; } /* upper left hand corner */ .ulhc img { border: 2px solid white; padding-left: 15px; padding-right: 15px; } /* fonts */ body { font-family: Garamond, Georgia, Times, “Times New Roman”, serif; } /* Distinct headings */ h1, h2, h3, h4. h5, h6, dt, .heading { color: black; font-variant: small-caps; } h1, h2, h3, h4, h5, h6, .heading { border-bottom: 1px solid white; } /* Link styles */ a:link { font-weight: bold; color: #000066; text-decoration: none; } a:visited { font-weight: bold; color: #006600; text-decoration: none; } a:active { color: black; font-weight: bold; } /* Menu bar */ .menubar { border: 2px solid white; } .menubar a:hover { color: white; } /* Primary content */ .content { position: relative; border: 2px solid white; padding: 1em 5% 1em; } 334 Hour 18 LISTING 18.2 Continued 23 0672324091 ch18 6/13/02 10:31 AM Page 334 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Site-wide Style Sheets The style sheet given in Listing 18.2 was created to be used on the entire site, not just on one page. The ability to link in an external style sheet makes this an easy choice to apply styles over your entire site by setting each page to use the style sheet with the <link> tag. An example of a Web page on the Kynn.com site, which uses this style sheet, is shown in Figure 18.2; the original page is at http://kynn.com/nav/causes.html. Web Design with CSS 335 18 FIGURE 18.2 The Kynn.com style sheet applied to a Web page. A style sheet that is referenced from all pages on a site makes it a very simple task to change the appearance of the entire Web site. For example, Figure 18.3 shows the same page as in Figure 18.2, but with a different style sheet. Changing the sin- gle external file altered the look of the whole Web site instantly. If you’re curious, you can view this other style sheet at http://www.cssin24hours.com/18/ k-alt.css. A site-wide style sheet can be used to enforce a consistent appearance on the Web site, even if you have multiple Web developers working on the same site. Additional styles can be added in embedded style sheets or in additional linked CSS files that are created for each department or business unit. For example, the City of Fullerton’s Web site ( http://www.ci.fullerton.ca.us/) uses style sheets to give a consistent appearance to the whole site but different colors to each city department’s subsite, as shown in Figure 18.4. 23 0672324091 ch18 6/13/02 10:31 AM Page 335 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 336 Hour 18 FIGURE 18.3 A different style sheet applied to the Kynn.com site. FIGURE 18.4 Style sheets set the appearance of the city Web site in Fullerton, California. 23 0672324091 ch18 6/13/02 10:31 AM Page 336 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Validating Your CSS Everyone makes mistakes, even you and me. Mistakes in writing CSS can be benign, producing a minor effect such as putting a block of text in the wrong font, or they can be much more serious and prevent people from using your page at all. As you learned in Hour 4, you can validate your HTML using the World Wide Web Consortium’s HTML validator at http://validator.w3.org. The W3C provides a free CSS validation service, as well, for checking your CSS syntax. This is located at http://jigsaw.w3.org/css-validator/. Web Design with CSS 337 18 Another CSS validator from the Web Design Group can be found at http://www.htmlhelp.com/tools/csscheck/. To use the W3C CSS validator, you can specify a Web page that contains CSS code, give the direct URL of a style sheet, or paste your style rules directly into a text box. The validator will analyze your CSS rules and notify you of errors. It will also give useful warnings. An example of CSS validation is shown in Figure 18.5, which shows the results of validating the style sheet in Listing 18.2. As you can see, it caught an error and gave a warning about some possible errors. FIGURE 18.5 The results of validat- ing Listing 18.2. 23 0672324091 ch18 6/13/02 10:31 AM Page 337 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Why Validate? Validation is a useful strategy for a number of reasons. The biggest benefit is that it allows you to spot errors in your style sheet syntax. For example, in Figure 18.5, the CSS validator noticed a problem with the style sheet. The following line can be found in both Listing 18.1 and Listing 18.2: h1, h2, h3, h4. h5, h6, dt, .heading The error is the punctuation after the h4; it should be a comma, but here I’ve put a period. That kind of error is hard to spot when you’re just skimming the page. In fact, it was there for months before I noticed it! Did you spot it earlier? The warnings issued by the CSS validator are quite useful for spotting accidental omis- sions, such as setting a foreground color without a contrasting background color. However, you have to interpret those results carefully. The CSS validator can’t fully account for inheritance and transparency in your Web page, and so you’ll need to deter- mine for yourself if a warning is an actual problem. A validator is like a spell-checker or grammar-checker in a word processor. They can spot potential problems and you wouldn’t think of submitting a document without check- ing it first, but blind reliance on an automated checker without using human judgment is just as bad. Summary When creating any Web pages, whether using CSS or not, it’s important to keep the needs of your users in mind. Providing them with an attractive Web site is not in conflict with giving them an easy-to-use site. In fact, the two approaches are both complementary and necessary for making a truly great site. Testing plays a major role in any CSS design, and you can’t rely on your own judgment when catching possible mistakes. Three important resources are other Web developers who can give advice about your design efforts, users in informal tests who point out unex- pected errors, and CSS validation services that check your syntax and warn of omissions. Web development using CSS is a balancing act, and the factors you’ll have to weigh include using CSS for layout, supporting older browsers, and accounting for browser quirks. As each site is unique, there’s no universal answer; you’ll need to use your own judgment to figure out what works for you. Organizing your style sheets in a sensible manner will make life easier for you and any- one else who has to read your style sheet. Use comments whenever you think of it, and group your styles together in natural groupings. You’ll thank yourself later; believe me. 338 Hour 18 23 0672324091 ch18 6/13/02 10:31 AM Page 338 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Browser Support Report Card There’s no report card in this hour because no new CSS features were introduced. The strategies for Web development you learned in this hour can be applied to all style sheets. Q&A QYour personal Web site doesn’t use CSS for layout. What gives? A It’s a pretty old design, and when I created it, there were even fewer browsers that understood positioning CSS. If I were doing it from scratch today, Kynn.com would be done using CSS for layout, using the @import trick described in Hours 16, “Page Layout in CSS,” and 17, “Advanced CSS Layout,” to avoid Netscape 4 problems. This is much easier to do on a new site than on an existing one, espe- cially if you’re spending your time writing a book! The CSSin24hours.com site does use CSS for layout because that’s a new site. Workshop The workshop contains quiz questions and activities to help reinforce what you’ve learned in this hour. If you get stuck, the answers to the quiz can be found after the ques- tions. Quiz 1. Colors and fonts should be used to (a.) Make the page harder to read, so people spend more time on your site. (b.) Hide content from the real users while tricking search engine spiders. (c.) Present the content in an attractive, usable manner. (d.) Make you seem really cool to all your friends. 2. What do you need for effective user testing? (a.) Nothing. Just follow your own instincts because you are a user too. (b.) Five people, five tasks, and five lattes. (c.) A usability lab with one-way mirrors, video cameras, and a million-dollar budget. 3. If you submit the following style sheet to the W3C’s CSS validator, which errors or warnings will it give? p, td. th, li { color: black; bakground-color: white; } Web Design with CSS 339 18 23 0672324091 ch18 6/13/02 10:31 AM Page 339 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Answers 1. The correct answer, of course, is (c.), unless you’re making a site to show your friends how cool you are. 2. The answer is (b.), but the lattes are optional. I prefer a nice cold cherry cola, myself. 3. The validator will point out two errors: the period instead of the comma after the td and the unknown property name bakground-color. Also, because there is no background-color value given to contrast with the color value, a warning will be generated. Activity Here’s a list of projects you can undertake to reinforce what you’ve learned this hour: •Write up five tasks that could be accomplished by a user of a specific Web site. Make sure you have a few you think are easy and a few you think are hard; you might find yourself surprised in an actual test. •In fact, if you’ve got the time and the inclination, do an informal user test as described earlier this hour. The results are always educational, even if they just tell you that you’re on the right track. • Subscribe to the HWG-Critique mailing list at the HTML Writers Guild, and post a site for review. Then, give your own critique in response to someone else’s request. Remember to be both polite and constructive, of course! • Look at some of the style sheets you’ve worked on, and see if you can reorganize them to be easier to understand. Comments, comments, comments! •Validate your style sheets, and if they don’t pass, fix them until they do. Consider each warning; is it a valid potential problem, or can you safely ignore it? 340 Hour 18 23 0672324091 ch18 6/13/02 10:31 AM Page 340 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Hour 19 Advanced Selectors 20 CSS for Printing 21 Accessibility and Internationalization 22 User Interface and Generated Content 23 CSS and JavaScript 24 CSS and XML PART IV Advanced Cascading Style Sheets 24 0672324091 PartIV 6/13/02 10:31 AM Page 341 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. [...]... :first { margin: 4in 2in 4in 3in; } @page :right { margin: 0. 5in 1in 0. 5in 2in; } @page :left { margin: 0. 5in 2in 0. 5in 1in; } 20 364 Hour 20 The margins are set up this way so that if the page is printed on a double-sided printer— or printed on a single-sided printer and photocopied onto alternate sides of sheets of paper—there will be an extra inch on the “inside” margin to punch holes Warning for All... Appropriate for Printing Unit Measurement cm Centimeters in Inches ( 1in = 2.54cm) mm Millimeters (1mm = 0.1cm) pc Picas (1pc = 12pt) pt Points (72pt = 1in) These units can be used with any CSS property that requires a measurement value For example, the following rule sets a padding value in centimeters: @media print { h1 { padding: 1cm 2cm 1cm 1cm; } } Defining the Page with @page The size of a printed page... and Printing Printing a Web page is often a risky proposition The combination of text, tables, style rules, frames, and low-resolution GIF images often results in a poor-looking printed document Most of the time, browsers don’t print nearly as well as they display onscreen You can overcome some of these problems with a print style sheet To link in a style sheet for printing, simply use the HTML ... attribute is screen > Measurements for Printing When you’re creating a style sheet for printing, you can use additional units of measurement that would be inappropriate or meaningless on a computer monitor These units correspond to real-world units of measurement used in printing and are listed in Table 20.2 20 362 Hour 20 TABLE 20.2... Designing CSS for Print When creating style rules or style sheets for the print medium, it’s important to remember how the medium differs from the computer screen The point of using a different style sheet for print is to make the resulting hardcopy easier to read and use Many printers out there will be black-and-white, although color printers are often used However, many users will avoid printing in. .. @media rule in the main style sheet with the appropriate media type Multiple tags let you provide one style sheet for rules common to all media types—one for screen display and one for printing, like the following: Such a link would load only the style sheet if the browser were currently printing to a standard or Braille printer Warning for Netscape 4 The Netscape 4 browser simply does not support... background-color: white; } } CSS for Printing 361 Warning for Internet Explorer (Mac) Internet Explorer on the Macintosh platform does not support @media rules To use media-specific style sheet rules with IE for Mac, put those rules in a separate file and apply them with or @import CSS Properties for the print Medium By far the most common medium you’ll be concerned with—besides screen—is print Nearly all... up to the CSS specification Fortunately, none of these is harmful, so you can use them without fear of something unexpectedly breaking Summary Alternate style sheets for different access devices are classified by the media types they apply to You can set the media type of a CSS rule in several ways: by linking to a style sheet containing the rule with the element in HTML; by importing a style... style sheet with that rule using @import; or by wrapping the CSS rule in a @media rule Visual browsers support the screen media type, and nearly all of them also support the print media type The print medium uses page boxes, which are defined by @page rules The size, margins, and other properties can be set on pages Page breaks can also be set using CSS rules Designing for the print medium requires a different . watermark. Validating Your CSS Everyone makes mistakes, even you and me. Mistakes in writing CSS can be benign, producing a minor effect such as putting a block. you think are easy and a few you think are hard; you might find yourself surprised in an actual test. In fact, if you’ve got the time and the inclination,