Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > CSS

  • Print
  • + Share This
  • 💬 Discuss

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.

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.

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!

  • + Share This
  • 🔖 Save To Your Account
creative html design.2, 2nd Edition

Like this article? We recommend

creative html design.2, 2nd Edition

Discussions

comments powered by Disqus