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;
}
In a style tag in the head of the document:
Source:
<style type="text/css" >
body
{
color: #ff0000;
}
</style>
Inline:
Source:
<p style="color: #ff0000">
This text is red.
</p>
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>
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>
font-weight: bold / normal
Source:
<p style="font-weight: bold">This text is bold.</p>
font-size: "?px / ?em / ?%
Source:
<p style="font-size: 18px">This is an 18px font.</p>