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 >
Re-Vision.com

projects:
Simple Truths (and Complex Lies)

The Built World
Semblance Portrait Project
Back to Square One
Changing Chicago
Chicago's Reliance Building
US
Along the Mississippi River
The Work of Antoni Gaudí
Graffiti

places:
Morocco 2023
Beecher, Illinois
Iceland 2017
Cuba 2015
Providence, Rhode Island
Greece 2013
Eastern Europe 2013
Israel 2010
Paris, France
Puebla, Mexico 2009
Puerto Rico 2009
Barcelona 2007
Rome, Italy 2006

archive:
Graphics, sounds, and other ancient
items from the dawn of the Web.


FWIW:
Biography

©
Jay Boersma