Westciv Logo

These materials are copyright Western Civilisation Pty Ltd.

www.westciv.com

They are brought to you courtesy of Style Master CSS Editor and Westciv's standards based web development courses.

Please see our website for detailed copyright information or contact us [email protected].

complete css guide

Text style properties

The text style properties affect how text appears on a page. While appearance based HTML gave you some control over font, font color, font size and font weight, CSS extended these, and gave much more sophisticated control.

CSS2 revision 1 provides the following properties:

color

Browser support

Get browser support information for color in the downloadable version of this guide or our browser support tables.

What it does

This property sets the foreground color of an element. Essentially this means the text color.

Possible values

The color property, not surprisingly, takes color values. For a detailed description of color values, see our section on values.

Default values

There is no specified default color value. The color chosen when this property is not set is dependent on the browser. The value that a browser uses by default is likely to be black (#000), but remember, most browsers allow users to specify default text characteristics, and it is the user's preference which may well be used as the default value for color.

Is it inherited?

Child elements inherit the color of their parent element.

Hints and suggestions

It is recommended that if you set a background-color for an element, you should also set its color. This ensures that there will not be an illegible clash between a text color set by user preferences against a background color set in your style sheet.

Non US speakers of English please note that colour is not an accepted variant spelling for the purposes of CSS syntax.

font-weight

Browser support

Get browser support information for font-weight in the downloadable version of this guide or our browser support tables.

What it does

The weight of a font is how bold it is. The font-weight property affects how heavily text is drawn on a page.

Possible values

font-weight may take two kinds of values, keywords and numerical values.

You may use the following absolute keywords: normal, bold,

or the following relative keywords: bolder, lighter.

bolder specifies that the text should be one degree bolder than the text of the parent element.

lighter specifies that the text should be one degree lighter than the text of the parent element.

font-weight can also be specified using numerical values: 100, 200, 300, 400, 500, 600, 700, 800, 900.

Each value is one degree bolder than the previous. normal is equivalent to 400. bold is equivalent to 700.

Default values

By default, the font-weight of an element is normal.

Is it inherited?

Elements have the same absolute font-weight as their parents. This means an element inherits the numerical value of its parent, or the keyword values of normal or bold. If the parent element's font weight is a relative value, say bolder, the child will be drawn with the computed font-weight of its parent.

Hints and suggestions

As you can see from the browser support information, while font-weight has largely been supported by browsers for a long time, particular implementations have varied. It is safe to use the value bold to create text that will appear bold, and normal to create text that will appear not bold. Beyond this though, there will always be some degree of variation in how values are actually drawn in user agents.

font-family

Browser support

Get browser support information for font-family in the downloadable version of this guide or our browser support tables.

What it does

If you are familiar with the <font face="font name"> element in HTML, you'll find that the font-family property works similarly. This property specifies a hierarchical list of preferred fonts that a browser should use to draw the element.

A browser will use the first font in the list which is installed on the system it is running on.

Because none of the desired fonts may be on the system a browser is running on, CSS introduces the idea of a font family. A font family is a generic name for a type of font. The specified font families are:

CSS2 introduced the concept of system fonts. The font-family in CSS2 can be specified as one of several system fonts, that is one of the fonts that the system uses for its major components, such as menu items and window titles. When a system font is chosen, the font family, size, weight and style that the system uses for this kind of item (for example for menu items) are all used.

Possible values

The font-family property is a list of font names and font family names. Each item in the list is separated by a comma.

Font names should be capitalized. So for example, write Ariel, not ariel. When the name of a font is more than one word, it should be quoted, as in "Times New Roman".

System fonts can be one of the following

Note that when one of these values is used, this affects the choice of font, along with the style, size and weight of the font. If these values are also set, they are overridden by the style, size and weight that the system uses for drawing the chosen element.

Default values

There is no specified default value for font-family. It is up to browsers to choose a default font. As with other properties, users can often specify their own default font in a browser.

Is it inherited?

An element will have the same font as its parent element, unless it has a font-family property of its own.

Hints and suggestions

The font-family property helps you go a long way to ensuring that your text looks a lot like what you want it to on various platforms, as each operating system usually has a default set of fonts, which largely differ from those of other users. By using a list of fonts, you can provide alternatives for the major operating systems. It is recommended that you choose a generic font family as the last option in the font-family list. This ensures some semblance of your design being displayed in the reader's page.

Keep in mind that there are a number of free fonts designed specifically for onscreen reading that are becoming widely distributed. These include Verdana, Minion Web, Georgia and others. These might be good options.

font-size

Browser support

Get browser support information for font-size in the downloadable version of this guide or our browser support tables.

What it does

The font-size property lets you specify how large text appears on a web page. With HTML, you are restricted to 7 relative sizes that have no relationship with traditional type measurements such as points, ems, exs and picas. Nor do HTML text sizes even have any relationship with pixels.

CSS allows you to specify the size of font in any of these measures, and in a number of other ways.

Possible values

Length values

The font-size property can specify the size of a text element in several units. You can specify font sizes in the following units:

In our section on values, we cover each of these in some detail.

Keyword values

In addition, font-size can be specified using both relative and absolute keywords.

The following are the relative keywords: larger and smaller

larger specifies a font-size one degree larger than the parent element.

smaller specifies a degree smaller than the parent element.

As with all keyword values the exact appearance is determined by the browser, and the same text may appear differently in different browsers.

The absolute keywords are:

Again, it is up to the browser to determine the exact appearance of text that has a keyword font-size property applied to it.

Default values

By default, text appears with a font-size of medium. Keep in mind, it is a matter for browsers to determine what this size in fact appears like.

Is it inherited?

Yes - the size of text is the same as that of the element which contains it, unless a font-size is applied to it.

Hints and suggestions

The choice of how to specify font-size is quite tricky. Note that specifying size in absolute values such as points and pixels is very problematic. 9pt text on a Windows computer might look acceptable, but may be illegible on a Macintosh, due to their differing logical resolutions. Rather than go into detail here, you might like to take a look at this discussion of text sizes by a renowned web page developer, Tod Fahrner.

Note that the keyword medium will not necessarily be the same as the default text size.

font-variant

Browser support

Get browser support information for font-variant in the downloadable version of this guide or our browser support tables.

What it does

The font-variant property lets you specify that text should appear in small capitals.

Possible values

font-variant can take the value of normal or small-caps.

normal specifies that text should appear using capital or lowercase letters as it appears in the source.

small-caps specifies that lowercase letters (but not capitals) should appear as small capital letters. These are capital letters that have more or less the same size as the lowercase letters. Letters which are capitalized in the source appear as they would normally.

Default values

By default, text appears with a font-variant of normal.

Is it inherited?

The variant of text is inherited from a parent element.

font-style

Browser support

Get browser support information for font-style in the downloadable version of this guide or our browser support tables.

What it does

In traditional typography, there are several different styles of font. With CSS, you can specify the style of the font that is to be applied to an element, using the font-style property.

The three styles of font supported by CSS are normal, italic and oblique. Without going into any detail, normal font is the standard form of a font, referred to as "roman" in traditional typographic terminology. italic and oblique font-styles will in all likelihood appear the same. It is beyond the scope of this discussion to go into detail about why, and what exactly the difference is.

Possible values

The font-style property can take one of three values: normal, italic and oblique.

Default values

If not otherwise specified, the font-style of an element is normal.

Is it inherited?

The font-style of an element is that of its parent element, unless a font-style is specified for the element.

Hints and suggestions

You probably think of italic as a style (or cue), as this is the way that desktop publishing categorizes the effect. CSS in part uses more traditional typographical terminology and concepts, in addition to DTP. Italic is often thought of in the same breath as underlining, and other visual effects. The text-decoration property, discussed below, provides control over a number of these kinds of effect.

text-decoration

Browser support

Get browser support information for text-decoration in the downloadable version of this guide or our browser support tables.

What it does

The text-decoration property enables you to specify a number of effects that might be thought of as styles. With text-decoration you can apply the following styles to text: none, underline, overline, line-through, blink.

An element can have either a text-decoration of none, or any number of the other styles.

Possible values

text-decoration can be either none, or a list of one or more of underline, overline, line-through, blink. If there is more than one value in the list, values are separated by spaces.

Default values

By default, the text-decoration of an element is none.

Is it inherited?

Technically, text-decoration is not inherited. In practice, it is.

Confused? If you aren't interested, assume that text-decoration is inherited. If you are interested in what I mean, read on.

text-decoration spans an entire element, and so affects child elements. Even though they don't strictly inherit the property, they will be affected by it.

The value underline for the property text-decoration has a special quality which makes it different to the other values for this property. When a parent element has the value underline, children of that parent should also be underlined, even when those children are given a text-decoration value of none.

Also when a child element inherits underline and the child is a different color from its parent then the underlining should be the same color as the parent, regardless of the color of the child.

Hints and suggestions

Many of what we might think of as styles (thinking in word processing terms) are lumped into this property. If you are looking for other related styles, you might look at font-weight for bold, font-style for italic, and font-family to specify the font in which an element appears.

text-transform

Browser support

Get browser support information for this feature in the downloadable version of this guide or our browser support tables.

What it does

text-transform allows you to specify the capitalization of text. There are three types of capitalization, and as well you can specify that an element not be affected by text transformation.

Possible values

The text-transform property allows you to ensure that an element conforms to a specific type of capitalization. The three types of capitalization supported are

Regardless of the actual capitalization of the text in the source, the browser transforms the text to conform to the desired capitalization.

Alternatively, you can specify a text-transform of none. This ensures that inherited text-transform values have no effect.

Default values

By default, an element has a text-transform of none.

Is it inherited?

Elements have the text-transform value of their parent element.

Hints and suggestions

Many properties, among them text-transform, have a possible value of none. These values exist to let you override the effect of inherited values.