CSS offers impressive capabilities for formatting texts. The chapter on formatting text with HTML shows that text documents can be done without CSS, but no modern web page relies on HTML only.
CSS Text Properties
The examples below use inline CSS and the <P> tag. CSS can also be applied from an external file, to virtually every HTML element that contains text, like tables, lists, and so on. CSS properties can be combined into a single declaration.
color
Color is pretty straightforward. Applying this property to an HTML element will turn all text within that element to the specified color.
<p style="color: green;">This is Green text.</p>This is Green text.
font-size
Size is most often specified in px, pt, or em. You can also use a percentage value or the words xx-small, x-small, small, medium, large, x-large, or xx-large.
<p style="font-size: 28px;">This text is sized 28 pixels.</p>This text is sized 28 pixels.
font weight
The font weight property can have the following values:
line-height
Line height determines the distance between lines of text. More distance than the default value usually means better readability. In most cases, an acceptable line height is anything from 100% to 200% the size of the text itself.
<p style="line-height: 350%;">This is line 1.<br /> This is line 2.</p>This is line 1.
This is line 2.
letter-spacing
This determines the distance between letters.
<p style="letter-spacing: 20px">Hello world.</p>Hello world.
text-align
The text-align property determines the alignment of text within the parent element. The values are left, right, and center.
<p style="text-align: center">This is centered text.</p>This is centered text.
text-decoration
Using this, you can make text underlined, overlined, stricken through, or remove text decoration from elements with default formatting -- for example, underlined links.
<p style="text-decoration: underline">text-decoration example 1</p>
<p style="text-decoration: line-through">text-decoration example 2</p>
<p style="text-decoration: overline">text-decoration example 3</p>
<a href="" style="text-decoration: none">This is a link, but it's not underlined.</a>text-decoration example 1
text-decoration example 2
text-decoration example 3
This is a link, but it's not underlined.
text-indent
text-shadow
text-transform
unicode-bidi
white-space
word-spacing
direction
This property can have two values: ltr(left to right), or rtl (right to left).
<p style="direction: rtl">Right to left text.</p>Right to left text.