CSS Text

Apart from the various CSS font properties, there are other properties that can assist in styling your text. For example, you can change the color of text, align text, add decoration properties and more.

In CSS, text can be styled using the properties listed below. Using this list, you can learn how to use each css text property and what it looks like in a browser.

CSS Text Color

For more information, see the color property.

Code	Result
<p style="color:olive;">This CSS text color is olive</p>	This CSS text color is olive

CSS Text Align

For more information, see the text-align property.

Code	Result
<p style="text-align:right;">This CSS text is aligned right</p>	This CSS text is aligned right

CSS Text Indent

Indents the first line of the paragraph. For more information, see the text-indent property.

Code	Result
<p style="text-indent:50px;">This text is indented by 50 pixels. What this means is that the first line of the paragraph will be indented by 50 pixels, but the following lines will not be indented. The text will need to wrap before you can see the indent - hence all this text!</p>	This text is indented by 50 pixels. What this means is that the first line of the paragraph will be indented by 50 pixels, but the following lines will not be indented. The text will need to wrap before you can see the indent - hence all this text!

CSS Letter Spacing

For more information, see the letter-spacing property.

Code	Result
<p style="letter-spacing:5px;">This text has letter spacing applied</p>	This text has letter spacing applied

CSS Word Spacing

For more information, see the word-spacing property.

Code	Result
<p style="word-spacing:50px;">This text has word spacing applied</p>	This text has word spacing applied

CSS Text Decoration

For more information, see the text-decoration property.

Code

Result

<p style="text-decoration:overline;">This text has a line over the top</p> <p style="text-decoration:line-through;">This text has a line through the middle</p> <p style="text-decoration:underline;">This text has a line underneath</p> <a style="text-decoration:none;" a href="/css/properties/css_text-decoration.cfm" >This hyperlink has no underline</a> <p style="text-decoration:blink;">This text is blinking</p>

This text has a line over the top This text has a line through the middle This text has a line underneath This hyperlink has no underline This text is blinking

CSS Text Transform

For more information, see the text-transform property.

Code	Result
<p style="text-transform:uppercase;">This text has been transformed to uppercase</p> <p style="text-transform:lowercase;">THIS TEXT HAS BEEN TRANSFORMED TO LOWERCASE</p> <p style="text-transform:capitalize;">this text has been capitalized.</p>	This text has been transformed to uppercase THIS TEXT HAS BEEN TRANSFORMED TO LOWERCASE this text has been capitalized.

CSS Text Direction

For more information, see the direction property.

Code	Result
<p style="direction:rtl;">This text is running from right to left. This can be useful for languages where the text runs from right to left. Not so useful for english though...</p>	This text is running from right to left. This can be useful for languages where the text runs from right to left. Not so useful for english though...

CSS unicode-bidi

For more information, see the unicode-bidi property.

Use this in conjunction with the direction property to determine the direction of the text. Possible values: normal, embed, bidi-override, and inherit.

Code	Result
<p style="direction:rtl;unicode-bidi:bidi-override;">This text is running from right to left. This can be useful for languages where the text runs from right to left. Not so useful for english though...</p>	This text is running from right to left. This can be useful for languages where the text runs from right to left. Not so useful for english though...

CSS Text Shadow

For more information, see the text-shadow property.

Code	Result
<p style="text-shadow:2px 2px 8px orange;">If your browser supports the CSS text-shadow property, this text will have a shadow.</p>	If your browser supports the CSS text-shadow property, this text will have a shadow.

CSS White Space

Tells the browser how to handle white space. Possible values: normal, pre, and nowrap.

For more information, see the white-space property.

Code	Result
<p style="white-space:pre;">This text has a line break (actually, it has many line breaks!) and the white-space pre setting tells the browser to honor it just like the HTML pre tag.</p>	This text has a line break (actually, it has many line breaks!) and the white-space pre setting tells the browser to honor it just like the HTML pre tag.

• << CSS Font
• Background Code >>

Enjoy this page?

2. Link to this page (copy/paste into your own website or blog):
   <a href="http://www.quackit.com/css/tutorial/css_text.cfm">CSS Text</a> from Quackit.com
3. Link to Quackit using one of these banner ads.

Thanks for supporting Quackit!