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 <i> 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:
< p >Here's some < span style = ”font-style: italic” >italicized text< /span >.< /p >
< p >Here's some < span style = ”font-style: oblique” >oblique text< /span >
(which may look like regular italics in your browser).< /p >
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:
< p >Here's some < span style = ”font-weight: bold” >bold text< /span >.< /p >
< p >Here's some < span style = ”font-weight: bolder” >bolder text< /span >.< /p >
< p >Here's some < span style = ”font-weight: lighter” >lighter text< /span >.< /p >
< p >Here's some < span style = ”font-weight: 700” >bolder text< /span >.< /p >
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:
< p >< span style =” font-family: monospace ”>This is monospaced text.< /span >< /p >
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:
< p >< span style = 'font-variant: small-caps' >This Text Uses Small Caps.< /span >< /p >
Search WWH ::

Custom Search