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
</code> and <code><nobr></code> 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 <code>color</code> property is the primary method for setting the foreground color. You can set the background color with the <code>background-color</code> property, which is covered in detail next hour.
The foreground <code>color</code> 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 <code>border</code> property, the foreground <code>color</code> will be used.
Specifying Color Values
CSS provides two ways to define a color. The first is to use a color name, such as <code>green</code> or <code>black</code>; 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<code>aqua</code>, <code>black</code>, <code>blue</code>, <code>fuchsia</code>, <code>gray</code>, <code>green</code>, <code>lime</code>, <code>maroon</code>, <code>navy</code>, <code>olive</code>, <code>orange</code>, <code>purple</code>, <code>red</code>, <code>silver</code>, <code>teal</code>, <code>white</code>, and <code>yellow</code>are well-supported by the browsers.
Most browsers accept other color names as well, such as <code>pink</code>, <code>cyan</code>, and <code>violet</code>. 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 <code>20</code> (two sixteens and zero ones), and the number 111 is <code>6F</code> (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:
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
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 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 />
|
The text-transform Property
You can change the case of text from upper- to lowercase, or vice versa, by using the text-transform property. Well, you're actually not changing the text itself, but rather how a CSS-enabled browser displays it. The values you can set for this property are shown in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch10table02 Table 10.2]; the default is none, although if a text-TRansform property is set on the containing box, that value will be inherited.
| 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. |
This property is dependent upon the language and character set being used; if a language doesn't have upper- or lowercase letters, nothing is changed.
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch10ex02 Listing 10.2] is an HTML file with an embedded style sheet that contains text-transform examples.
Listing 10.2. Text Transforms in an Embedded Style Sheet
<!-- 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 />
|
As listed, the style sheet doesn't actually display any transformations because the style rules that use text-TRansform are commented out. This enables you to see the "before" view as shown in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch10fig02 Figure 10.2].
Figure 10.2. Example page before text-TRansform rules are applied. [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/images/10fig02_alt.jpg [View full size image]] File:10fig02.jpg By removing the lines containing the /* and */ markers (but not the rules between them), you can turn the transformations on, and the results are shown in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch10fig03 Figure 10.3]. The style examples used here are commonly found on the Webmany web designers enjoy putting navigation elements in all lowercase or uppercase text, and news sites frequently use all capital letters for sub-headlines and the first line of a story.
Figure 10.3. Example page after text-transform rules are applied. [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/images/10fig03_alt.jpg [View full size image]] File:10fig03.jpg
| 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:
1. |
Download a copy of the HTML file in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch10ex02 Listing 10.2] from the book's website.
|
2. |
View the untransformed text in your web browser.
|
3. |
Edit the file to remove the comments and reload, noting the changes.
|
| > |
> |
4. |
Start changing the style rules. Make the headers all follow text-transform: capitalize. Change the navigation to uppercase.
|
5. |
Capitalize everything except the first letter of every #lion paragraph with rules that use :first-letter (from [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch05.html#ch05 Hour 5], "Selectors") like this: #lion { text-transform: uppercase; }<br />#lion p:first-letter { text-transform: lowercase; }<br /> |
6. |
Get creative! View your page in your web browser to see how text-transform works. How can you incorporate text-transform into your own site designs?
|
|
./ ADD NAME=CH10LEV1SEC3.HTML
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.
| Value |
Effect |
normal |
Don't insert extra spacing between letters. |
measurement |
Insert extra letter spacing. |
negative measurement |
Reduce spacing between letters. |
inherit |
Use the value of letter-spacing from the containing box. |
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.
| Value |
Effect |
normal |
Don't insert extra spacing between words. |
measurement |
Insert extra word spacing. |
negative measurement |
Reduce spacing between words. |
inherit |
Use the value of word-spacing from the containing box. |
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
<!-- spacing-10.3.html --><br /><html><br /><head><br /><title>Tips on Color Use</title><br /><style type="text/css"><br />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 { word-spacing: 1.5em; }<br />li#b { letter-spacing: 8px; }<br />li#c { letter-spacing: -0.1em; }<br />li#d { word-spacing: -0.3em; }<br /></style><br /></head><br /><body><br /><h1>Tips on Color Use</h1><br /><ul><br /><li id="a"><br />Use colors to visually emphasize important differences<br />among types of content. The presentation of your<br />content should be derived from the meaning of that<br />information. Color your navigation bar differently<br />from your main content. </li><br /><li id="b"><br />Change colors for a reason, not on a whim. I've seen<br />many websites where the developers appear to have<br />discovered color just the day before and changed the<br />color for no reason. Be able to justify your color<br />choices.</li><br /><li id="c"><br />Bright colors draw attention; faded colors hide<br />unimportant material. As an example, if some content<br />is more important or changes often, give it a<br />vibrant, bright color, such as yellow or red, to make<br />it stand out.</li><br /><li id="d"><br />Too many colors will make your page seem confusing<br />and unprofessional; a restricted set of hues often<br />works better. If you don't have any experience with<br />graphic design, pick up a good book on color and<br />design, and notice that many great designs have a<br />limited palette.</li><br /></ul><br /></body><br /></html><br />
|
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].
Figure 10.4. Letter and word spacing can make a difference. [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.
| Value |
Effect |
normal |
Do normal word wrapping and whitespace condensing. |
nowrap |
Condense whitespace, but don't wrap lines. |
pre |
Don't condense whitespace, and wrap lines as in the source markup. |
pre-line |
Don't condense whitespace, and wrap lines where there are line breaks in the source or at the end of the line. |
pre-wrap |
Condense whitespace, and wrap lines where there are line breaks in the source or at the end of a line. |
inherit |
Use the value of white-space from the containing box. |
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 </code> tag in HTML, except that <code><pre></code> also sets the font to a monospace font. The <code>white-space: pre</code> declaration doesn't change the <code>font-family</code> unless you explicitly write a rule to that effect.
<div>Watch Out!
The <code>pre-line</code> and <code>pre-wrap</code> values were introduced in the CSS 2.1 specification and aren't supported uniformly by the browsers, with the exception of Operawhich recognizes <code>pre-wrap</code> (but not <code>pre-line</code>).</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 <code>white-space</code> declarations.
Listing 10.4. A Demonstration of <code>white-space</code> 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 <code>nowrap</code> 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 <code>white-space: pre</code> to display<br />code samples. Unlike <code><pre></code>, 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 />
|
