User:Bartlett/10

Hour 10. Text Colors and Effects

What You'll Learn in This Hour: Additional ways to specify the color of text How to use color effectively in web design How to add or remove underlines from your text How to add lines through or over your text Which CSS property enables you to change the case of your letters How to control the spaces between letters and words How to control line breaks and duplicate the HTML </tt> and <tt><nobr></tt> tags * How to adjust the spacing between lines Use of Cascading Style Sheets can transform a plain, boring page of text into a visual treat, without even any graphics. The CSS specifications define ways to enhance your textual content visually, from changing the colors to adding strikethrough lines. In addition, you can change the spaces between letters, words, and lines, as well as the points at which browsers wrap lines, by using simple CSS properties. |} ./ ADD NAME=CH10LEV1SEC1.HTML == Text Colors == Colors are a key part of conveying information in a visual medium. Giving distinct colors to certain types of information on a page can emphasize or de-emphasize the importance; for example, new content can be marked with a bright, vivid color, and outdated content may be presented in a more muted hue. As you already know, using the <tt>color</tt> property is the primary method for setting the foreground color. You can set the background color with the <tt>background-color</tt> property, which is covered in detail next hour. The foreground <tt>color</tt> is also used by other properties as a default color value if none is specified. For example, if a color value is omitted for the <tt>border</tt> property, the foreground <tt>color</tt> will be used. Specifying Color Values CSS provides two ways to define a color. The first is to use a color name, such as <tt>green</tt> or <tt>black</tt>; the second is to use a set of three RGB values, corresponding to the amount of red, green, and blue desired. RGB colors were introduced in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch02.html#ch02 Hour 2], "Getting Started with CSS," and in this hour we'll tell you other ways to specify a set of RGB values. Color Names Back in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch02.html#ch02 Hour 2], you learned about the 17 colors recognized by the CSS specifications. These color names<tt>aqua</tt>, <tt>black</tt>, <tt>blue</tt>, <tt>fuchsia</tt>, <tt>gray</tt>, <tt>green</tt>, <tt>lime</tt>, <tt>maroon</tt>, <tt>navy</tt>, <tt>olive</tt>, <tt>orange</tt>, <tt>purple</tt>, <tt>red</tt>, <tt>silver</tt>, <tt>teal</tt>, <tt>white</tt>, and <tt>yellow</tt>are well-supported by the browsers. Most browsers accept other color names as well, such as <tt>pink</tt>, <tt>cyan</tt>, and <tt>violet</tt>. However, until a future version of CSS adds those colors to the official specification, it's probably best to avoid using such nonstandard colors. There's no guarantee that a browser will support them, so you're safer with RGB values. Some other colors are accepted by browsers as well; those are based on the user's operating system preferences and are called system colors. In [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch23.html#ch23 Hour 23], "User Interface and Generated Content," you'll learn more about system colors and how to use them in your web design. RGB Color Values To specify a color in RGB notation, you need to know how much red, green, and blue is contained in that color. Web colors are a bit strange at first if you're not used to them; they're not at all like mixing paints as a child. For example, when you're blending paint colors, you mix red and yellow to make orange. When you're making RGB colors, you mix red and green to make yellow! If you did that with paint, you'd get some ugly, muddy gray-brown shade. Paints (and ink, as well as most other physical objects you look at) have color because they selectively reflect light; something that actually emits light, as your monitor does, creates colors by adding together portions of colored light. It's a bit confusing, but you'll get used to it after you've worked with RGB values. Even more confusing is the way RGB colors are written. All RGB colors are measured based on a scale from 0 to 255. They're usually counted in hexadecimal, which means a base-16 number system where the digits are 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, and F. The number 32 is written as <tt>20</tt> (two sixteens and zero ones), and the number 111 is <tt>6F</tt> (six sixteens and 15 ones). CSS offers four ways to present RGB values. The first uses straightforward hexadecimal notation, as a six-digit number: <div><pre>body { color: #CC66FF; } This means the foreground color should have a red value of CC (204 out of 255, or 80%); 66 green, which is 102 (40%); and FF blue, or 255 (100%). What does this color look like? Kind of a light lavender. The closer you are to white (#FFFFFF) the more pastel the colors, and when you mix large amounts of blue and red, you get a purple effect. You can also write this in short hex notation. This is a three-digit hexadecimal number; to convert a three-digit RGB code to a six-digit one, simply double each letter. So the same rule can be written like this: body { color: #C6F; } The rgb() function provides two more ways to set colors, especially if you don't know hexadecimal numbers well. One of those is to provide a triplet of RGB numbers, rated from 0 to 255, separated by commas. The other is to give percentages. Here's how the lavender rule can be written: body { color: rgb(204, 102, 255); } body { color: rgb(80%, 40%, 100%); } You can use these color values when setting any color in CSS, not just the color property. For example, you can set a background-color or a border with any of these types of values. Did you Know? To design effectively with color, you need a color chart, or else you have to be very willing to experiment with RGB values! I recommend getting a color chart; either a printed one you can keep by your computer or an electronic file you can refer to, or both. A great site for web color information is VisiBone, http://www.visibone.com/, which has a hex color chart arranged by hue. Using Color Effectively When you're designing a web page and adding color by using CSS, it is always helpful to put some thought into the process. The theory and practice of employing color is a topic that could fill an entire book or several books, as not everyone seems to agree! However, here are some pointers that can help you use color more effectively in your designs; most of these are common sense, but it's amazing how many web designs don't seem to have taken these into account. Use colors to visually emphasize important differences among types of content. The presentation of your content should be derived from the meaning of that information. Color your navigation bar differently from your main content. Set sidebars apart visually with background colors that fit well with the rest of the page. Change the color of headings to make them more visible. Change colors for a reason, not on a whim. I've seen many websites where the developers appear to have discovered color just the day before and changed the color for no reason. Be able to justify your color choices. Bright colors draw attention; faded colors hide unimportant material. As an example, if some content is more important or changes often, give it a vibrant, bright color, such as yellow (on a dark background) or red, to make it stand out. Too many colors will make your page seem confusing and unprofessional; a restricted set of hues often works better. If you don't have any experience with graphic design, pick up a good book on color and design, and notice that many great designs have a limited palette. You don't have to change the color of everything. Black on white is not the enemy. Web users are accustomed to the default colors, and often it's easier to read text if there's high contrast, such as black on white (or white on black). If you're designing for a whole site, use a consistent look across your pages. Consistency helps users recognize that they're still at your site and helps establish a feeling of familiarity. If you change your site too often, regular users may be disoriented. If there are identifiable subsites, consider assigning each one a color scheme. Don't create a brand new design for each; it can be disorienting if each section looks like a brand new website. Instead, add color that complements the primary site design. Make sure your color choices look good together and contrast well. Subtle shades of difference, such as medium blue on dark blue, may not come across well and content could be lost. Use colors that complement any images or graphics on your page. You can derive color schemes from your graphical content, or choose graphics that fit your chosen colors. The more coordinated your colors, the better your site will look. Test your colors in several browsers and computers; your monitor's settings may be different than someone else's. Try testing with 256 colors instead of thousands, millions, or billions; if you can, try your site in black and white. Don't employ color as the only way of conveying information; visually impaired users might miss important context. It's fine to use color, but make sure that important distinctions among content are reflected in the markup as well. In [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch22.html#ch22 Hour 22], "Accessibility and Print Media," you'll learn more about designing to enable access for people with disabilities. ./ ADD NAME=CH10LEV1SEC2.HTML Special Text Effects In addition to changing the colors of the text and the font properties from [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch09.html#ch09 Hour 9], "Fonts and Font Families," Cascading Style Sheets can be used to produce text effects ranging from decorations to drop shadows. These can be used only on CSS elements that actually contain text; on anything else, they have no effect. For example, a text-shadow property set on an <img> tag doesn't produce a shadow under the displayed image. The text-decoration Property CSS uses the term text decoration to refer to a specific set of effects that can be applied to text: lines through, under, or around the text, and blinking text. The types of values that can be set for the text-decoration property are shown in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch10table01 Table 10.1]. The default value for text-decoration is usually none, although most browsers automatically use text-decoration: underline for hypertext links. Value Effect blink The text blinks off and on. line-through Draws a line through the middle of the text. overline Draws a line over the top of the text. underline Draws a line under the bottom of the text. none None of the effects listed here. inherit Uses the value of text-decoration on the containing box. Watch Out! The blink property value is not very popular, primarily because of serious abuse of the <blink> tag by designers when it was first introduced by Netscape. The <blink> tag is nonstandard in HTML and highly discouraged. Therefore, text-decoration: blink is specifically stated to be an optional part of the CSS specification; browsers don't have to support it, and in fact, most of them do not. The value of text-decoration technically is not inherited, although if it is set on a block element, the decoration should be applied to all text within that block. The color of the text-decorationthe line through, over, or under the textis the same as that of the text itself, and so can be set with the color property. The lines drawn are thin, and the exact thickness is up to the browser; you can't change the line thickness with CSS. The most common value for text-decoration in style sheets is none; the property is mainly used to turn off underlines rather than add them or any other text decorations. Why is this so? Because you can use text-decoration to turn off the underlines on links by writing a:link and a:visited rules. Many designers find underlined links to be annoyingly ugly and much less elegant than links without underlines. However, there are some problems with that approach: Namely, it makes it harder for the user to know what's a link and what's not. If you're going to remove one of the user's primary cues to find clickable links, you need to make sure that the links are obvious. Color typically isn't enough by itself, even though web developers like to think it should be. If you're using inline linksthose within paragraphs of textthen you should probably leave the underlines alone. An alternative approach is to set obvious borders or background colors on your inline links. Navigation bars are a different case; even without underlines, users can tell they're supposed to click on things that look like buttons or a list of options. Removing underlines from navigation bars is acceptable and won't cause problems. The other side of the link-underlining coin is this: Users think that anything that is underlined is clickable. If you put text-decoration: underline on your

[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch10fig05 Figure 10.5] shows how this page is displayed by a web browser. Notice that the nowrap value has caused the first paragraph to scroll off the screen to the right, creating a horizontal scrollbar.

Figure 10.5. The effects of the white-space property.

[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/images/10fig05_alt.jpg [View full size image]]

File:10fig05.jpg

 The line-height Property 

The line height of a line of text is determined initially by the font-size property's value. Usually the line height is either the same as the font-size or a little larger, depending on the browser's internal rules for the line height.

The line-height property enables you to adjust the height of the line by using a value listed in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch10table06 Table 10.6]. The value normal means that the the browser's usual methods should be used to calculate the line height; this is the default value. Usually browsers calculate line-height as equal to the font size times 1 or 1.2. A font that is 12pt tall will have a line height of 12pt to 14pt in most browsers.

Value	Effect
normal	Use the default line height.
measurement	Set the line height to a particular value.
multiplier	Set the line height based on the font-size.
percentage	Set the line height based on the font-size.
inherit	Use the value of line-height from the containing box.

A multiplier is a normal number without any units, such as 1.5 or 3, which is multiplied by the font-size value. A multiplier of 1.5 means the same thing as a percentage of 150%, and is also the same as 1.5em.

The value of line-height is inherited from a containing box if the property is set; in most cases, the calculated value is inherited. For example, if the font-size is 18pt and the value of line-height is 200%, the calculated value 36pt will be inherited by children boxes. However, if a multiplier value such as 2 is set, that multiplier is passed on directly, and not the calculated value.

Did you Know? Because the specification allows a browser some latitude in determining the default line height, you may not get identical line spacing across all browsers. You can force a specific line height by setting the line-height property, thus taking the decision out of the hands of the browser's default style sheet.

[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch10ex05 Listing 10.5] is a set of style rules that can be applied to the HTML file in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch10ex03 Listing 10.3] to change the line height of the list items; in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch10fig06 Figure 10.6], this is displayed by a browser. Setting the line-height to a value based on the font-size, such as 2 or 200%, has the effect of spacing out the lines equally, assuming the font-size doesn't change; 200% is double-spacing. To double-space text that contains several different font sizes, you need to use an absolute measurement, such as 32px.

Listing 10.5. Making Space with line-height

body { font-family: Verdana, sans-serif; }<br />li { margin: 0.5em; }<br />h1 { letter-spacing: 0.25em;<br />word-spacing: 0.5em;<br />}<br />li#a { line-height: 1.2; }<br />li#b { line-height: 0.8em; }<br />li#c { line-height: 2; }<br />li#d { line-height: 200%; }<br />

Figure 10.6. Spacing out lines.

[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/images/10fig06_alt.jpg [View full size image]]

File:10fig06.jpg

You can also set the line-height value as part of the font property, which you learned about in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch09.html#ch09 Hour 9]. When setting the font with the font shorthand property, include a slash after the font-size and indicate the desired line-height value. For example, to set a paragraph font that's 12-point Verdana with a line height of 200%, you'd write the following rule:

p { font: 12pt/200% Verdana, sans-serif; }

./ ADD NAME=CH10LEV1SEC4.HTML 

Summary

The foreground color of text can be set with the color property, as you've seen in previous hours. You can set the color value in several ways, including color names, long or short hexadecimal values, and the rgb() function.

Color is a powerful tool for visual communication, but you also need to take care to use it effectively. Consistency and simplicity will help your websites convey information better and produce a more professional look.

Other effects you can apply to your text include decorations such as underlines and strikethroughs using the text-decoration property and changes of case with text-TRansform.

Using the letter-spacing and word-spacing properties, you can fine-tune the display of your text, increasing or decreasing the gaps between letters and words. The white-space property controls both the condensation of whitespace and word wrapping. The line-height property can be used to double-space text or otherwise control the distance between each line.

./ ADD NAME=CH10LEV1SEC5.HTML 

Workshop

The workshop contains a Q&A section, quiz questions, and activities to help reinforce what you've learned in this hour. If you get stuck, the answers to the quiz can be found after the questions.

 Q&A

[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch10qa1q1a1 Q.]	I've heard someone mention "browser-safe colors" before. What is that?
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch10qa1q1 A.]	When web browsers were first created, they couldn't handle the full range of colors available. Instead, they displayed only a limited subset of specific colors216 colors to be precise. Any other colors were displayed poorly, making some backgrounds and images look quite bad. These days, browsers can support a full range of color choices, so the browser-safe color list isn't as important, although you may want to look into it if you are supporting older hardware or software. For more information, see the VisiBone site at http://www.visibone.com/.
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch10qa1q2a2 Q.]	I really want to use text-decoration: blink. Can I?
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch10qa1q2 A.]	No.
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch10qa1q3a3 Q.]	Are you serious?
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch10qa1q3 A.]	Well, if you have to, you can use it. Keep in mind that blinking text is very hard to read and very distracting. Use it only if that's the only way you can get an effect; remember, though, that most browsers don't support it.
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch10qa1q4a4 Q.]	How can I set an exact value for letter-spacing or word-spacing?
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch10qa1q4 A.]	You can't; you can adjust it only from what the browser uses as a default. Fortunately, most browsers use sensible defaults, but there's no way to set an absolute value for letter or word spacing.

Quiz

[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch10qa2q1a1 1.]	Consider the color #FFFF00. How do you write this color in the following ways? # Short hexadecimal RGB percentages RGB values Color names
>	>
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch10qa2q2a2 2.]	You want to transform this text so that the first line is in uppercase, the second line is mixed case but with each letter capitalized, and the third is in lowercase. What CSS rules do you write? <div id="a">CSS is fun.</div><br /><div id="b">I use CSS each day.</div><br /><div id="c">Do you like it too?</div><br />
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch10qa2q3a3 3.]	The default word spacing in a hypothetical browser is 0.5 ems, and you'd like to put a full em between each word. Which of these declarations accomplishes that? # word-spacing: 0.5em; word-spacing: 1em; word-spacing: 200%;
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch10qa2q4a4 4.]	You want to space out each line of text evenly so they are double-spaced, 16-point Arial font. How do you write this with a line-height rule, and how do you write it without using line-height?

Answers

[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch10qa2q1 1.]	Here are the alternate ways to write #FFFF00: # #FF0 rgb(100%, 100%, 0%) rgb(255, 255, 0) yellow
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch10qa2q2 2.]	Here's how you transform that text: #a { text-transform: uppercase; }<br />#b { text-transform: capitalize; }<br />#c { text-transform: lowercase; }<br />
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch10qa2q3 3.]	Declaration (a) produces a total word spacing of 1 em if the browser's default is 0.5 em, but remember that you can't set the exact value. If the browser's default is 0.75 em, (a) results in a gap of 1.25 em, and (b) produces a 1.75 em gap. Percentages, such as (c), aren't valid values for word-spacing.
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch10qa2q4 4.]	Here's one way to write the line-height rule: p { line-height: 200%; }<br /> You could also write the same rule with a line-height value of 2, 2em, or even 32pt. Without using line-height, you'd use the font property: p { font: 16pt/32pt Arial, sans-serif; }<br />

Exercises 

To get your hands dirty with text colors and formats, try these exercises; you'll know whether you've succeeded because you'll be able to see the desired effect.

#

Make a page with headings that contrast in color with the text. What color combinations work best?

1. See whether you can specify each color in more than one way; first try it with words, and then RGB values. Which approach is easier, and which is more flexible?
2. Turn off underlining of links on a page. Have someone else try to use it; is it easier or harder to use? Then try overlines.
3. Convert text to upper- or lowercase, using text-TRansform. In what circumstances would it be easier to simply change the text in the HTML rather than using CSS? You will discover that in some situations, text-TRansform is more convenient, and in others it's easier to just edit the source.

./ ADD NAME=CH11.HTM