Formatting Text with CSS
Last edited by admin Thu, 10/04/2012 - 06:50


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 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.


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 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.


This determines the distance between letters.

<p style="letter-spacing: 20px">Hello world.</p>

Hello world.


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.


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.








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.