User:Bartlett/10
Hour 10. Text Colors and Effects
[wax ka badal]What You'll Learn in This Hour:
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.
./ ADD NAME=CH10LEV1SEC2.HTML Special Text Effects[wax ka badal]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.
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 tag, people will try to click it. And they'll get annoyed when it doesn't click. Therefore, you should avoid using underlines nearly all the time. If you need to call attention to something, use the or tags, font effects such as font-weight or font-style, or colors. For more about styling links, see [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch12.html#ch12 Hour 12], "Styling Links."
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch10ex01 Listing 10.1] is an HTML file with an embedded style sheet that demonstrates text-decoration in action; you can see the results displayed in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch10fig01 Figure 10.1].
Listing 10.1. Text Decorations in an Embedded Style Sheet
<!-- decorate-10.1.html --><br /><html><br /><head><br /><title>I love to decorate</title><br /><style type="text/css"><br />body { font-family: Verdana, sans-serif; }<br />h1 em { text-decoration: underline; }<br />.nav { border: 0.3em solid black; }<br />.nav a:link, .nav a:visited<br />{ text-decoration: none; }<br />.oops { text-decoration: line-through; }<br />.eg { border: 1px solid black;<br />margin: 2em; padding: 1em; }<br />#a { text-decoration: underline; }<br />#b { text-decoration: line-through; }<br />#c { text-decoration: overline; }<br />#d { text-decoration: blink; }<br /></style><br /></head><br /><body><br /><table class="nav" border="0" align="right"><br /><tr><th><a href="home.html">Home</a></th></tr><br /><tr><th><a href="info.html">Info</a></th></tr><br /><tr><th><a href="help.html">Help</a></th></tr><br /><tr><th><a href="news.html">News</a></th></tr><br /></table><br /><h1>I <em>love</em> to decorate!</h1><br /><p> I think that decorating<br /><span class="oops">cakes</span>HTML is lots<br />of fun. Here are some of my favorites: </p><br /><div class="eg"><br /><p id="a">Underlined text (don't you want to<br />click here?) </p><br /><p id="b">Line-through text</p><br /><p id="c">Overlined text</p><br /><p id="d"> Blinking text (this is hard to show<br />in print!) </p><br /></div><br /></body><br /></html><br />Value
|
Effect
| capitalize
|
Capitalizes the first letter of each word.
| lowercase
|
Changes all uppercase letters to lowercase.
| uppercase
|
Changes all lowercase letters to uppercase.
| none
|
Doesn't change anything.
| inherit
|
Uses the value on the containing box.
| <!-- transform-10.2.html --><br /><html><br /><head><br /><title>Text Transformations</title><br /><style type="text/css"><br />body { font-family: Verdana, sans-serif; }<br />div.eg { margin: 1em; padding: 1em;<br />font-family: Arial, sans-serif;<br />border: 1px solid black; }<br />/*<br />#nav { text-transform: lowercase; }<br />#header h3 { text-transform: capitalize; }<br />#header h4 { text-transform: uppercase; }<br />#lion p:first-child:first-line<br />{ text-transform: uppercase; }<br />*/<br /></style><br /></head><br /><body><br /><h3>Navigation Bar:</h3><br /><div class="eg" id="nav"><br /><a href="index.html">Teach Yourself CSS</a> ·<br /><a href="about.html">About</a> ·<br /><a href="author.html">Author</a> ·<br /><a href="downloads.html">Downloads</a> ·<br /><a href="contact.html">Contact</a><br /></div><br /><h3>Subheading:</h3><br /><div class="eg" id="header"><br /><h3>george l. mountainlion</h3><br /><h4>Born February 1952<br>Died March 8, 1955</h4><br /></div><br /><h3>First Line:</h3><br /><div class="eg" id="lion"><br /><p>I freely give all signs and sounds of nature I<br />have known to those who have the grace to enjoy<br />not man-made materialism but God-made beauty.</p><br /><p>The magnificent Arizona sunsets I have watched<br />from my enclosure, I bequeath to all who see<br />not only with their eyes but with their hearts.</p><br /></div><br /></body><br /></html><br />Try it Yourself: Transform Text to Uppercase and Lowercase
| It's one thing to look at a pair of screenshots, but another to actually see the effects of style rules yourself. Try out text-transform by doing the following steps:
The display characteristics of the text can be controlled by a number of properties that affect the spaces between characters and words. These properties are less useful than many others, such as the font properties, but if you ever need to fine-tune your text display, these are the properties you will use. The letter-spacing Property All browsers use default spacing between letters; if there wasn't such a space, the letters would touch up against each other and would be nearly impossible to read. The letter-spacing property lets you adjust this space by increasing or decreasing the value of the default spacing. Values for letter-spacing are listed in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch10table03 Table 10.3]; the default value is normal. If the letter-spacing property is set on the containing box, the value is inherited.
Did you Know?
In typography, the space between letters is known as the kerning. Professionally typeset text often contains very subtle but important kerning effects. For example, the letters in most logos are not evenly spaced; varying the kerning can make text look a lot better. Usually this doesn't matter too much on the Web, but sometimes it is vitally important, especially to professional typesetters.
The text-align property can also affect the letter-spacing; if text-align is set to justify, the browser automatically adjusts the space between letters so that the text can be justified. If the letter-spacing property is set to a measurement, such as 0.1em or 2px, the browser isn't allowed to change that space, even if it is justifying text. The word-spacing Property The word-spacing property is similar to the letter-spacing property, except, of course, that it controls the space between words. Browsers convert any whitespace (spaces, tabs, line breaks) to a single space and then display that space as a gap between words. The size of the space depends on the browser and the font; the word-spacing property adjusts from that initial size. Values for word-spacing are shown in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch10table04 Table 10.4]. If there is a value on a containing box, that will be inherited; otherwise, the default value is normal. Like letter-spacing, if a word-spacing value is set, the browser is not allowed to change the spacing even when the text-align value is justify.
Keep in mind that both letter-spacing and word-spacing add or subtract from the default browser spacing; they don't set it to that value. So if a browser normally has a space of 0.5 em between words, a word-spacing value of 0.3em will make the total gap 0.8 em, not 0.3 em. Examples of letter-spacing and word-spacing rules are shown in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch10ex03 Listing 10.3]. Listing 10.3. Styles Affecting Letter and Word Spacing
Each list item in this example has a different style for the word or letter spacing but the same font size, as shown in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch10fig04 Figure 10.4]. [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/images/10fig04_alt.jpg [View full size image]] File:10fig04.jpg The white-space Property When displaying a web page, browsers condense all whitespace in the source and consider it as if there's only one space. This is whitespace condensation. If the content exceeds the width of the box allocated to that content, the browser simply moves down to the next line and continues with the rest of the text. This is called word wrapping because the new lines occur immediately before a new word. The white-space property enables you to control both the condensation of whitespace and the word wrapping by setting the values shown in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch10table05 Table 10.5]. The value of this property is inherited if it is set on a containing box; otherwise the default is normal.
A value of nowrap means that the text won't have automatic lines inserted, and that can lead very long lines that force the browser to display horizontal scroll bars. The nowrap value is similar to the old <nobr> element, which was a nonstandard HTML tag introduced by Netscape to prevent lines from breaking in the wrong place. The <nobr> tag was never adopted as an official part of the HTML standard; if you need that same effect, use a white-space: nowrap rule instead. The value pre produces an effect quite similar to the</tt> tag in HTML, except that <tt><pre></tt> also sets the font to a monospace font. The <tt>white-space: pre</tt> declaration doesn't change the <tt>font-family</tt> unless you explicitly write a rule to that effect.
<div>Watch Out!
The <tt>pre-line</tt> and <tt>pre-wrap</tt> values were introduced in the CSS 2.1 specification and aren't supported uniformly by the browsers, with the exception of Operawhich recognizes <tt>pre-wrap</tt> (but not <tt>pre-line</tt>).</div>
The HTML file in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch10ex04 Listing 10.4] includes an embedded style sheet with <tt>white-space</tt> declarations.
Listing 10.4. A Demonstration of <tt>white-space</tt> Values
{| cellspacing="0" cellpadding="5" border="1"
|-
| <div><pre><!-- white-space-10.4.html --><br /><html><br /><head><br /><title>White-Space in Action</title><br /><style type="text/css"><br />h1 { font-family: Verdana, sans-serif; }<br />h2 { font-family: "Courier New", monospace; }<br />p#a { white-space: nowrap; }<br />p#b { white-space: pre;<br />font-family: Verdana, sans-serif; }<br /></style><br /></head><br /><body><br /><h1>White-Space in Action</h1><br /><h2>nowrap</h2><br /><p id="a">A value of <tt>nowrap</tt> means that the<br />text won't have automatic lines inserted, and that<br />can lead very long lines that force the browser<br />to display horizontal scroll bars. </p><br /><h2>pre</h2><br /><p>You can use <tt>white-space: pre</tt> to display<br />code samples. Unlike <tt><pre></tt>, the font<br />isn't automatically monospaced.<p><br /><p id="b"><html><br /><head><br /><title>Simple HTML Page</title><br /></head><br /><body><br /><h1>Simple HTML Page</h1><br /><p>This is a basic HTML web page.</p><br /></body><br /></html></p><br /></body><br /></html><br /> |
File:10fig01.jpg
[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.
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.
[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 /> |
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
[wax ka badal]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
[wax ka badal]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
|
| > | > |
| [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;
|
| [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
|
| [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.
- 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?
- 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.
- 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