HTML and CSS

Styling Text

Now that you have a taste of what CSS can do, you'll take it further and begin to style your text. Historically, CSS has been used more to style text than just about anything, largely because of good support for much of the text-related styles that were in CSS 1.0. Some new options have appeared since then, giving you even more control over the way you manage text for web documents. The basic principles for how text is styled in CSS come from traditional typography, although limitations based on both CSS and browser support have prevented certain growth in the area of web-based type.

A warning from the start, though: Working with fonts can be complicated. First, you must understand that, in terms of available fonts for text-based type on the Web, there's dependence upon a person's operating system and installed font base. If a specific font is not installed on someone's machine, that person will not be able to view the font. The same limitation existed for presentational HTML, too, and not much has changed since then. Then there is a major browser flaw in font sizing that makes using font sizes a real pain. Over these concerns you are essentially powerless, except in what you can learn in terms of how to manage them. So bear with me through the details, okay?

The good news is that you do have some choice over fonts, and CSS expands the way you use the fonts by being able to add color, weight, height, spacingall kinds of features that add visual interest to the fonts you do choose. As you become more adept with CSS in general, you'll learn to combine graphics and text-based type to come up with increasingly sophisticated type designs.

Within the CSS specification, properties for managing typography are found in two primary places. The first is in font-related properties, which are all specific to the way a font is chosen and then displayed. The second is text-related properties, in which text is further managed, usually without some manipulation to the actual font. Some font features come from the more general visual category of styles and can be used with (but are not limited to) text.

In this tutorial, you'll learn about font and text styles, along with some of the additional style properties that will affect your text but not necessarily be limited to use with text. You'll also learn about additional selector types that have not yet been introduced to you.