CSS Text Properties

This page contains the properties in the text namespace (properties with the word text in their name), as well as some other related properties.

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.

<!DOCTYPE html>
<title>Example</title>
<style>
  p {
    color: olive;
  }
</style>

<p>This CSS text color is olive</p>

CSS Text Align

For more information, see the text-align property.

<!DOCTYPE html>
<title>Example</title>
<style>
  p {
    text-align: right;
  }
</style>

<p>This CSS text is aligned right</p>

CSS Text Indent

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

<!DOCTYPE html>
<title>Example</title>
<style>
  p {
    text-indent: 50px;
  }
</style>

<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!</p>

CSS Letter Spacing

For more information, see the letter-spacing property.

<!DOCTYPE html>
<title>Example</title>
<style>
  p {
    letter-spacing: 5px;
  }
</style>

<p>This text has letter spacing applied</p>

CSS Word Spacing

For more information, see the word-spacing property.

<!DOCTYPE html>
<title>Example</title>
<style>
  p {
    word-spacing: 50px;
  }
</style>

<p>This text has word spacing applied</p>

CSS Text Decoration

For more information, see the text-decoration property.

<!DOCTYPE html>
<title>Example</title>
<style>
  .overline {
    text-decoration: overline;
  }
  .line-through {
    text-decoration: line-through;
  }
  .underline {
    text-decoration: underline;
  }
  a:link {
    text-decoration: none;
  }
</style>


<p class="overline">This text has a line over the top</p>
<p class="line-through">This text has a line through the middle</p>
<p class="underline">This text has a line underneath</p>
<a href="/css/" target="_blank">This hyperlink has no underline</a>

CSS Text Transform

For more information, see the text-transform property.

<!DOCTYPE html>
<title>Example</title>
<style>
  .uppercase {
    text-transform: uppercase;
  }
  .lowercase {
    text-transform: lowercase;
  }
  .capitalize {
    text-transform: capitalize;
  }
</style>

<p class="uppercase">This text has been transformed to uppercase</p>
<p class="lowercase">THIS TEXT HAS BEEN TRANSFORMED TO LOWERCASE</p>
<p class="capitalize">this text has been capitalized.</p>

CSS Text Direction

For more information, see the direction property.

<!DOCTYPE html>
<title>Example</title>
<style>
  p {
    direction: rtl;
  }
</style>

<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...</p>

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.

<!DOCTYPE html>
<title>Example</title>
<style>
  p {
    direction: rtl;
    unicode-bidi: bidi-override;
  }
</style>

<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...</p>

CSS Text Shadow

For more information, see the text-shadow property.

<!DOCTYPE html>
<title>Example</title>
<style>
  p {
    text-shadow: 2px 2px 8px orange;
  }
</style>

<p>If your browser supports the CSS text-shadow property, this text will have a shadow.</p>

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.

<!DOCTYPE html>
<title>Example</title>
<style>
  p {
    white-space: pre;
  }
</style>

<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.
</p>