cascading style sheets tutorial

Text Style

The text style properties affect how text appears on a page. While HTML gives you some control over font, font color, font size and font weight, CSS extends these, and gives further control beyond that provided by HTML.

CSS provides the following properties:

color
What it does

This property sets the foreground color of an element, essentially 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. It is dependent on the browser. The value that a browser uses by default is almost certainly black, but remember, most browsers allow users to specify default text characteristics.

Is it inherited?

Child elements inherit the color of their parent elements. Remember, inherited properties can be overridden.

Hints and suggestions

Non US speakers of English please note that Colour is not an accepted variant spelling.

font-weight
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, or numerical values.

You may use the following keywords: normal, bold, bolder , lighter.
bolder specifies that the text should be one degree bolder than the surrounding text (the parent element).
lighter specifies that the text should be one degree lighter than the surrounding text.

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. That is, an element inherits the numerical value of its parent, not the relative value of bolder or lighter.

Hints and suggestions

Current versions of major browsers only display two weights, normal and bold. All values are translated into one of these. For example, 100 to 600 are usually drawn as normal weight, while 700 to 900 are drawn as bold.

font-family
What it does

If you are familiar with the <font face="font name"> tag in HTML, you'll find that the font-family property works similarly. This property specifies a 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:

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.

When the name of a font is more than one word, it should be quoted, as in "Times New Roman" .

Default Values

There is no specified default value for font-family. It is up to browsers to choose a default font. Usually this is Times, however, as with other properties, users can often specify their 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 font families, you can provide alternatives for the major operating systems.

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.

It is recommended that you choose 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.

font-size
What it does

The font-size property let's 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 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-sizes 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 surrounding text. smaller specifies a degree smaller than the surrounding text. 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 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?

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

Hints and suggestions

The choice of how to specify font-sizes is quite tricky. Rather than go into detail here, you might like to take a look at this discussion of text sizes by renowned web page developer.

font-style
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 next, provides control over a number of these kinds of effect.

text-decoration
What it does

The text decoration property enables you to specify a number of what might be thought of as styles. With CSS 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 children elements. Even though they don't inherit the property, they are affected by it. Enough already.

Hints and suggestions

May 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
What it does

The 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, the browser transforms the text to conform to the desired capitalization.

Alternatively, you can specify a text-transform of none. This ensured 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.