Webwork
/
Text Formatting

Default browser font treatments are usually purely functional and not intended to be aesthetically inspiring or even pleasing. Almost no websites that you visit leave text at its default settings. Since text formatting is so important, there is a large collection of CSS property and value options to improve the appearance of text.

color: #??????

As with other style tags, text styles can be placed in one of three locations.

In an external CSS document (the preferred placement):

Source:
<link rel="stylesheet" href="webworkdemo.css" type="text/css" />
External CSS:
body
{
    color: #ff0000;
}
Web page:

This text is red.

In a style tag in the head of the document:

Source:
<style type="text/css" >
body
{
    color: #ff0000;
}
</style>
Web page:

This text is red.

Inline:

Source:
<p style="color: #ff0000">
This text is red.
</p>
Web page:

This text is red.

Note that the color property (just the word color, by itself) always refers to text. To change the color of other elements, you would use background-color: #ff0000, border-color: #ff0000, etc.

text-align: left (default) / center / right

Source:
<p style="text-align: center">This text is aligned center.</p>
Web page:
This text is aligned center.

text-decoration: none / underline / line-through

Source:
<p style="text-decoration: line-through">This text is lined through.</p>
Web page:
This text is lined through.

Text-decoration: none is frequently used to turn off the default underlining of text links.

Text-decoration: underline should not be used to emphasize text or to indicate titles because it makes the text look like a link which confuses viewers.

text-transform: uppercase / lowercase / capitalize

Source:
<p style="text-transform: uppercase">This text is transformed to uppercase.</p>
Web page:
This text is transformed to uppercase.

letter-spacing: ?px

Source:
<p style="letter-spacing: 10px">This text has 10px letter-spacing.</p>
Web page:
This text has 10px letter-spacing.

line-height: ?px / ?%

Source:
<p style="line-height: 300%">This text has 300%<br />line-height.</p>
Web page:
This text has 300%
line-height.

word-spacing: ?px

Source:
<p style="word-spacing: 30px">This text has 30px word-spacing.</p>
Web page:
This text has 30px word-spacing.

Fonts and CSS

In addition to the text options above, there are a number of font-related tags.

font-family: "family name" / generic-family

Source:
<p style="font-family: 'Times New Roman', Times,serif">This is a serif font.</p>
Web page:

This is a serif font.

Source:
<p style="font-family: Arial, Helvetica, sans-serif">This is a sans-serif font.</p>
Web page:

This is a sans-serif font.

font-style: normal / italic

Source:
<p style="font-style: italic">This text is italicized.</p>
Web page:

This text is italicized.

font-weight: bold / normal

Source:
<p style="font-weight: bold">This text is bold.</p>
Web page:

This text is bold.

font-size: "?px / ?em / ?%

Source:
<p style="font-size: 18px">This is an 18px font.</p>
Web page:

This is an 18px font.

Previous | Webwork Table of Contents | Next >