Formatting Text with HTML and CSS - Web Publishing with HTML and CSS

HTML and CSS Reference

In-Depth Information

Font Properties

When you want to modify the appearance of text, the other major family of properties

you can use is font properties. You can use font properties to modify pretty much any

aspect of the type used to render text in a browser. One of the particularly nice things

about font properties is that they're much more specific than the tags that you've seen

so far.

First, let's look at some of the direct replacements for tags you've already seen. The

font-style property can be used to italicize text. It has three possible values: normal ,

which is the default; italic , which renders the text in the same way as the tag; and

oblique , which in theory is somewhere between italic and normal, and is rendered by

nearly all browsers as regular italics. Here are some examples:

Here's some italicized text.

Here's some oblique text

(which may look like regular italics in your browser).

Now let's look at how you use CSS to create boldfaced text. In the world of HTML, you

have two options: bold and not bold. With CSS, you have (theoretically) many more

options. The reason I say theoretically is that browser support for the wide breadth of

font weights available using CSS can be spotty. To specify that text should be boldface,

the font-weight property is used. Valid values are normal (the default), bold , bolder ,

lighter , and 100 through 900, in units of 100. Here are some examples:

Here's some bold text.

Here's some bolder text.

Here's some lighter text.

Here's some bolder text.

You can also set the typeface for text using the font-family property. In addition, you

can set the specific font for text, but I'm not going to discuss that until later in the lesson.

In the meantime, let's look at how you can set the font to a member of a particular font

family. The specific font will be taken from the user's preferences. The property to mod-

ify is font-family . The possible values are serif , sans-serif , cursive , fantasy , and

monospace . So, if you want to specify that a monospace font should be used with CSS

rather than the <tt> tag, you use the following code:

This is monospaced text.

Now let's look at one capability not available using regular HTML tags. Using the font-

variant property, you can have your text rendered so that lowercase letters are replaced

with larger capital letters. The two values available are normal and small-caps . Here's

an example:

This Text Uses Small Caps.

Search WWH ::

Custom Search

Home