- Cascading Style Sheets (CSS): Text
- Text-Related Properties
- The SPAN Tag
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Text-Related Properties
CSS defines a number of different properties for working with text. You have already seen the font-family property that we used in our last example. This property lets you specify a particular font family, either by name (such as Verdana) or by generic type (such as sans-serif).
Property: font-family Values: Name of the font famly, like Verdana or Georgia or One of the following generic names: serif sans-serif cursve fantasy monospace
You can also give a list of values (separated by commas) for font-family. For example:
H1 {
font-family: Verdana, Helvetica, sans-serif
}
In that case, the system would try to use Verdana, or if that's not available, Helvetica; otherwise, it would use whatever sans-serif font is available.
Another useful text-related property is line-height. This property affects the space between lines, also called leading, after the strips of lead used to provide the spaces between lines of metal type.
Property: line-height Values: number default
The line-height is measured from the baseline of one line to the baseline of the next. The special value default will set the line-height to the default of the browser, which is probably about the same as 1.2em.
P {
font-family: Georgia;
font-size: 12px;
line-height: 1.5em;
}
This sets the line-height to 1.5em (see Figure 6). Remember: 1em is the same as the font-size, so 1.5em is one-and-a-half times the body size of the type.
){kind=link}
Figure 6 css5.html: A line-height of 1.5em.
Selectors
So far, we've been using the selector to specify what tag the style will apply to, but the selector can do more than that! You can also use the selector to apply to only some instances of a particular tag.
For example, what if you want every paragraph except the first to have an indent on the first line:
P {
font-family: Georgia;
font-size: 12px;
line-height: 1.5em;
text-indent: 1.5em;
}
The text-indent property indents just the first line of a paragraph. Our P style now has a 1.5em indent for the first paragraph. Now, we add another style with a class selector, like this:
.first {
text-indent: 0;
}
A class selector always starts with a dot (.). Now, you can use the CLASS attribute in your HTML to apply that style in addition to the existing style on the paragraph tag:
<P CLASS="first"> Because the style of art throughout the catalog is consistent, any of the designs may be used together side by side, or superimposed, making the possibilities for personal expression boundless.
The result is shown in Figure 7.
){kind=link}
Figure 7 css6.html: Look Ma! No single-pixel GIFs!
Its potential for simplifying Web sites and reducing bandwidth is truly exciting! It used to be that you needed to trick HTML into indenting your paragraphs and adding space between the lines by using single-pixel transparent GIFs. Now you can do it with style sheets!