CSS:Getting Started:Text styles

From MDC

This page gives more examples of text styles.

You modify your sample stylesheet to use different fonts.

[edit] Information: Text styles

CSS has several properties for styling text.

There is a convenient shorthand property, font, that you can use to specify serveral things at once—for example:

• Bold, italic, and small-caps (small capitals)
• The size
• The line height
• The font face

p {font: italic 75%/125% "Comic Sans MS", cursive;}

[edit] Font faces

You cannot predict what fonts the readers of your document will have. So when you specify font faces, it is a good idea to give a list of alternatives in order of preference.

End the list with one of the built-in default faces: serif, sans-serif, cursive, fantasy or monospace. (Some of these match settings in your browser's Options.)

If the face does not support some features in the document, then the browser can substitute a different face. For example, the document might contain special characters that the font does not support. If the browser can find another font that has those characters, then it will use the other font.

To specify a font face on its own, use the font-family property.

[edit] Font sizes

Readers using Mozilla browsers can set the default font sizes in Options and change the text size while they read a page, so it makes good sense for you to use relative sizes wherever you can.

You can use some built-in values for font sizes, like small, medium and large. You can also use values relative to the font size of the parent element, like: smaller, larger, 150% or 1.5.

If necessary you can specify an actual size, like: 14px (14 pixels) for a display device or 14pt (14 points) for a printer. This size is nominally the width of a letter m, but fonts vary in the way the size you see relates to the size you specify.

To specify a font size on its own, use the font-size property.

[edit] Line height

The line height specifies the spacing between lines. If your document has long paragraphs with many lines, a larger than normal spacing makes it easier to read, especially if the font size is small.

To specify a line height on its own, use the line-height property.

[edit] Decoration

The separate text-decoration property can specify other styles, like underline or line-through. You can set it to none to explicitly remove any decoration.

[edit] Other properties

To specify italic on its own, use font-style: italic;
To specify bold on its own, use font-weight: bold;
To specify small capitals on its own, use font-variant: small-caps;

To turn any of these off individually, you can specify the value normal or inherit.

[edit] Action: Specifying fonts

For a simple document, you can set the font of the BODY element and the rest of the document inherits the settings.

Edit your CSS file. Add this rule to change the font throughout. The top of the CSS file is a logical place for it, but it has the same effect wherever you put it:

body {font: 16px "Comic Sans MS", cursive;}

Add a comment explaining the rule, and add white space to make it match your preferred layout.

Refresh your browser to see the effect. If your system has Comic Sans MS, or another cursive font that does not support italic, then your browser chooses a different font face for the italic text in the first line:

From your browser's menu bar, choose View – Text Size – Increase. Even though you specified 16 pixels in the style, a user reading the document can change the size.

[edit] What next?

Your sample document already uses several named colors. The next page lists the names of standard colors and explains how you can specify others: Color