Part III: CSS for Presentation 226 Changing Capitalization The values for text-decoration are intuitive and are shown in Figure 12-19 text-decoration: underline underlines the element text-decoration: overline draws a line over the text text-decoration: line-through draws a line through the text text-decoration: blink makes text flash on and off The most popular use of the text-decoration property is turning off the underlines that appear automatically under linked text, as shown here: a { text-decoration: none; } There are a few cautionary words to be said regarding text-decoration. First, be sure there are other cues such as color, weight, or a bottom bor- der to compensate. On the flip-side, because underlines are such a strong visual cue to “click here,” underlining text that is not a link may be misleading and frustrat- ing. Consider whether italics may be an acceptable alternative. Finally, there is no reason to make your text blink. Internet Explorer won’t support it anyway. Changing Capitalization I remember when desktop publishing programs introduced a nifty feature that let me change the capitalization of text on the fly. This made it easy to see how my headlines might look in all capital letters without needing to retype them. CSS includes this feature as well with the text-transform property. text-transform Values: none | capitalize | lowercase | uppercase | inherit Default: none Applies to: all elements Inherits: yes When you apply the text-transform property to a text element, it changes its capitalization when it renders without changing the way it is typed in the source. The values are as follows (Figure 12-20): text-transform: none as it is typed in the source text-transform: capitalize capitalizes the first letter of each word text-transform: lowercase makes all letters lowercase text-transform: uppercase makes all letters uppercase • • • text-decoration: underline text-decoration: overline text-decoration: line-through Figure 12-19. Examples of text- decoration values. text-decoration: underline text-decoration: overline text-decoration: line-through Figure 12-19. Examples of text- decoration values. If you turn off underlines under links, do so with care because the underline is a strong visual cue that something is clickable. If you turn off underlines under links, do so with care because the underline is a strong visual cue that something is clickable. Spaced Out Chapter 12, Formatting Text 227 text-transform: normal (as was typed in) text-transform: capitalize text-transform: lowercase text-transform: uppercase Figure 12-20. The text-transform property changes the capitalization of characters when they are displayed, regardless of how they are typed in the source. Spaced Out The final two text properties in this chapter are used to insert space between letters (letter-spacing) or words (word-spacing) when the text is displayed. letter-spacing Values: length measurement, normal | inherit Default: normal Applies to: all elements Inherits: yes word-spacing Values: length measurement, normal | inherit Default: normal Applies to: all elements Inherits: yes The best way to get to know these properties is by example. When you provide a length measurement, that much space will be added between the letters of the text (letter-spacing) or words in a line (word-spacing). Figure 12-21 shows the results of these rule examples applied to the simple para- graph shown here. The style sheet p { letter-spacing: 8px; } p { word-spacing: 1.5em; } The markup <p>Black Goose Bistro Summer Menu</p> It is worth noting that when you specify em measurements, the calculated size is passed down to child elements, even if they have a smaller font size than the parent. Part III: CSS for Presentation 228 Spaced Out word-spacing: 1.5em; letter-spacing: 8px; Figure 12-21. letter-spacing (top) and word-spacing (bottom). In Exercise 12-3, we’ll make one last trip back to the Black Goose Bistro menu to add some of these new properties and make a few tweaks. In the interest of saving space and keeping this an introductory- level book, these properties were not given the full treatment. But being the type of author who doesn’t hold anything back, I’m including them here. Learn more about them at the W3C site (www.w3.org/TR/CSS21/). vertical-align Values: baseline | sub | super | top | text-top | middle | text- bottom | bottom | percentage | length | inherit Specifies the vertical alignment of an inline element’s baseline relative to the baseline of the surrounding text. It is also used to set the vertical alignment of content in a table cell ( td ). white-space Values: normal | pre | nowrap | pre-wrap | pre-line | inherit Specifies how white space in the element source is handled in layout. For example, the pre value preserves the character spaces and returns found in the source, similar to the pre (X)HTML element. visibility Values: visible | hidden | collapse | inherit Used to hide the element. When set to hidden , the element is invisible, but the space it occupies is maintained, leaving a hole in the content. The element is still there; you just can’t see it. text-direction Values: ltr | rtl | inherit Specifies the direction the text reads, left to right ( ltr ) or right to left ( rtl ). unicode-bidi Values: normal | embed | bidi-override | inherit Related to bi-directional features of Unicode. The Recommendation states that it allows the author to generate levels of embedding within the Unicode embedding algorithm. If you have no idea what this means, don’t worry. Neither do I. But I guess it’s there should you need it for seriously multi- lingual sites. The Other Text Properties exercise 12-3 | Finishing up the menu Let’s add a few finishing touches to the online menu, menu_summer.html. It might be useful to save the file and look at it in the browser after each step to see the effect of your edits and to make sure you’re on track. The finished style sheet is provided in Appendix A. First, I have a few global changes to the body element in mind. I’ve had a change of heart about the font-family . I think that a serif font such as Georgia would be more sophisticated and appropriate for a bistro menu. Let’s also use the line- height property to open up the text lines and make them easier to read. Make these updates to the body style rule, as shown: 1. Spaced Out Chapter 12, Formatting Text 229 body { font-family: Georgia, serif; font-size: small; line-height: 175%; } I also want to redesign the header section of the document. First, remove the teal color setting by deleting that whole rule. Get rid of the font-variant property for the h1 element as well. Once that is done, make the h1 purple and the paragraph in the header gray. You can just add color declarations to the existing rules. #header { color: teal; } /* delete */ h1 { font-size: 1.5em; font-variant: small-caps; /* delete */ color: purple; } #header p { font-style: italic; color: gray; } Next, to imitate a fancy print menu, I’m going to center a few key elements on the page using the text-align property. Write a rule with a grouped selector to center the whole header div , the h2 elements, and the paragraphs contained within the “appetizer” and “entrees” div s, like this: #header, h2, #appetizers p, #entrees p { text-align: center; } I want to make the “Appetizer” and “Main Courses” h2 headings kind of special. Instead of large, bold type, I’m actually going to reduce the font-size , and use all uppercase letters, extra letter spacing, and color to call attention to the headings. Here’s the new rule for h2 elements that includes all of these changes. h2 { font: bold 1em Georgia, serif; /* reduced from 1.2 em */ text-transform: uppercase; letter-spacing: 8px; color: purple; } We’re really close now; just a few more tweaks. Add a rule using contextual selectors that makes the paragraphs in the Appetizers and Main Courses sections italic. #appetizers p, #entrees p { font-style: italic; } Finally, we’ll add a softer color to the menu item names (in dt elements). Note that the strong elements in those dt elements stay maroon because the color applied to the strong elements overrides the color inherited by their parents. dt { font-weight: bold; color: olive;} And we’re done! Figure 12-22 shows how the menu looks now an improvement over the unstyled version, and we used text properties to do it. Notice that we didn’t touch a single character of the document markup in the process. That’s the beauty of keeping style separate from structure. 2. 3. 4. 5. 6. Adding letter spacing to small type is one of my favorite heading design tricks. It is a good alternative to large type for drawing attention to the element. D e S I G n t I P Adding letter spacing to small type is one of my favorite heading design tricks. It is a good alternative to large type for drawing attention to the element. D e S I G n t I P Figure 12-22. The formatted Black Goose Bistro menu. Part III: CSS for Presentation 230 Test Yourself Test Yourself Here are a few questions to see how well you picked up the fundamentals of selectors and text formatting. Here is a chance to get a little practice writing selectors. Using the diagram shown in Figure 12-23, write style rules that makes each of the elements described below red (color: red;). Write the selector as efficiently as possible. I’ve done the first one for you. html head body title style h1 div id="intro" div id="main" p p class="special" ul h2 p h2 p class="special" img strong li li li strong Figure 12-23. Sample document structure. All text elements in the document body {color: red;} h2 elements h1 elements and all paragraphs Elements belonging to the class “special” All elements in the “intro” section strong elements in the “main” section Extra credit: Just the paragraph that appears after an h2 (hint: this selector will not work in Internet Explorer 6) 1. a. b. c. d. e. f. g. Test Yourself Chapter 12, Formatting Text 231 Match the style property with the text samples in Figure 12-24. _______ {font-size: 1.5em;} _______ {text-transform: capitalize;} _______ {text-align: right;} _______ {font-family: Verdana; font-size: 1.5em;} _______ {letter-spacing: 3px;} _______ {font: bold italic 1.2em Verdana;} _______ {text-transform: uppercase;} _______ {text-indent: 2em;} _______ {font-variant: small-caps;} Default font and size 1 2 3 4 5 6 7 8 9 Figure 12-24. Text samples. 2. a. b. c. d. e. f. g. h. i. Part III: CSS for Presentation 232 CSS Review: Font and Text Properties CSS Review: Font and Text Properties In this chapter, we covered the properties used to format text elements. Here is a summary in alphabetical order. Property Description font A shorthand property that combines font properties font-family Specifies a typeface or generic font family font-size The size of the font font-style Specifies italic or oblique fonts font-variant Specifies a small-caps font font-weight Specifies the boldness of the font letter-spacing Inserts space between letters line-height The distance between baselines of neighboring text lines text-align The horizontal alignment of text text-decoration Underlines, overlines, and lines through text-direction Whether the text reads left-to-right or right-to-left text-indent Amount of indentation of the first line in a block text-transform Changes the capitalization of text when it displays unicode-bidi Works with Unicode bidirectional algorithms vertical-align Adjusts vertical position of inline elements relative to the base- line visibility Whether the element is rendered or is invisible white-space How white space in the source is displayed word-spacing Inserts space between words 233 IN THIS CHAPTER Color names in CSS Specifying RGB color values Foreground and background colors Pseudoclass and pseudoelement selectors Adding tiling background images Controlling the repeat and position of background images External style sheets Style sheets for print and other media Did you happen to see the Web back in 1993? It was a fairly dreary affair back then, where every background was gray and all the text was black. Then came the Netscape browser and, with it, a handful of attributes that allowed rudimentary (but welcome) control over font colors and backgrounds. For years, we made do. But thankfully, now we have style sheet properties that blow those old attri- butes out of the water. So if you happen to view the source of a web page and see attributes such as bgcolor, background, link, and vlink floating around, ignore them. They are relics of the past. Believe me, you’re much better off without them. We’re going to cover a lot of ground in this chapter. Of course, I’ll introduce you to all of the properties for specifying colors and backgrounds. This chap- ter also rounds out your collection of selector types and shows you how to create an external style sheet as well as a style sheet just for print. Oh, and there will be cabbages lots and lots of cabbages (you’ll see). Our first order of business is to talk about the options for specifying color in CSS, including a primer on the nature of color on computer monitors. Specifying Color Values There are two main ways to specify colors in style sheets: with a predefined color name as we have been doing so far: color: red; color: olive; color: blue; or, more commonly, with a numeric value that describes a particular RGB color (the color model on computer monitors). You’ve probably seen color values that look like these: color: #FF0000; color: #808000; color: #00F; We’ll get to all the ins and outs of RGB color in a moment, but first, a short and sweet section on the standard color names. COLORS AND BACKGROUNDS (Plus Even More Selectors and External Style Sheets) CHAPTER 13 Part III: CSS for Presentation 234 Specifying Color Values Color names The most intuitive way to specify a color is to call it by name. Unfortunately, you can’t make up just any color name and expect it to work. It has to be one of the color keywords predefined in the CSS Recommendation. CSS1 and CSS2 adopted the 16 standard color names originally introduced in HTML 4.01. CSS2.1 tossed in orange for a total of 17. Color names are easy to use— just drop one into place as the value for any color-related property: color: silver; background-color: gray; border-bottom-color: teal; Figure 13-1 shows printed approximations of the 17 color keywords in CSS2.1 (they will look different on computer screens, of course). I threw in their numeric values for good measure. Black #000000 Gray #808080 Silver #C0C0C0 White #FFFFFF Maroon #800000 Red #FF0000 Purple #800080 Fuchsia #FF00FF Green #008000 Lime #00FF00 Olive #808000 Yellow #FFFF00 Navy #000080 Blue #0000FF Teal #008080 Aqua #0000FF Orange (CSS 2.1) #FFA500 Figure 13-1. The 17 standard color names in CSS2.1. RGB color values Names are easy, but as you can see, they are limited. By far, the most common way to specify a color is by its RGB value. It also gives you millions of colors to choose from. For those who are not familiar with how computers deal with color, I’ll start with the basics before jumping into the CSS syntax. Extended Color Names CSS Level 3 has a new color module that gives you a whopping 140 color names to choose from. The module uses a set of color keywords originally introduced by the X Window System. These colors have historically been supported by browsers as (X)HTML attribute values, but this is the first time they’ve been standardized for CSS. Some day, we’ll be able to specify names like blanchedalmond, burlywood, and papayawhip. Won’t that be special? Unfortunately, they’re not well supported for use in style sheets at this time, but if you’re curious, you can see the full list online at www. learningwebdesign.com/ colornames.html or in the CSS3 proposal at www.w3.org/TR/css3- color/#svg-color . Extended Color Names CSS Level 3 has a new color module that gives you a whopping 140 color names to choose from. The module uses a set of color keywords originally introduced by the X Window System. These colors have historically been supported by browsers as (X)HTML attribute values, but this is the first time they’ve been standardized for CSS. Some day, we’ll be able to specify names like blanchedalmond, burlywood, and papayawhip. Won’t that be special? Unfortunately, they’re not well supported for use in style sheets at this time, but if you’re curious, you can see the full list online at www. learningwebdesign.com/ colornames.html or in the CSS3 proposal at www.w3.org/TR/css3- color/#svg-color . Specifying Color Values Chapter 13, Colors and Backgrounds 235 The RGB color model R: 255 (100%) G: 255 (100%) B: 255 (100%) RGB: 255, 255, 255 White RGB: 128, 128, 128 Gray RGB: 0, 0, 0 Black RGB: 200, 178, 130 Pleasant lavender R: 128 (50%) G: 128 (50%) B: 128 (50%) R: 0 (0%) G: 0 (0%) B: 0 (0%) R: 200 (78%) R: 178 (70%) R: 130 (51%) Why 255? In true RGB color, 8 bits of information are devoted to each color channel. 8 bits can describe 256 shades (28 8 =256), so colors are measured on a scale from 0 to 255. A word about RGB color Computers create the colors you see on a monitor by combining three colors of light: red, green, and blue. This is known as the RGB color model. You can provide recipes (of sorts) for colors by telling the computer how much of each color to mix in. The amount of light in each color “channel” is typically described on a scale from 0 (none) to 255 (full-blast), although it can also be provided as a percent. The closer the three values get to 255 (100%), the closer the resulting color gets to white (Figure 13-2). Any color you see on your monitor can be described by a series of three numbers: a red value, a green value, and a blue value. This is one of the ways that image editors such as Adobe Photoshop keep track of the colors for every pixel in an image. With the RGB color system, a pleasant lavender can be described as 200, 178, 230. Picking a color The easiest way to pick a color and find its RGB color values is to use an image editing tool such as Adobe Photoshop, Photoshop Elements or Corel Paint Shop Pro. Most image tools provide a Color Picker similar to Photoshop’s shown in Figure 13-3. When you select a color from the spectrum in the Color Picker, the red (R), green (G), and blue (B) values are listed, as pointed out in the figure. And look next to the # symbol—those are the same values, converted so they are ready to go in a style sheet. I’ll explain the 6-digit hex values in a moment. Figure 13-2. Colors on computer monitors are made by mixing different amounts of red, green, and blue light (thus, RGB). The color in the middle of each diagram shows what happens when the three color channels are combined. The more light in each channel, the closer the combination is to white. Figure 13-2. Colors on computer monitors are made by mixing different amounts of red, green, and blue light (thus, RGB). The color in the middle of each diagram shows what happens when the three color channels are combined. The more light in each channel, the closer the combination is to white. . style sheets at this time, but if you’re curious, you can see the full list online at www. learningwebdesign.com/ colornames.html or in the CSS3 proposal at www.w3.org/TR/css3- color/#svg-color style sheets at this time, but if you’re curious, you can see the full list online at www. learningwebdesign.com/ colornames.html or in the CSS3 proposal at www.w3.org/TR/css3- color/#svg-color heading design tricks. It is a good alternative to large type for drawing attention to the element. D e S I G n t I P Adding letter spacing to small type is one of my favorite heading design