Below are five demonstrations of text properties. Please read the
text of the examples as further explanations are contained therein.
Rule Example 1.
{font-family: Arial; font-size: 14px; color: red; text-decoration: underline;
letter-spacing: 2px;}
Will display as:
This text is defined by the properties of Arial face, at size 14 pixels,
color red, text-decoration is underlined and the letter-spacing is 2 pixels apart.
Rule Example 2.
{font-family: verdana; font-size: 11px; color: #970700; word-spacing 4px; letter-spacing: 2px;}
Will display as:
This text is defined by the properties of verdana face, size 14 pixels, color
dark red, with word-spacing of 4 pixels and letter-spacing of 2 pixels.
Word-spacingis the space between words and letter-spacing is the space
between letters.
Here is an example of the same style rule but with word-spacing
of 2 pixels and letter-spacing of 4 pixels.
Rule Example 3.
{font-family: Arial; font-size: 10pt; color: blue; line-height: 30px;
text-align: center; text-indent: 6px;}
Will display as:
This text is defined by the properties of Arial face, at size 10 points,
color blue, and the line height is 30px. The text is aligned to the center and
has a first line indention of 6 pixels.
Rule Example 4.
{font-family: "Times New Roman", Times; font-size: 12pt; text-transform: capitalize; color: green; }
Will display as:
This text is defined by the properties of Times New Roman face, size 12 points,
and the first letter of each word is capitalized by the text-transform property.
Rule Example 5.
{font: 12px/20pt verdana; color: blue; line-height: 25px; text-decoration: line-through;
text-transform: uppercase; word-spacing: 3px; }
Will display as:
This text is defined by the properties of verdana face, at size 12 pixels,
line height of 25 pixels. This text is uppercase with a line-through.
Here is the same CSS rule with a "text-transform: overline;" proptery.
To Top