Introduction

Before Cascading Style Sheets (CSS) came along, web developers used font tags to set the color, size, and style of text on different parts of a web page:

<font face="Verdana, Arial" size="+1" color="blue">Hello, 
World!</font>

Although this method is effective for changing the appearance of type, using it to manipulate an entire web site containing multiple font tags results in time-consuming updates, adds to the overall file size of the web document, and increases the likelihood that errors will occur in the markup.

CSS helps to eliminate these design and maintenance problems. We can solve this problem in many ways, such as placing the content in a p element:

<p>Hello, World!</p>

Then use CSS to dictate the style of the document by placing this CSS block in the head of the document:

<style type="text/css" media="all">
 p {
  color: blue;
  font-size: small;
  font-family: Verdana, Arial, sans-serif;
 }
</style>

Now the document's structure and its visual presentation are separated. Because they are in separate areas, the process of editing and maintaining a web site's design including typography is simplified immensely.

It is important to be able to read the contents of a web page online, and CSS enables you to accomplish myriad tasks for controlling web page typography. In addition to setting the color, style, and size of fonts, this chapter also covers techniques for setting initial caps, creating visually compelling pullquotes, modifying leading, and more.