| Previous | Table of Contents | Next |
In this lesson, you learn other ways to modify the appearance of the text in your web pages.
The last lesson covered the first of the text attribute properties defined by the CSS1 standard: font-weight. This lesson covers the other three that provide many ways to make your documents more attractive and readable.
Unfortunately, as stated in Lesson 9, some of the text attribute functions defined in the style sheet standard are not yet supported by the Internet Explorer 3.0 browser.
The font-style property allows you to specify the use of different typestyles that alter the appearance of your fonts. Unlike font-weight, this property is not quantitative. Its values function as toggles that turn the desired effect on and off as needed.
The CSS1 standard defines four values for use with the font-style property:
An oblique font is, in appearance, synonymous with an italic. Some font families use the word oblique for their slanted variants, but most use italic. The CSS1 standard calls for the substitution of an oblique when an italic is not found. As with the bold font-weight, an italic font will be approximated by the browser if neither an italic or an oblique variant is found. (See Lesson 9 for a discussion of font approximation.)
The italic fonts simulated by a software application are worse than the boldface ones and should be avoided, if possible. In Figure 10.1, you can easily see that a true italic, like that of Times New Roman, is a completely different design, whereas the simulated Impact italic is simply slanted to the right.
)
Figure 10.1 Simulated italics
simply slant the existing font, whereas a true italic has a different,
almost calligraphic style.
Of the six fonts native to Internet Explorer 3.0, all but Impact and Comic Sans MS have Italic and Bold Italic variants.
Small caps refers to an alternative alphabet that uses characters that are uppercase in design but lowercase in size, as shown in Figure 10.2. They are typically used in situations where full-sized caps would be inappropriately large, such as when mixed with normal text.
)
Figure 10.2 Small caps are
effectively used in places where uppercase text would be intrusive.
The standard allows for a browser to substitute an uppercase alphabet at a smaller size for a true small caps variant, which is rare, especially in TrueType fonts. A software interpolation of this type often is acceptable because no change is being made to the appearance of the font. In some cases, however, simulated small caps can appear too light when mixed with text using the same typeface at normal size.
You can assign multiple values to the font-style property that activate two options for the same block of text. The small-caps value can be combined with either italic or oblique. Multiple values can be specified in any order, with only a space between them, as shown in the first rule below:
){kind=link}
){kind=link}
H1 {font-style: italic small-caps}
H1 SPAN {font-style: italic}
Explorer Support Internet Explorer 3.0 only supports the normal and italic values for the font-style property. It ignores any other specified values.
Please note that when the font-style property is inherited, the entire property is passed down from the parent element to the child, but not the individual values. If a parent element is assigned both the italic and the small-caps values, as shown in the example for the H1 selector, the text within the <SPAN> tags only displays in italics. The entire property is overridden by the declaration assigned to the H1 SPAN selector, and the small-caps value is not inherited.
The text-decoration property allows you to apply certain special effects to a font. As with the font-style property, the values are toggles and can only be turned on or off.
The effects include:
Explorer Support Internet Explorer 3.0 only supports the underline and line-through values for the text-decoration property. It ignores any other specified values.
The effects applied by the text-decoration property (unlike those of the font-weight and font-style properties) are always created in the browser and can be applied to any font without concern for the existence of typestyle variants. Because of this, the appearance of text with these attributes can vary widely. Some fonts, especially decorative ones like cursives and scripts, may look absurd when underlined. If you are using fonts other than those that are native to Internet Explorer 3.0, be sure to view the results of your efforts carefully.
text-decoration values are not inherited in the same way as those of other properties. If a parent element is underlined, the child elements enclosed within it will be underlined as well. If, however, the line-through value is then applied to one of the child elements, the inherited property will not be overridden. The resulting text will have an underline as well as a line-through.
You can achieve this same effect by applying the same property to a single selector twice, with different values. For example, the appearance of <P> text in the Internet Explorer using the following rules:
BODY {text-decoration: underline}
P {text-decoration: line-through}
would be the same as when using this rule:
P {text-decoration: underline;
text-decoration: line-through}
The only way to remove a parent element’s text-decoration value from a child element is to explicitly apply the none value to the child.
This is an odd situation that appears to be the result of a somewhat ambiguous passage in the CSS1 standard. Because the underline value is likely to be the only one employed by most users of the text-decoration property, no great problems should result.
The text-transform property, which is not yet supported by Internet Explorer 3.0, allows the use of styles to modify the case of selected text. This can be a useful tool for web designers who must deal with imported text using tools that lack a case changing function.
Accepted values are as follows:
The capitalize value changes the first letter of each word in the selected text block to uppercase. The uppercase and lowercase values change the case of the entire word. The values are notated as in the following example:
H1 {text-transform: uppercase}
text-transform is an inherited property, and it is easy to see how this could lead to problems in complex HTML documents. Applying a value to an HTML tag that has many child elements could require more effort to reset the property to none in all the right places than simply retyping the text.
In this lesson, you learned how to apply special attributes to alter the appearance of your text. In the next lesson, you learn how to use margin properties to precisely place text elements on your web pages.
 |
 |
 |