Guide to CSS.and.HTML Web.Design

WORKING WITH TYPE pre is the element for preformatted text, used to display monospace text in an iden- 3 tical fashion to how it’s formatted in the original HTML document. It’s commonly used for online FAQs, film scripts, and the like.Web-safe fontsPrint designers have a world of fonts at their disposal, but the same isn’t true online.Rather than being limited by installed fonts, you’re restricted by common fonts across var-ious platforms. If end users don’t have the same fonts installed as you, they won’t see yourdesign like you do, rendering your choices pointless.Over the next few pages, I’ll provide an overview of different available fonts for theWeb, but there are some handy online references that you should also bookmark. A pagecomparing fonts common to the Mac and Windows is available at www.ampsoft.net/webdesign-l/WindowsMacFonts.html, and www.codestyle.org/css/font-family/sampler-Monospace.shtml details available monospace fonts for various systems.Sans-serif fonts for the WebArial is a common font choice, largely because of its dominance on Windows. Its poordesign makes it unreadable at small sizes and a poor choice for body copy, although it canbe of use for headings. Mac users should be wary of choosing Helvetica—it’s an excellentfont, but it’s not generally shipped with Windows. Although you can specify fallback fontsin CSS, again, there’s little point in making your first choice something that the majority ofpeople won’t see. Despite its lack of penetration on Windows, Helvetica is often used as a fallback sans- serif font, due to its prevalence on Linux.Better choices for body copy are Verdana or Trebuchet MS. The former is typically a goodchoice, because its spacious nature makes it readable at any size. Its bubbly design rendersit less useful for headings, though. Trebuchet MS is perhaps less readable, but it has plentyof character, and is sometimes an interesting alternative, simply because it isn’t used allthat much online.In recent times, Lucida variants have become popular, due to Apple using it not only as thedefault font in Mac OS X, but also on its website. Despite Lucida Grande not being avail-able for Windows, Lucida Sans Unicode is common and similar enough to be used as a firstfallback. Usefully, Lucida is common on UNIX systems, meaning that sites using Lucida vari-ants can look fairly similar text-wise across all three major operating systems. Anotherpairing—albeit one that’s less common—is Tahoma and Geneva, so use those with care,providing more generic fallbacks. 73

THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGN See the following images for a comparison of several sans-serif fonts on Mac (left) and Windows (right). Serif fonts for the Web Although popular in print, serif fonts fare less well online. If using serifs, ensure you ren- der them large enough so that they don’t break down into an illegible mess. Georgia is perhaps the best available web-safe serif, especially when used at sizes equivalent to 12 pixels and above, and it can be more suitable than a sans-serif if you’re working with traditional subject matter, or if you’re attempting to emulate print articles (such as in the following screenshot of the online column Revert to Saved; www.reverttosaved.com).74

WORKING WITH TYPEThe other commonly available serif font, Times New Roman (Times being a rough equiva- 3lent on Linux systems), is inferior to Georgia, but worth using as a fallback. Like Arial, itspopularity is the result of its prevalence as a system font.Elsewhere, Palatino is fairly common—installed by default on Windows (as PalatinoLinotype), and available on Mac systems that have Classic or iWork installed. Mac ownerswith Office will also have the virtually identical Book Antiqua. That said, if using thesefonts, you’ll still need to fall back to safer serifs, as mentioned earlier.See the following illustration for a comparison of serif fonts on Mac (left) and Windows(right).Fonts for headings and monospace typeThe remaining “safe” fonts are typically display fonts (for headings) or monospace fontsfor when each character needs to be the same width—for example, when adding codeexamples to a web page.Arial Black and Impact are reasonable choices for headings, although they must be han-dled with care. The bold version of Impact looks terrible (and isn’t displayed at all in somebrowsers), and some browsers by default render headings in bold, so this must be over-ridden in CSS. Often, large versions of fonts mentioned in the previous two sections aresuperior.Courier New is more useful and a good choice when you need a monospace font. Notethat falling back to Courier for Linux is recommended. The pairing of Lucida Console(Windows) and Lucida Sans Typewriter or Monaco (Mac) may also be suitable for mono-space work, if you’re looking for a less “computery” feel.Few other fonts are worth a mention, barring perhaps Comic Sans MS, which is inexplica-bly popular with novice web designers. To give the font its due, it is readable, but its quirkyand unprofessional nature makes it unsuitable for most purposes (even comic artistseschew it in favor of personalized fonts). 75

THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGN The following image shows several of the fonts mentioned in this section, again with Mac versions on the left and Windows versions on the right. While Windows Vista arrived with six great new “C” fonts (the serifs Cambria and Constantia; the sans-serifs Calibri, Candara, and Corbel; and the monospace Consolas), they’re not—at the time of writing—being made freely available, so if you choose to use them, ensure that you fall back to relevant alternatives. The new Microsoft fonts are not used or mentioned again in this book. Mac vs. Windows: Anti-aliasing When choosing fonts, it’s worth noting that how they look differs on Mac and Windows. By default, Macs anti-alias onscreen text, which affects spacing—in fact, various anti-aliasing algorithms can make text look slightly different in each browser. On Windows, aliased text has historically made for jagged edges, but Internet Explorer 7 smoothes type via the font- smoothing technology ClearType, introduced in Windows XP (disabled by default in XP, but enabled in Vista system-wide). For body copy, font-smoothing (or not) isn’t a major problem—although some prefer aliased text and some prefer anti-aliased, both are fine, as long as the font size is large enough. However, when it comes to rendering large text—such as for headings—aliased text is significantly less visually pleasing.76

WORKING WITH TYPE Aliased text is a simplified version of the original font, reduced to a black-and-white 3 bitmap. Anti-aliased text attempts to emulate the soft curves of the original font by introducing gray or colored pixels at the edges. Although arguments rage regarding which is the best method of displaying fonts onscreen, this is a moot point for web designers, because you don’t control the end user’s setup and therefore must be aware of each possibility.Using images for text Limitations imposed by web-safe fonts lead some designers to seek out alternative meth- ods of creating online type. It’s common to use graphics (mostly GIFs, but sometimes Flash, due to its vector-based, scalable nature) for text. If you have to follow a corporate design style under pain of death, the ability to use graphics can be a lifesaver—after all, most browsers happily render images, and they can be marked up within heading ele- ments, so you can control things like margins via CSS and also retain the structural integrity of your document. However, graphical text has its share of problems: Some browsers do not enable you to resize graphical text in a browser. Because the Web is low-resolution, when a page is printed out, graphical text looks pixilated and of poor quality. Although GIF-based text tends to be small in terms of file size, it’s still larger than HTML-based text. People using alternate browsers, such as screen readers, cannot “see” graphical text (although you can use the alt attribute to compensate). Graphical text cannot be copied and pasted. Graphical text cannot be read by search engines. Graphical text is a pain to update. To change a word, you must rework the original image, export and upload it, and, if the image size has changed, you must edit the appropriate HTML documents and upload those, too. In my opinion, graphics should be used as a last resort. A company’s style can be made apparent by the use of a corporate logo and other imagery rather than by the use of a font. Also, never, ever render body copy as an image. There are many sites out there with body copy rendered as images, and quite frankly, every one of them makes me want to scream. Such sites are often full of typos (perhaps because amending them requires the entire graphic to be reworked, re-exported, and uploaded again), cannot be printed at quality, and cannot be copied to a text editor. Some suggest this means the site’s text is “secure.” But this goes against one of the fundamental benefits of the Web: that people can share information, and that it can be easily copied and sent on to others. Sure, this presents copyright implications, but everything online is subject to copyright anyway. Also, plenty of sites commit the cardinal sin of rendering things like contact details as a 77

THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGN graphic—I’m sure their customers very much appreciate having to type such things out by hand rather than just being able to copy them into their digital address books. Image-replacement techniques If you need a greater degree of typographical control over a portion of text, such as the site’s main heading, there is an option that enables you to include an image and also enable the text to remain in place, which is useful for users surfing the Web with screen readers. This is generally known as image replacement. Note that the technique should be used with care and sparingly—even from a basic practical standpoint, it doesn’t make a great deal of sense to set all of your headings as images, simply because it takes time to create and export each one. Of the techniques available for replacing images, the most common is to assign the rele- vant piece of text (usually a heading) a class value in HTML, and also add a dummy span element before its content: <h1 class=\"aFancyHeading\"><span></span>A fancy heading</h1> In an image editor, an image-based version of the heading is created and saved, and its dimensions measured. Example files for this are a-fancy-heading.gif, image-replacement. css, and image-replacement.html, located in the chapter 3 folder. In the CSS file, you’ll see rules created to define the dimensions of the heading (.aFancyHeading) and span (.aFancyHeading span). The heading’s position value is set to relative, and the span ele- ment is then positioned in an absolute fashion, which ensures that it sits over the text- based heading’s content. The width and height values ensure that the span (and therefore its background image) expands to fill its container. (Note that when used in conjunction with links, it’s useful to also set display: block within the CSS rule so that the entire area becomes clickable and the cursor becomes a pointer—this is because some versions of Internet Explorer use the arrow pointer instead of the usual finger pointer. Alternatively, set cursor to pointer in CSS.) The overflow: hidden property/value pair ensures text doesn’t peek out from behind the image—an issue that sometimes occurs in Internet Explorer or when text is resized. To deal with zoomed text in IE 7, it may also be necessary to set a pixel font-size value for the heading that’s smaller than the height of the image. Setting overflow to hidden can be an issue when this technique is used in conjunction with linked replaced elements, such as linked mastheads and logos. When tabbing through links, replaced elements that have an overflow setting of hidden will become displaced on receiving the focus, revealing the underlying text as well as the image overlaying it. Caution needs to be used here. The following image shows a page using this technique with and without CSS.78

WORKING WITH TYPE 3 Some methods focus on hiding the text by setting display to none in CSS, but that can cause problems for screen readers, so avoid doing this. Others use text-indent to shift the text off of the page, although using absolute positioning with negative top and left coordinates is better—this prevents vertical space being taken up by the offset text, which is quite often noticeable, especially if margins haven’t been controlled. Scalable Inman Flash Replacement (sIFR) is an alternative to replacing text with GIF images. Instead, is uses a combination of CSS, Flash, and JavaScript to switch out a block of text. Note that although this provides a great deal of typographic flexibility, it should still be used sparingly—pages where too much text is switched out using sIFR tend to be extremely sluggish. See sIFR Beauty (www.alvit.de/sifrbeauty/ sifr-resources.php) for resources and Mike Davidson’s site (www.mikeindustries. com/sifr/) for further information.Defining font size and line height In theory, defining font sizes should be easy enough. You use the font-size property, and then you can set the value to an absolute size, a relative size, a length, or a percentage. For instance, you might set the following: h1 { font-size: 20px; } p{ font-size: 12px; } 79

THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGN Alternatively, you might go for something like this: h1 { font-size: 150%; } p{ font-size: 90%; } Each method of sizing fonts has its advantages and disadvantages, which we’ll briefly explore in this section of the book. Setting text in pixels Many designers specify font sizes in pixels, largely because pixels are the only measure- ment that allows you to be relatively certain that your text will look pretty much identical across various browsers and platforms (in the same way that sizing page sections in pixels enables you to keep output consistent). Unfortunately, unlike every other major browser on the market, Internet Explorer for Windows cannot resize pixel-based text, which cre- ates an accessibility problem (although a user can choose to ignore font sizes via the little- known accessibility controls). Internet Explorer’s Text Size menu only allows resizing of text sized using legacy methods, keywords, or relative units other than pixels. (Note that Internet Explorer 7 can zoom the entire page, but not the text alone.) Therefore, if you decide to size text in pixels, ensure that your text is very readable. Test it on various people and listen to feedback. If complaints come your way regarding the fact that someone “had trouble reading the words,” or rooted around for a microscope before giving up and playing solitaire, you need to increase your pixel size settings. The resulting page might not look quite as “designery,” but at least people will be able to read it. Setting text using keywords and percentages A combination of keywords and percentages became fairly popular for a while on the Web. Available keyword values are xx-small, x-small, small, medium, large, x-large, and xx-large. A keyword is used to set the base value, using a body selector in CSS, and per- centages are then used to set sizes for specific elements, such as headings, paragraphs, and lists. Here’s an example: body { font-size: small; } p{ font-size: 93%; } Keyword values don’t compound, and most modern browsers set a lower limit, even on xx-small, so text tends never to enter the realm of the illegible.80

WORKING WITH TYPEAlthough Internet Explorer for Windows can resize text set with keywords (as can all other 3browsers), this method has several disadvantages. The most problematic from a designperspective is that percentage values aren’t particularly consistent across browsers and 81platforms. Scaling tends to “jump” at fairly arbitrary percentage sizes, so while 93% maylook the same in all browsers (using default font-size settings, at least), 94% may look like100% in one and 93% in another. Also, it’s often tricky to equate percentages with the pixel(or point) sizes typically used in mock-ups.Also, browsers have historically dealt with keywords badly. Early versions of Netscape 4ignored keywords entirely, and later releases followed the original specification to theletter, which was updated accordingly when it was discovered that anything smaller thanmedium looked like an ink-footed ant had taken a stroll across your monitor. Not to be out-done, Internet Explorer 4 and 5 welded CSS keywords to Netscape font size tags, result-ing in the browser displaying everything at the next size down. (You can use conditionalcomments to set a different font-size value for Internet Explorer 5—see Chapter 9 formore on this method.)In more modern versions of Internet Explorer, fonts that are set to Small in the View ® TextSize menu can make keyword-set CSS text hard to read, but users can increase the textsize by using a more sensible setting. Also, it’s worth noting that this is up to user choice,and having a tiny minority of users screwing up their own settings and potentially endingup with unreadable text is better than the vast majority not being able to resize the textbecause its size is defined in pixels. Still, there’s a better method for achieving this, as weshall see.Setting text using percentages and emsAs mentioned, the problem with sizing text in pixels is that the text is not resizable inInternet Explorer. The main problem with using keywords and percentages is that the textsize isn’t consistent across platforms or that easy to define—at least in terms of hitting aspecific target size. This third method—and the one I typically use for websites I design—enables you to create font sizes that are targeted at a pixel size, but are also resizable inInternet Explorer, since the measurements are relative units.The system works by first setting a base font size of 62.5% using a body selector: body { font-size: 62.5%; }Since most browsers have a default font size of 16 pixels, the previous rule then sets thedefault size to 62.5% of that value—in other words, 10 pixels. From here, ems can be usedto define font sizes of specific elements, using values that are one-tenth of the target pixelsize: h1 { font-size: 2.0em; /* will be the equivalent of 20px */ } p{ font-size: 1.2em; /* will be the equivalent of 12px */ }

THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGN The system isn’t perfect—relative values defined in ems can be inherited, so if a list item is within another list item, the size of the nested item(s) may increase or decrease, depend- ing on the value assigned to the parent. However, override rules can easily get around this problem (see “Dealing with font-size inheritance” in the “Working with lists” section later in the chapter), and the method generally leads to more satisfactory results from a design, control, and user point of view than either of the other two methods mentioned. It is worth noting, however, that this method is somewhat reliant on the user—if someone has changed the default font size in their browser, your design may not look as intended on their browser, since the value defined for body may be 62.5% of something other than 16 pixels. Still, few people muck around with their browser settings, and the general con- sensus in the industry is that the 62.5% method is the one to go for. If using this method, ensure that the font-size setting of all text-oriented elements you use on the site is adjusted, otherwise you’ll end up with some illegible text set at 62.5% of the default font size. Also ensure you test your work at a range of text sizes in various browsers, to ensure things still look OK if the text is zoomed in or out. There is one other thing to bear in mind, though: Internet Explorer (again). Although the majority of browser-specific issues are left until Chapter 9 of this book, we’ll make an exception now. Internet Explorer has problems with text-zooming when the font size is set below 100%, so an additional rule is required: html { font-size: 100%; } This doesn’t adversely affect other browsers, so you’ll find this rule in the boilerplate doc- uments from the download files, even thought it should technically be in the conditional comments documents. Setting line height Graphic designers will be familiar with leading, and the CSS line-height property enables you to set this. Generally speaking, it’s a good idea to be fairly generous with leading for web pages, because text is harder to read onscreen than in print; by placing larger gaps between each line, the eye can more easily scan through large blocks of text. When setting line-height, you have various options, and can use a number, length, or percentage: h1 { font-size: 14px; line-height: 20px; } h2 { font-size: 1.3em; line-height: 1.6em; }82

WORKING WITH TYPE p{ 3 font-size: 1.1em; line-height: 1.5; }The difference between the font-size and line-height measurements is the leadingvalue. Half the value is applied above the text and half below. Should you use a numberalone, rather than a length or percentage, that value is multiplied by the font-size settingto define the line height. For example, if font-size is set to 10px and line-height is setto 1.5, the line-height value becomes 15px.Many web designers who have no graphic design experience ignore the line-heightproperty, but, as mentioned earlier, it’s essential for improving the legibility of a web page.In the following screenshots, the left images shows the default spacing and the right oneshows increased line height, resulting in increased legibility.Defining font-style, font-weight, and font-variant These three properties are straightforward. The first, font-style, enables you to set italic or oblique text. The former is often a defined face within the font itself, whereas the latter is usually computed. Typically, web browsers treat both the same, and only the italic value is in general use (except for the occasional use of normal—the default value—in order to override something set elsewhere). An element’s font-style is set like this: h2 { font-style: italic; } The font-weight property is intended to make a font heavier or lighter, and despite the various available values, only bold and normal are in general use. This is detailed in full in the font-weight entry of Appendix D (CSS Reference). 83

THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGN .introParagraph { font-weight: bold; } The font-variant property has two available values: normal (the default) and small-caps. Small caps are often used to de-emphasize uppercase letters in abbreviations and acronyms, and are similar in size to a typeface’s lowercase characters. This property only affects lowercase letters, and display of small caps varies across browsers and platforms— for example, older versions of Internet Explorer simply render such text entirely in normal caps (i.e., in standard uppercase letters). CSS shorthand for font properties The CSS properties discussed so far can be written in shorthand, enabling you to cut down on space and manage your CSS font settings with greater ease. Like some other shorthand properties, some rules apply: Some browsers are more forgiving than others regarding required and optional values, but you should always specify the font-size and font-family values, in that order. Omitted values revert to default settings. The font-style, font-weight, and font-variant values, if included, should be placed at the start of the rule (in any order), prior to the font-size value. The font-size and line-height values can be combined using the syntax font-size/line-height (e.g., 12px/16px for 12px font-size and 16px line-height). A complete font declaration in shorthand could therefore look like this: p{ font: italic small-caps bold 100%/1.3em Arial, Helvetica, ¯ sans-serif; } The equivalent in longhand is the following: p{ font-style: italic; font-variant: small-caps; font-weight: bold; font-size: 100%; line-height: 1.3em; font-family: Arial, Helvetica, sans-serif; } As you can see, this is rather weightier!84

WORKING WITH TYPEAn invalid font declaration is shown in the following code block. Here, the font-weightvalue (bold) is incorrectly placed after the font-family value, and the font-size value ismissing. p.invalid { font: Arial, Helvetica, sans-serif bold; }Controlling text element margins 3 By default, browsers place margins around block-level text-based elements (such as head- ings and paragraphs), which can be overridden by CSS. However, many designers get con- fused when dealing with margins, so a good rule of thumb is to first remove all element margins via the universal selector (see the “Zeroing margins and padding on all elements” section in Chapter 2 for more information). *{ margin: 0; padding: 0; } Once you’ve done this, you should primarily control spacing between text elements via the bottom margins: h1, h2 { margin-bottom: 10px; } p{ margin-bottom: 1em; } In the previous example, the margins below headings are small, enabling the eye to rapidly travel from the heading to the related body copy. The margin at the bottom of each para- graph is one character high. Should you decide, after applying styles, that more room is required between paragraphs and subsequent headings, apply a top margin to the relevant level (or levels) of heading, but be aware that vertical margins collapse. Later in the chapter, a few exercises will show how margins (along with various other set- tings) can affect the way a page looks and feels. Certainly, margin definitions shouldn’t be throwaway—like in music, where the gaps are almost as important as the notes, the white- space in typography is almost as important as the content.Using text-indent for print-like paragraphs Because of people’s familiarity with non-indented paragraphs on the Web, the W3C rec- ommends staying away from indented ones. However, there are times when designers yearn for a more print-based design, as in the following image. 85

THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGN For this effect, two things not previously discussed in this book are required: the text- indent CSS property and an adjacent sibling selector. This type of selector uses the syntax A+B, where B is the subject of the selector. For paragraph indentation, the CSS rule would look something like the following code block: p+p { text-indent: 1.5em; } In plain English, this is saying, “If a paragraph follows another paragraph, indent the text by 1.5 ems”. Therefore, paragraphs preceded by a different element, such as a heading, won’t be indented, as is traditional in print. Note that prior to version 7, Internet Explorer didn’t support adjacent sibling selec- tors, and so this effect won’t work in version 6 or below of Microsoft’s browser. A workaround would be to use a style sheet linked via a conditional comment to indent all paragraphs for Internet Explorer 6 and below. See the “Dealing with Internet Explorer bugs” section in Chapter 9 for more on conditional comments. Setting letter-spacing and word-spacing The letter-spacing and word-spacing properties work in the same way, taking length values or a default of normal. For letter-spacing, the value increases whitespace between characters, and for word-spacing, the defined value increases whitespace between words. Negative values are permitted, which cause characters or words to bunch together (or kern, if you’re a graphic designer). A certain amount of experimentation is recommended if you decide to use these properties. Because the Web’s resolution is low, subtle kerning changes are hard to achieve online, and the results often end up looking clunky. Also, spacing varies from platform to platform. One occasion when letter-spacing is worth experimenting with, however, is when styling headings for web pages: a small increase in the letter-spacing value can help further distinguish headings from body copy. Examples of these properties in use are shown in the following code block:86

WORKING WITH TYPE h1 { 3 letter-spacing: 3px; } h2 { word-spacing: 2px; }Controlling case with text-transform The text-transform property enables you to change the case of letters within an element. Available values are capitalize, uppercase, lowercase, and none (the default). The uppercase and lowercase values force the text of the applied element into the relevant case regardless of the original content (e.g., enabling you to override the case of the orig- inal content for ensuring that headings are consistent site-wide), whereas capitalize sets the first letter of each word in uppercase. In the following example, the first heading is styled as uppercase, the second as lowercase, and the third as capitalize. Note that I wouldn’t recommend such a mix of styles in a website—these rules are just examples of the properties in use. Here’s the HTML: <h1>A heading</h1> <h2>Another heading</h2> <h3>A third heading</h3> Here’s the CSS: h1 { text-transform: uppercase; } h2 { text-transform: lowercase; } h3 { text-transform: capitalize; }Creating alternatives with classes and spans It’s common in web design to define alternatives to the rules set for tag selectors (h1, h2, p, etc.). This tends to happen most often in one of two situations. The first is when creat- ing alternate styles for a portion of a web page (as in print, it’s often beneficial to use different text for sidebars and boxouts—standalone boxes on a magazine page, either housing supplementary information to the main article, or an entirely independent piece that needs to be visually distinct from other content on the page—and sidebars to ensure that each area of content is easy to distinguish from another). In this situation, it’s sensible to define a default rule for each element using an element selector, and then create an 87

THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGN override for the portion of the page that requires different text by using a contextual selector. For example, imagine a typical web page that has a sidebar that’s marked up as a div with an id value of sidebar. You might use a different paragraph font in the sidebar, to differ- entiate the text, like so: p{ font: 1.2em/1.5 Verdana, Arial, sans-serif; margin-bottom: 1em; } #sidebar p { font: 1.2em/1.5 Arial, sans-serif; } The other occasion where alternatives are required is when creating one-off styles to over- ride an existing style. In such cases, you can define a class in the CSS and then use a class attribute to apply it to an element. Should you only want a portion of some text to take on the style, you can surround the selection with a span element and apply the class to that instead. For example, if you wanted to create some “warning” text, you could use the following CSS: .warningText { color: #ff0000; font-size: 120%; } This can then be applied as follows: <p class=\"warningText\">This paragraph takes on the styles defined in ¯ the warningText class</p> <p>Only <span class=\"warningText\">this portion</span> of this ¯ paragraph takes on the warningText class styles.</p> Avoid overusing span elements, though. Text works best when it’s consistent across the page. Note that the preceding CSS style has a capital letter halfway through it—this case is known as lowerCamelCase, and is a method of writing multiple-word style names, because underscores and spaces must be avoided in CSS. Take care if you do this, because styles are case sensitive. If you set a class attribute value to warningtext instead of warningText, many browsers fail to display the style, reverting to the default style for the relevant element.88

WORKING WITH TYPEStyling semantic markup 3 The exercises in this section will combine the elements discussed so far in this chapter, showing how to use the knowledge gained to style some semantic markup. Three different examples are on offer, showing how rapidly you can create great-looking text when work- ing with CSS, and also how you can easily restyle a page of text without touching the markup. The markup that you’ll use is as per that in the next code block; and the default web page, without any CSS applied, is shown to its right. <div id=\"wrapper\"> <h1>Article heading</h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed ¯ aliquet elementum erat. Integer ¯ diam mi, venenatis non, cursus ¯ a, hendrerit at, mi. Morbi risus ¯ mi, tincidunt ornare, tempus ¯ ut, eleifend nec, risus.</p> <p>Quisque faucibus lorem eget sapien. ¯ In urna sem, vehicula ut, ¯ mattis et, venenatis at, velit. ¯ Ut sodales lacus sed eros. ¯ Pellentesque tristique senectus et ¯ netus et malesuada fames ¯ ac turpis egestas.</p> <h2>Curabitur sit amet risus</h2> <p>Lorem ipsum dolor sit amet, ¯ consectetuer adipiscing elit. Sed ¯ aliquet elementum erat. Integer ¯ diam mi, venenatis non, cursus ¯ a, hendrerit at, mi. Morbi risus mi, tincidunt ornare, tempus ¯ ut, eleifend nec, risus.</p> <p>Quisque faucibus lorem eget sapien. In urna sem, vehicula ut, ¯ mattis et, venenatis at, velit. Ut sodales lacus sed eros. ¯ Pellentesque tristique senectus et netus et malesuada fames ¯ ac turpis egestas.</p> <h3>Praesent rutrum</h3> <p>Nam scelerisque dignissim quam. Ut bibendum enim in orci. Vivamus ¯ ligula nunc, dictum a, tincidunt in, dignissim ac, odio.</p> <h3>Habitant morbid</h3> <p>Nam scelerisque dignissim quam. Ut bibendum enim in orci. Vivamus ¯ ligula nunc, dictum a, tincidunt in, dignissim ac, odio.</p> </div> The code block is simple. The text has three levels of headings, with paragraphs between them. Everything’s enclosed in a div element, which will be styled to restrict the width of its content. This makes it simpler to see how the leading—defined via line-height—is working out. If you were surfing at full-screen on a large monitor, the paragraphs might only be shown on a single line. 89

THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGNThe default CSS document for these exercises has some rules common to all three exam-ples. These are shown in the following code block: *{ margin: 0; padding: 0; } html { font-size: 100%; } body { padding: 20px; font-size: 62.5%; } #wrapper { margin: 0 auto; width: 400px; }The first rule, *, removes margins and padding from all elements, as discussed previously.The html and body rules set the default size of the text on the web page to 62.5%, asexplained in the “Setting text using percentages and ems” section earlier in this chapter.Finally, the #wrapper rule defines a width for the wrapper div, and therefore for its content.Styling semantic markup: A basic example with proportional line heightsRequired files styling-semantic-text-starting-point.html and styling- semantic-text-starting-point.css from the chapter 3 folder.What you’ll learn How to style headings and paragraphs using sans-serif fonts (Verdana for body copy and Arial for headings) and proportional, unitless line-height settings.Completed files styling-semantic-text-1.html and styling-semantic-text-1. css from the chapter 3 folder. 1. Define the font defaults. Using a body selector, define a default font for the web page, along with a default line-height value. As this is a basic example, Verdana is used as the primary font, falling back to Arial and Helvetica. The unitless line-height value means that elements will have proportional line heights based on their font-size values, unless otherwise stated. body { font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 1.5; }90

WORKING WITH TYPEIn the CSS, you’ll end up with two body selectors if you follow this to the letter—one 3for dealing with padding and setting the default font size to 62.5%, and the other fordefining the default font-family value for the page, along with the line-height. This 91enables these exercises to remain modular; in a real site, although it’s acceptable touse selectors more than once, you should ensure property values and rules arecorrectly housed in the relevant section of your boilerplates—see Chapter 10 andAppendix D (CSS Reference) for more information on CSS management. 2. Define common settings for headings. In this example, the top two levels of head- ings will have the same font-family value. Therefore, it makes sense to use a grouped selector to define this property: h1, h2 { font-family: Arial, Helvetica, sans-serif; } 3. Define specific values for headings. How you style headings will depend on their purpose. For these exercises, h1 is the page heading, h2 is a subheading, and h3 is a crosshead to introduce a section of copy. With that in mind, the crosshead needs to be of similar size to the paragraphs, the main heading needs to be most prominent, and the subheading needs to be somewhere in between. Therefore, in the CSS, the h1 element has a font-size value of 2.5em, the h3 has a much smaller 1.2em, and the h2 has an in-between 2em. h1 { font-size: 2.5em; } h2 { font-size: 2em; } h3 { font-size: 1.2em; } 4. Style the paragraphs, using the following rule. Whereas the space around headings is taken care of with the line-height setting defined in the body selector, that doesn’t work for paragraphs, which must have distinct space between them. Therefore, along with a font-size property/value pair, a margin-bottom value sets the space between each paragraph to slightly more than the height of one character. p{ font-size: 1.1em; margin-bottom: 1.1em; } 5. Refine the element spacing. At this point, the spacing is still a little suspect—the crossheads don’t stand out enough. Therefore, add a margin-top value to the h3 rule; this provides a little extra space between paragraphs and level-three headings. (As mentioned earlier, vertical margins collapse, so the space between a paragraph with a bottom margin of 1.1em and a level-three heading with a top margin of 1.65em is 1.65em, not the sum of the two margins, which would be 2.75em.)

THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGN h3 { font-size: 1.2em; margin-top: 1.65em; } h3, p { margin-left: 1em; } The following image shows what your completed page should look like. Styling semantic markup: A modern example with sans-serif fonts Required files styling-semantic-text-starting-point.html and styling- semantic-text-starting-point.css from the chapter 3 folder. What you’ll learn How to create a contemporary-looking page of text using Lucida fonts, as per the text on Apple’s website. Completed files styling-semantic-text-2.html and styling-semantic-text-2. css from the chapter 3 folder.92

WORKING WITH TYPE1. Set the font defaults. As in the previous exercise, use a body rule to define the 3 default font for the page, the first couple of choices of which are Lucida variants that are installed on Mac OS and Windows. Other fonts are provided for legacy or alternate systems. body { font-family: \"Lucida Grande\", \"Lucida Sans Unicode\", Lucida, Arial, ¯ Helvetica, sans-serif; line-height: 1.5; }2. Style the main heading. An h1 rule is used to style the main heading. The restrictive value for line-height makes the leading value the height of one character of the heading, meaning there’s no space underneath it. This means you can define an explicit padding-bottom value can be defined, followed by a border-bottom (here, 1 pixel, solid, and very light gray), followed by a margin-bottom value. The padding-bottom and margin-bottom values are the same, creating a very tight, clean feel for the heading. Elsewhere, the color setting knocks it back slightly so that it doesn’t overpower the other content, and the font-weight value removes the default bold setting that browsers apply to headings. This helps the block of text appear light and clean. h1 { font-size: 1.8em; line-height: 1em; padding-bottom: 7px; border-bottom: 1px solid #cccccc; margin-bottom: 7px; color: #666666; font-weight: normal; }When removing the default bold style from headings, check them acrossplatforms—on some Windows systems, non-bold headings can look a bitspindly, depending on the settings.3. Style the other headings. For the next two heading levels, font-size values are assigned. In keeping with the modern style, the crossheads are the same size as the paragraph text (styled in the next step)—just displayed in bold; the subheading (h2) is slightly larger, making it a little more prominent. Again, the headings are colored to make them blend in a little more, and not distract from the paragraph text. h2, h3 { color: #333333; } h2 { font-size: 1.3em; } h3 { 93

THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGN font-size: 1.2em; margin-top: 1.65em; } 4. Style the paragraphs. The font-size setting is larger than that used on many web- sites (which typically tend toward 11 pixels, which would require a 1.1em value in this example), but this ensures clarity, and again, enhances the clean nature of the design. p{ font-size: 1.2em; margin-bottom: 1.2em; } The final rule—an adjacent sibling selector—styles the paragraph following the main heading, making the intro paragraph bold. It’s colored a dark gray, rather than black, which would be overpowering and wreck the balance of the page. h1+p { font-weight: bold; color: #222222; } The following image shows what your completed page should look like.94

WORKING WITH TYPEStyling semantic markup: A traditional example with serif fonts and a baseline gridRequired files styling-semantic-text-starting-point.html, styling- semantic-text-starting-point.css, and styling-semantic- text-baseline.gif from the chapter 3 folder.What you’ll learn How to create a page of traditional-looking text as per a printed book. The text adheres strictly to a baseline grid, maintaining the page’s vertical rhythm. This requires some extra calculations when 3 it comes to defining line-height values.Completed files styling-semantic-text-3.html and styling-semantic-text-3. css from the chapter 3 folder.1. Define a default font for the page. Using a body rule, a default font is chosen for the web page. This design primarily uses the Georgia font—a serif—to enhance the traditional feel. body { font-family: Georgia, \"Times New Roman\", Times, serif; } At this point, it’s also important to decide on a target line-height value for the page. For this example, it’s going to be 18px.2. Style the main heading. Here’s where things get a little tricky. For these examples, we’re working with relative units. As mentioned earlier in the chapter, the 62.5% method means that you can define font sizes by setting the font-size value to a setting in ems that’s one-tenth of the target size in pixels. So, in the following code block, the h1 rule’s font-size value of 1.8em means it’s effectively displayed at 18 pixels (assuming the user hasn’t messed around with their browser’s default set- tings, again as mentioned earlier). For the line-height value to hit the target of 18 pixels, it must therefore be 18 pixels or a multiple of it. However, when using ems, this value is relative to the font-size value. One em is equal to the height of one character, and since the font-size has been set to 1.8em (which is equivalent to 18 pixels), we set line-height to 1em. This makes the line-height of the h1 element the equivalent of 18 pixels. Similar thinking is used to define the value for margin-bottom—this needs to be 18 pixels to keep the vertical rhythm going, so the value is set to 1em. h1 { font-size: 1.8em; line-height: 1em; margin-bottom: 1em; } 95

THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGN 3. Style the subheading. For the subheading, the font-size value is set to 1.4em. To keep the line-height vertical rhythm going, you need to find the value that will multiply with the font-size setting to create 1.8 (since 1.8em is the equivalent of 18 pixels). You can get this by dividing 1.8 by the font-size value, which results in a line-height value of 1.2857142em. To keep the rhythm going, this setting can then be used for both the margin-top and margin-bottom values. h2 { font-size: 1.4em; line-height: 1.2857142em; margin-top: 1.2857142em; margin-bottom: 1.2857142em; } However, what this serves to do is isolate the heading on its own line, rather than making it obviously lead to the subsequent paragraph. Two solutions exist for deal- ing with this. The first is simply to remove the bottom margin; the second is to create asymmetrical margins, making the top margin larger than the bottom one. To keep the entire space the element takes up strictly within the grid and not inter- rupt the vertical rhythm too much, it’s sensible to take half the margin-bottom value and add it to the margin-top value. h2 { font-size: 1.4em; line-height: 1.2857142em; margin-top: 1.9285713em; margin-bottom: 0.6428571em; } 4. Style the crossheads and paragraphs. For this example, the crossheads and para- graphs are identical, save for the default styling on the headings that renders them in bold. The font-size value is 1.2em. Again, 1.8 is divided by the font-size figure to arrive at the line-height and margin values, both of which are set to 1.5em. Note that the h3 rule has no margin-bottom value, meaning that each level-three heading hugs the subsequent paragraph. h3 { font-size: 1.2em; line-height: 1.5em; margin-top: 1.5em; } p{ font-size: 1.2em; line-height: 1.5em; margin-bottom: 1.5em; } At this point, your page should look like the following image.96

WORKING WITH TYPE 35. Add a (temporary) grid. When working on text that adheres to a baseline grid, it can help to create a tiled background image that you can use to check whether your measurements are accurate. The 18-pixel-high image file, styling-semantic- text-baseline.gif, has a single-pixel line at the bottom of the image. When applied to the wrapper div’s background via the #wrapper rule (see the following code), a ruled background is shown. Although intended as a temporary design aid, you could retain the grid permanently, because it can help readers to rapidly skim text. However, the aid only works when a browser is using default settings—when the text is enlarged, the background image stays as it is, resulting in the grid of the image and the grid of the text being out of sync. #wrapper { margin: 0 auto; width: 400px; background: url(styling-semantic-text-baseline.gif); } The following image shows how this image works behind the text styled in this exercise—as you can see, the vertical rhythm is maintained right down the page. 97

THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGN Creating drop caps and pull quotes using CSS The previous exercise showed how something aimed primarily at the world of print design—a baseline grid—can actually work well online, and this section will continue that theme, showing how to use CSS to create drop caps and pull quotes. Drop caps—large let- ters typically used at the start of a printed article—are rare online, although they can be a useful way of drawing the eye to the beginning of the body copy. Pull quotes are more common, and while part of their use in print—taking a choice quote and making it stand out on the page to draw in the reader—is less effective online, pull quotes are still handy for highlighting a piece of text (such as a quote or idea) or for providing client quotes on a company website. Creating a drop cap using a CSS pseudo-element Required files styling-semantic-text-2.html and styling-semantic-text-2. css from the chapter 3 folder. What you’ll learn How to create a drop cap for a website, and how to use the CSS float property. Any element can be floated left or right in CSS, and this causes subsequent content to wrap around it. Completed files drop-cap.html and drop-cap.css from the chapter 3 folder.98

WORKING WITH TYPE1. Create a new rule that targets the relevant character. For this, you can use a 3 pseudo-element, first-letter, and the adjacent sibling selector created earlier in the “Styling semantic markup” section. See Appendix D (“CSS Reference”) for more on pseudo-elements. h1+p:first-letter { } In plain English, this rule is saying, “Apply this rule to the first letter of the para- graph that follows the level-one heading.”2. Float the character and increase its size. Add a float: left property/value pair to float the first character in the paragraph to the left, which makes subsequent con- tent wrap around it. Then set a large font-size value to increase the size of the character compared to the surrounding text. h1+p:first-letter { float: left; font-size: 3em; }3. Finally, tweak the positioning. Define a line-height value and margin-top value to vertically position the character; you may need to experiment some when working on your own designs outside of this exercise, since the values required are some- what dependent on the font-size setting. The margin-right setting provides some spacing between the drop cap and the subsequent text. h1+p:first-letter { float: left; font-size: 3em; line-height: 1.0em; margin-top: -3px; margin-right: 0.15em; }Note that you can use the first-line pseudo-element to target the firstline of some text—for example, to make it bold, which is a commonly useddesign element in magazines.Although this technique is the most straightforward one for working with dropcaps, the results aren’t entirely satisfactory. Due to the way different browsers dealwith the first-letter pseudo-element, display isn’t particularly consistent acrossbrowsers and platforms—see the following two images, which show the results inFirefox and Safari. Therefore, if you want to use drop caps with more precision, it’sbest to fall back on a more old-fashioned but tried-and-tested method: the spanelement. 99

THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGN Creating a drop cap with span elements and CSS Required files styling-semantic-text-2.html and styling-semantic-text-2. css from the chapter 3 folder. What you’ll learn How to create a drop cap for a website, using span elements to aid positioning. Completed files drop-cap-with-spans.html and drop-cap-with-spans.css from the chapter 3 folder. The variant with colored backgrounds uses the files drop-cap-with-spans-b.html and drop-cap-with-spans- b.css. 1. Add the span elements. Wrap a span element around the first character of the paragraph and give it a class value of dropCap. Wrap another span element around the initial character, without any class attribute. The additional span makes it easier to fine-tune the positioning of the drop cap. <p><span class=\"dropCap\"><span>L</span></span>orem ipsum dolor […] 2. Size the drop cap. Using a contextual selector, define a font-size setting of 4.8em for the content of the span element within the dropCap span. This is the height of three lines of text, from the top of a character in the first line to the bottom of a character in the third. .dropCap span { font-size: 4.8em; line-height: 1em; } 3. Float the drop cap. In order for subsequent text to flow around the drop cap, it has to be floated. This is done via the float: left property/value pair. The display: block pair sets the dropCap span as a block-level element, enabling you to set edge dimensions for it. By defining a height value that’s slightly smaller than the font-size setting, subsequent text won’t sit underneath the drop cap once it’s cor- rectly positioned. .dropCap { float: left; height: 4.7em; }100

WORKING WITH TYPE4. Tweak positioning of the drop cap. Use top and left margins (positive and negative) 3 to move the drop cap into position, so that it correctly lines up with the other text on the page. The margin-right setting ensures that text to the right of the drop cap doesn’t hug it. .dropCap { float: left; height: 4.7em; margin-top: -0.2em; margin-left: -0.4em; margin-right: 0.5em; } The following image shows what your page should look like so far.5. Review the code and add a colored background. This method also isn’t without its problems—the span elements have no semantic value and are therefore “bloated code”; and the values set in steps 2 and 3 require some experimentation for each different font and paragraph setting you use them with. However, it usually doesn’t take long to get everything working, and once you have a design, it’s easy enough to tweak. For example, amend the rules as follows to change the drop cap to one with a colored background: .dropCap { float: left; height: 3.9em; margin-top: -0.2em; margin-left: -0.4em; margin-right: 0.5em; border: 1px solid #aaaaaa; background: #dddddd; color: #ffffff; padding: 0.2em 0.6em; } .dropCap span { font-size: 4.0em; line-height: 1em; } 101

THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGN Note that the image-replacement techniques described earlier in the chap- ter offer another means of adding a drop cap of a more graphical nature, should such a thing be required. Creating pull quotes in CSS Required files styling-semantic-text-2.html, styling-semantic-text-2.css, quote-open.gif, and quote-close.gif from the chapter 3 folder. What you’ll learn How to create a magazine-style pull quote, which can draw the user’s attention to a quote or highlight a portion of an article. Completed files pull-quote.html and pull-quote.css from the chapter 3 folder. 1. Add the HTML. The required markup for a basic pull quote is simple, centering around the blockquote element and nesting a paragraph within. Add the following to the web page, above the code <h2>Curabitur sit amet risus</h2>: <blockquote> <p>This is the pull quote. It's really very exciting, so read it now! ¯ Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> </blockquote> 2. Style the blockquote element. Create a blockquote rule and use the background property to add the open quote image as its background. Set vertical margins that are larger than the margins between the paragraphs (to ensure that the pull quote stands out from the surrounding text) and the horizontal margins (to ensure that the pull quote doesn’t span the entire column width, which also helps it visually stand out). blockquote { background: url(quote-open.gif) 0 0 no-repeat; margin: 2.4em 2em; } 3. Style the pull quote paragraph text. Using the contextual selector blockquote p, style the paragraph text within the blockquote element. Making the text bold and larger than the surrounding copy helps it stand out—but to ensure it doesn’t become too distracting, knock back its color a little.102

WORKING WITH TYPE blockquote p { 3 color: #555555; font-size: 1.3em; font-weight: bold; text-align: justify; }4. Use the background property to add the closing quote mark, which is added to the paragraph, since you can only add one background image to an element in CSS. The background’s position is set to 100% 90%—far right and almost at the bottom. Setting it at the absolute bottom would align the closing quote with the bottom of the leading under the last line of the paragraph text; setting the vertical position value to 90%, however, lines up the closing quote with the bottom of the text itself. blockquote p { color: #555555; font-size: 1.3em; font-weight: bold; text-align: justify; background: url(quote-close.gif) 100% 90% no-repeat; }5. Tweak the positioning. If you test the page now, you’ll see the paragraph content appearing over the top of the background images. To avoid this, padding needs to be applied to the quote mark to force its content inward, but still leave the back- ground images in place. Since the quote images are both 23 pixels wide, a horizon- tal padding value of 33px provides room for the images and adds an additional 10 pixels so that the content of the paragraph doesn’t abut the quote marks. Finally, the default margin-bottom value for paragraphs is overridden (via a 0 value), since it’s redundant here. blockquote p { color: #555555; font-size: 1.3em; font-weight: bold; text-align: justify; background: url(quote-close.gif) 100% 90% no-repeat; padding: 0 33px; margin-bottom: 0; } The following image shows your pull quote page so far. 103

THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGN 6. Next, credit the quotation. To add a credit to the quote, add another paragraph, with a nested cite element, inside which is the relevant content. <blockquote> <p>This is the pull quote. It's really very exciting, so read it now! ¯ Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> <p><cite>Fred Bloggs</cite></p> </blockquote> 7. In CSS, add the following rule: cite { background: none; display: block; text-align: right; font-size: 1.1em; font-weight: normal; font-style: italic; } 8. Some of the property values in cite are there to override the settings from block- quote p, and to ensure that the second paragraph’s text is clearly distinguishable from the quote itself. However, at this point, both paragraphs within the block- quote element have the closing-quote background, so a final rule is required. blockquote>p+p { background: none; } This fairly complex rule uses both a child selector (>) and an adjacent selector (+), and styles the paragraph that comes immediately after the paragraph that’s a child element of the blockquote (which is the paragraph with the cite element). The rule overrides the background value defined in step 5 for paragraphs within the block quote). Note that this assumes the quote itself will only be a single para- graph. If you have multi-paragraph quotes, you’ll need to apply a class to the final paragraph and set the quote-close.gif image as a background on that, rather than on blockquote p. Note that the advanced selector shown isn’t understood by versions of Internet Explorer prior to 7. The best workaround for that browser is to use conditional com- ments (see Chapter 9) to remove the quote graphic backgrounds.104

WORKING WITH TYPEUsing classes and CSS overrides to create an alternate pull quote 3 Required files pull-quote.html and pull-quote.css from the chapter 3 folder. 105What you’ll learn How to use CSS classes to create alternatives to the default pull quote. In this example, you’ll create a narrow pull quote that floats to the right of the body copy. Completed files pull-quote-2.html and pull-quote-2.css from the chapter 3 folder. 1. Amend the HTML. First, add a class to the blockquote element so that it can be targeted in CSS: <blockquote class=\"floatRight\"> 2. Position the blockquote. Create a new CSS rule that targets the blockquote from the previous step by using the selector blockquote.floatRight. Set float and width values to float the pull quote and define its width. blockquote.floatRight { float: right; width: 150px; } 3. Remove the quote mark background image by setting background to none. Add the two border property/value pairs shown to visually separate the pull quote from its surroundings, drawing the eye to its content. blockquote.floatRight { float: right; width: 150px; background: none; border-top: 5px solid #dddddd; border-bottom: 5px solid #dddddd; } 4. Add padding and margins. First, add vertical padding to ensure that the pull quote’s contents don’t hug the borders added in the previous step. Next, define margin values, overriding those set for the default blockquote from the previous exercise. Because this alternate pull quote is floated right, there’s no need for top and right margins, hence them being set to 0; the bottom and left margin values are left intact. blockquote.floatRight { float: right; width: 150px; background: none; border-top: 5px solid #dddddd; border-bottom: 5px solid #dddddd; padding: 10px 0;

THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGN margin: 0 0 2em 2.4em; } 5. Override the paragraph styles. The background and padding settings for the default blockquote style are no longer needed, so they’re set to none and 0, respectively. Finally, text-align is set to center, which is appropriate for a narrow pull quote such as this. blockquote.floatRight p { text-align: center; background: none; padding: 0; } Adding reference citations The blockquote element can have a cite attribute, and the content from this attribute can be displayed by using the following CSS rule. Note, however, that at the time of writ- ing, this doesn’t work in Internet Explorer. blockquote[cite]:after { display : block; margin : 0 0 5px; padding : 0 0 2px 0; font-weight : bold; font-size : 90%; content : \"[source: \"\" \" attr(cite)\"]\"; } Working with lists This chapter concludes with the last of the major type elements: the list. We’ll first look at the different types of lists—unordered, ordered, and definition—and also see how to nest them. Then we’ll move on to cover how to style lists in CSS, list margins and padding, and inline lists.106

WORKING WITH TYPEUnordered lists 3 The unordered list, commonly referred to as a bullet point list, is the most frequently seen type of list online. The list is composed of an unordered list element (<ul></ul>) and any number of list items within, each of which looks like this (prior to content being added): <li></li>. An example of an unordered list follows, and the resulting browser display is shown to the right. As you can see, browsers typically render a single-level unordered list with solid black bullet points. <ul> <li>List item one</li> <li>List item two</li> <li>List item 'n'</li> </ul>Unlike HTML, XHTML lists require end tags on all list elements. InHTML, the </li> end tag was optional.Ordered lists On occasion, list items must be stated in order, whereupon an ordered list is used. It works in the same way as an unordered list, the only difference being the containing element, which is <ol></ol>. <ol> <li>List item one</li> <li>List item two</li> <li>List item 'n'</li> </ol> Web browsers automatically insert the item numbers when you use ordered lists. The only way of controlling numbering directly is via the start attribute, whose value dic- tates the first number of the ordered list. Note, though, that this attribute is depre- cated—use it and your web page will not validate as XHTML Strict.Definition lists A definition list isn’t a straightforward list of items. Instead, it’s a list of terms and explana- tions. This type of list isn’t common online, but it has its uses. The list itself is enclosed in the definition list element (<dl></dl>), and within the element are placed terms and def- initions, marked up with <dt></dt> and <dd></dd>, respectively. Generally speaking, browsers display the definition with an indented left-hand margin, as in the following example. 107

THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGN <dl> <dt>Cat</dt> <dd>Four-legged, hairy animal, with an ¯ inflated sense of self-importance</dd> <dt>Dog</dt> <dd>Four-legged, hairy animal, often with ¯ an inferiority complex</dd> </dl> Nesting lists Lists can be nested, but designers often do so incorrectly, screwing up their layouts and rendering web pages invalid. The most common mistake is placing the nested list outside any list items, as shown in the following incorrect example: <ul> <li>List item one</li> <ul> <li>Nested list item one</li> <li>Nested list item two</li> </ul> <li>List item two</li> <li>List item 'n'</li> </ul> Nested lists must be placed inside a list item, after the relevant item that leads into the nested list. Here’s an example: <ul> <li>List item one <ul> <li>Nested list item one</li> <li>Nested list item two</li> </ul> </li> <li>List item two</li> <li>List item 'n'</li> </ul> Always ensure that the list element that contains the nested list is closed with an end tag. Not doing so is another common mistake, and although it’s not likely to cause as many problems as the incorrect positioning of the list, it can still affect your layout. Styling lists with CSS Lists can be styled with CSS, making it easy to amend item spacing or create custom bullet points. I tend to think bullet points work well for lists. They’re simple and—pardon the pun—to the point. However, I know plenty of people would rather have something more visually interesting, which is where the list-style-image property comes in.108

WORKING WITH TYPElist-style-image property 3The list-style-image property replaces the standard bullet or number from anunordered or ordered list with whatever image you choose. If you set the following in yourCSS, the resulting list will look like that shown to the right. (Note that this is the nested listcreated earlier in this chapter.) ul { list-style-image: url(bullet.gif); }Contextual selectors were first mentioned in Chapter 1(see the section “Types of CSS selectors”). These enableyou to style things in context, and this is appropriate when working with lists. You can stylelist items with one type of bullet and nested list items with another. The original rule staysin place but is joined by a second rule: ul { list-style-image: url(bullet.gif); } ul ul { list-style-image: url(bullet-level-two.gif); }This second rule’s selector is ul ul, which means that the declaration is applied only tounordered lists within an unordered list (i.e., nested lists). The upshot is that the top-levellist items remain with the original custom bullet, but the nested list items now have a dif-ferent bullet graphic.With this CSS, each subsequent level would have the nested list bullet point, but it’s feasi-ble to change the bullet graphic for each successive level, by using increasingly complexcontextual selectors.When using custom bullet images, be wary of making them too large. Some browsersclip the bullet image, and some place the list contents at the foot of the image. In allcases, the results look terrible.Dealing with font-size inheritanceMost of the font-size definitions in this chapter (and indeed, in this book) use relativeunits. The problem with using ems, however, is that they compound. For example, if youhave a typical nested list like the one just shown, and you define the following CSS, thefirst level of the list will have text sized at 1.5em; but the second-level list is a list within alist, so its font-size value will be compounded (1.5 ! 1.5 = 2.25em). 109

THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGN html { font-size: 100%; } body { font-size: 62.5%; font-family: Verdana, Arial, ¯ Helvetica, sans-serif; } li { font-size: 1.5em; } The simple workaround for this is to use a contextual selector—li li—to set an explicit font-size value for list items within list items, as shown in the following rule. li li { font-size: 1em; } With this, all nested lists take on the same font-size value as the parent list, which in this case is 1.5em. list-style-position property This property has two values: inside and outside. The latter is how list items are usually displayed: the bullet is placed in the list margin, and the left margin of the text is always indented. However, if you use inside, bullets are placed where the first text character would usually go, meaning that the text will wrap underneath the bullet. list-style-type property The list-style-type property is used to amend the bullets in an unordered or ordered list, enabling you to change the default bullets to something else (other than a custom image). In an unordered list, this defaults to disc (a black bullet), but other values are available, such as circle (a hollow disc bullet), square (a square bullet), and none, which results in no bullet points. For ordered lists, this defaults to decimal (resulting in a num- bered list), but a number of other values are available, including lower-roman (i, ii, iii, etc.) and upper-alpha (A, B, C, etc.) A full list of supported values is in Appendix D (CSS Reference). Generally speaking, the values noted are the best supported, along with the upper and lower versions of roman and alpha for ordered lists. If a browser doesn’t understand the numbering system used for an ordered list, it usually defaults to decimal. The W3C rec- ommends using decimal whenever possible, because it makes web pages easier to navi- gate. I agree—things like alpha and roman are too esoteric for general use, plus there’s nothing in the CSS specifications to tell a browser what to do in an alphabetic system after z is reached (although most browsers are consistent in going on to aa, ab, ac, etc.).110

WORKING WITH TYPEList style shorthand 3As elsewhere in CSS, there is a shorthand property for list styles, and this is the aptlynamed list-style property. An example of its use is shown in the following piece of CSS: ul { list-style-type: square; list-style-position: inside; list-style-image: url(bullet.gif); }which can be rewritten as follows: ul { list-style: square inside url(bullet.gif); }List margins and padding Browsers don’t seem to be able to agree on how much padding and margin to place around lists by default, and also how margin and padding settings affect lists in general. This can be frustrating when developing websites that rely on lists and pixel-perfect ele- ment placement. By creating a list and using CSS to apply a background color to the list and a different color to list items, and then removing the page’s padding and margins, you can observe how each browser creates lists and indents the bullet points and content. In Gecko browsers (e.g., Mozilla Firefox), Opera, and Safari, the list background color is displayed behind the bullet points, which suggests that those browsers place bullet points within the list’s left-hand padding (because backgrounds extend into an element’s padding). Internet Explorer shows no background color there, suggesting it places bullet points within the list’s left-hand margin. This is confirmed if you set the margin property to 0 for a ul selector in CSS. The list is unaffected in all browsers but Internet Explorer, in which the bullets abut the left edge of the web browser window. Conversely, setting padding to 0 makes the same thing happen in Gecko browsers, Safari, and Opera. To get all browsers on a level playing field, you must remove margins and padding, which, as mentioned previously in this book, is done in CSS by way of the universal selector: *{ margin: 0; padding: 0; } With this in place, all browsers render lists in the same way, and you can set specific values as appropriate. For example, bring back the bullet points (which may be at least partially hidden if margins and padding are both zeroed) by setting either the margin-left or padding-left value to 1.5em (i.e., set margin: 0 0 0 1.5em or padding: 0 0 0 1.5em). The difference is that if you set padding-left, any background applied to the list will 111

THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGN appear behind the bullet points, but if you set margin-left, it won’t. Note that 1.5em is a big enough value to enable the bullet points to display (in fact, lower values are usually sufficient, too—although take care not to set values too low, or the bullets will be clipped); setting a higher value places more space to the left of the bullet points. Inline lists for navigation Although most people think of lists as being vertically aligned, you can also display list items inline. This is particularly useful when creating navigation bars, as you’ll see in Chapter 5. To set a list to display inline, you simply add display: inline; to the li selector. Adding list-style-type: none; to the ul selector ensures that the list sits snug to the left of its container (omitting this tends to indent the list items). Adding a margin-right value to li also ensures that the list items don’t sit right next to each other. Here’s an example: ul { list-style-type: none; } li { display: inline; margin-right: 10px; } Thinking creatively with lists The final part of this chapter looks at creating lists with a little panache. Although most lists are perfectly suited to straightforward bullet points, sometimes some added CSS and imagery can go a long way. Creating better-looking lists Required files The HTML and CSS documents from the basic-boilerplates folder as a starting point, along with the images better-list- hollow-square.gif, better-list-shadow.gif, better-list- square.gif, and better-list-star.gif from the chapter 3 folder. What you’ll learn How to style a three-level list to look great, using background images and overrides. Completed files better-looking-lists.html and better-looking-lists.css from the chapter 3 folder.112

WORKING WITH TYPE1. Create the list. Within the HTML document’s wrapper div, add the following code: 3 <ul> 113 <li>List - 1.1 <ul> <li>List - 2.1</li> <li>List - 2.2 <ul> <li>List - 3.1</li> <li>List - 3.2</li> <li>List - 3.3</li> </ul> </li> <li>List - 2.3</li> </ul> </li> </ul>2. Amend the body rule. Add some padding to the body element so that page content doesn’t hug the browser window edges during testing: body { font: 62.5%/1.5 Verdana, Arial, Helvetica, sans-serif; padding: 20px; }3. Style the list elements. This kind of heavily styled list typically requires you to define specific property values at one level and then override them if they’re not required for subsequent levels. This is done by adding the three rules in the fol- lowing code block. For this example, the top level of the list (styled via ul) has a star background image that doesn’t repeat (the 1px vertical value is used to nudge the image into place so it looks better positioned), and the list-style-type value of none removes the default bullet points of all lists on the page. For the second level of lists (the first level of nesting), styled via ul ul, a horizon- tally tiling background image is added, giving the impression that the top-level list is casting a soft shadow. The border-left setting creates a soft boundary to the nested list’s left, thereby enclosing the content. The padding value ensures that there’s space around nested lists. For the third level of lists (the second level of nesting—that is, a nested list within a nested list), styled via ul ul ul, no specific styles are required, but to deal with inherited styles from ul ul, background is set to none and border-left is set to 0. If this weren’t done, third-level lists would also have the shadow background and dotted left-hand border. ul { list-style-type: none; background: url(better-list-star.gif) 0 1px no-repeat; } ul ul { background: url(better-list-shadow.gif) repeat-x; border-left: 1px dotted #aaaaaa;

THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGN padding: 10px; } ul ul ul { background: none; border-left: 0; } 4. Style the list item elements. For the top-level list items, the li rule styles them in uppercase, adds some padding (to ensure the items don’t sit over the background image applied in ul), and makes the text bold and gray. For the nested list items, the li li rule overrides the text-transform property, returning the text to sen- tence case, and adds a square gray bullet as a background image. The font-weight value is an override, and the color setting is darker than for the parent list’s list items so that the non-bold text of the nested list items stand out. Finally, for the third-level list items, styled using the selector li li li, a background override pro- vides a unique bullet point image (a hollow square). li { text-transform: uppercase; padding-left: 20px; font-weight: bold; color: #666666; } li li { text-transform: none; background: url(better-list-square.gif) 0 2px no-repeat; font-weight: normal; color: #333333; } li li li { background: url(better-list-hollow-square.gif) 0 2px no-repeat; }114

WORKING WITH TYPEWhen creating lists such as this, don’t overcomplicate things, and try to avoid going tomany levels of nesting, or combining ordered and unordered lists; otherwise, theselectors required for overrides become extremely complicated.Displaying blocks of code online 3 Required files The HTML and CSS documents from the basic-boilerplates 115 folder as a starting point.What you’ll learn How to style a list for displaying code online (complete with exercise headings and line numbers). Completed files display-code-online.html and display-code-online.css from the chapter 3 folder. 1. Create the list. Code blocks require terminology and descriptions, meaning that a definition list can be used to mark them up. For this example, the code block from the preceding “List style shorthand” section will be used. Within the wrapper div, create a definition list and give it a class value of codeList. For the term, add a description of the code, and for the definition, add an ordered list, with each line of code within its own list item. Each line of code should also be nested within a code element. <dl class=\"codeList\"> <dt>Writing out list styles in full</dt> <dd> <ol> <li><code>ul {</code></li> <li><code>list-style-type: square;</code></li> <li><code>list-style-position: inside;</code></li> <li><code>list-style-image: url(bullet.gif);</code></li> <li><code>}</code></li> </ol> </dd> </dl> 2. Amend the body and #wrapper CSS rules, adding some padding to the former (so the content doesn’t hug the browser window edges during testing) and a short- hand font definition to the latter (in place of existing content). body { font: 62.5%/1.5 Verdana, Arial, Helvetica, sans-serif; padding: 20px; } #wrapper { font: 1.2em/1.5em 'Lucida Grande', 'Lucida Sans Unicode', Lucida, ¯ Arial, Helvetica, sans-serif; }

THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGN 3. Style the list. Add the following rule, which adds a solid border around the defini- tion list that has a codeList class value: .codeList { border: 1px solid #aaaaaa; } 4. Style the definition term element. Add the following rule, which styles the dt ele- ment. The rule colors the background of dt elements within any element with a class value of codeList, and also adds some padding so the content of the dt elements doesn’t hug their borders. The font-weight value of bold ensures the content stands out, while the border-bottom value will be used as a device throughout the other rules, separating components of the design with a fairly thin white line. .codeList dt { background: #dddddd; padding: 7px; font-weight: bold; border-bottom: 2px solid #ffffff; } 5. Style the list items within the ordered list by adding the following rule. The margin-left value places the bullets within the definition list, rather than outside of it. .codeList li { background: #ffffff; margin-left: 2.5em; } Note that in Internet Explorer, the bullets typically display further to the left than in other browsers. This behavior can be dealt with by overriding the margin-left value of .codeList li in an IE-specific style sheet attached using a conditional comment— see Chapter 9 for more on this technique. 6. Finally, style the code elements. The background value is slightly lighter than that used for the dt element, ensuring that each element is distinct. By setting display to block, the code elements stretch to fill their container (meaning that the back- ground color also does this). The borders ensure that each line of code is visibly distinct, and the border-right setting essentially provides a border all the way around the code lines, seeing as the border-bottom setting in .codeList dt defines one at the top of the first line of code. The font is set to a monospace font, and the padding values place some space around the code, making it easier to read.116

.codeList code { WORKING WITH TYPE background: #eaeaea; display: block; 3 border-bottom: 2px solid #ffffff; border-right: 2px solid #ffffff; font : 1.2em \"Courier New\", Courier, monospace; padding: 2px 10px;}That just about wraps things up for online type. After all that text, it’s time to change track.In Chapter 4, you’ll look at working with images on the Web, and in Chapter 5, you’ll com-bine what you’ve learned so far and add anchors into the mix to create web navigation. 117



4 WORKING WITH IMAGES

THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGN In this chapter: Understanding color theory Choosing the best image format Avoiding common mistakes Working with images in XHTML Using alt text to improve accessibility Using CSS when working with images Displaying a random image from a selection Introduction Although text makes up the bulk of the Web’s content, it’s inevitable that you’ll end up working with images at some point—that is, unless you favor terribly basic websites akin to those last seen in 1995. Images are rife online, comprising the bulk of interfaces, the navi- gation of millions of sites, and a considerable amount of actual content, too. As the Web continues to barge its way into every facet of life, this trend can only continue; visitors to sites now expect a certain amount of visual interest, just as readers of a magazine expect illustrations or photographs. Like anything else, use and misuse of images can make or break a website—so, like else- where in this book, this chapter covers more than the essentials of working with HTML and CSS. Along with providing an overview of color theory, I’ve compiled a brief list of com- mon mistakes that people make when working with images for the Web—after all, even the most dedicated web designers pick up bad habits without realizing it. Finally, at the end of the chapter, I’ll introduce your first piece of JavaScript, providing you with a handy cut-out-and-keep script to randomize images on a web page. Color theory Color plays a massively important role in any field of design, and web design is no excep- tion. Therefore, it seems appropriate to include in this chapter a brief primer on color the- ory and working with colors on the Web.120

WORKING WITH IMAGESColor wheels 4 Circular color diagrams—commonly referred to as color wheels—were invented by Newton and remain a common starting point for creative types wanting to understand the relationship between colors and also for creating color schemes. On any standard color wheel, the three primary colors are each placed one-third of the way around the wheel, with secondary colors equally spaced between them—secondary colors being a mix of two primary colors. Between secondary and primary colors are tertiary colors, the result of mixing primary and secondary colors. Some color wheels blend the colors together, creating a continuous shift from one color to another, while others have rather more defined blocks of color; however, in all cases, the positioning is the same.Additive and subtractive color systems Onscreen colors use what’s referred to as an additive system, which is the color system used by light—where black is the absence of color, and colored light is added together to create color mixes. The additive primaries are red, green, and blue (hence the commonly heard RGB when referring to definition of screen colors). Mix equal amounts of red, green, and blue light and you end up with white; mix secondaries from the primaries and you end up with magenta, yellow, and cyan. In print, a subtractive system is used, similar to that used in the natural world. This works by absorbing colors before they reach the eye—if an object reflects all light it appears white, and if it absorbs all light, it appears black. Inks for print are transparent, acting as fil- ters to enable light to pass through, reflect off the print base (such as paper), and produce unabsorbed light. Typically, the print process uses cyan, magenta, and yellow as primaries, along with a key color—black—since equal combination of three print inks tends to pro- duce a muddy color rather than the black that it should produce in theory. Although the technology within computers works via an additive system to display colors, digital-based designers still tend to work with subtractive palettes when working on designs (using red, yellow, and blue primaries), because that results in natural color com- binations and palettes.Creating a color scheme using a color wheel Even if you have a great eye for color and can instinctively create great schemes for web- sites, it pays to have a color wheel handy. These days, you don’t have to rely on reproduc- tions in books or hastily created painted paper wheels. There are now digital color wheels that enable you to experiment with schemes, including Color Consultant Pro for the Mac (www.code-line.com/software/colorconsultantpro.html), shown in the following screenshot, and Color Wheel Pro (www.color-wheel-pro.com) and ColorImpact (www.tigercolor.com/Default.htm), both for Windows. 121

THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGN When working on color schemes and creating a palette for a website, there are various schemes available for you. The simplest is a monochromatic scheme, which involves varia- tions in the saturation (effectively the intensity or strength) of a single hue. Such schemes can be soothing—notably when based on green or blue—but also have a tendency to be bland, unless used with striking design and black and white. A slightly richer scheme can be created by using colors adjacent on the color wheel—this is referred to as an analogous scheme, and is also typically considered harmonious and pleasing to the eye. For more impact, a complementary scheme can be used, which uses colors on opposite sides of the color wheel (such as red/green, orange/blue, and yellow/purple); this scheme is often seen in art, such as a pointillist using orange dots in areas of blue to add depth. Complementary schemes work well due to a subconscious desire for visual harmony—an equal mix of complementary colors results in a neutral gray. Such effects are apparent in human color vision: if you look at a solid plane of color, you’ll see its complementary color when you close your eyes. A problem with a straight complementary scheme is that overuse of its colors can result in garish, tense design. A subtler but still attention-grabbing scheme can be created by using a color and the hues adjacent to the complementary color. This kind of scheme (which happens to be the one shown in the previous screenshot) is referred to as split- complementary.122