HTML and CSS Reference
In-Depth Information
Chapter 4
Styling Text
Text is the most important element in the vast majority of sites. So, presenting text in a visually pleasing manner
is an important part of your design. Not only should the text look good, it must be easy to read—the font needs to
be large enough, but not too large, and the text shouldn't look too dense or bunched up. CSS has many properties
that affect the appearance of text. Most are very easy to use, and they have an immediate impact on the overall
design of a site.
In this chapter, you'll learn about the following:
•
Defining which fonts are used for text
•
Understanding the different methods to specify font size
•
Adding or removing italic and bold face
•
Changing the vertical space between lines of text
•
Changing the color of text
•
Automatically transforming lowercase to uppercase and vice versa
•
Indenting the first line of paragraphs
•
Increasing and decreasing the horizontal space between words and letters
•
Controlling whitespace and line wrapping
•
Adding shadows to text
Selecting and Adjusting Fonts
By default, most browsers display text in Times New Roman, Times, or a similar font. The actual font depends not
only on the browser, but also on what's available on the visitor's computer. You'll learn in the next chapter how to
increase the range of fonts that can be used in your designs, but for the time being let's concentrate on the basics
of styling text in CSS.
The first step is to select the font you want to use, and then to make any adjustments, such as changing its
size and whether it's rendered in bold, italic, or small caps. These features are controlled by the properties listed
in Table
4-1
. Strictly speaking,
line-height
isn't a font property, but I've included it because it's an integral part
of the shorthand
font
property.
