Quackit Logo
HTML
CSS
Scripting
Database
Hosting
Design
XML
IMCreator - Free Website Builder

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.

CodeResult

This CSS text color is olive

CSS Text Align

For more information, see the text-align property.

CodeResult

This CSS text is aligned right

CSS Text Indent

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

CodeResult

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.

CodeResult

This text has letter spacing applied

CSS Word Spacing

For more information, see the word-spacing property.

CodeResult

This text has word spacing applied

CSS Text Decoration

For more information, see the text-decoration property.

CodeResult

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.

CodeResult

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.

CodeResult

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.

CodeResult

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.

CodeResult

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.

CodeResult

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.

Enjoy this page?

  1. Link to this page (copy/paste into your own website or blog):
  2. Link to Quackit using one of these banner ads.

Thanks for supporting Quackit!