CSS Text

With CSS you can style and format text in a variety of ways.

This includes text color, font size, alignment, line-height, and other properties.

Example

#

Text that is styled with four different CSS properties.

Text styled in a variety of ways

<p style="font-size: 18px;
          color: purple;
          font-style: italic;
          text-decoration:underline;">
  Text styled in a variety of ways
</p>

Text Color

The color property specifies the color of the text.

The color value can one of the following:

  • color name - e.g., teal, tomato
  • HEX value - e.g., #ff0000, #000000
  • RGB value - e.g., rgb(255,0,0)
  • HSL value - e.g., hsl(0,0%,100%)

If no color is specified, the element will inherit the parent's text color.

An element with a custom color for text.

A paragraph with a text color

<p style="color:salmon;">
  A paragraph with a text color
</p>

For details on the color property, see our CSS color Property Reference.

Text Alignment

The text-align property sets the horizontal text alignment

Text can be aligned left, right, center, or justified

Aligned text: left, center, and right.

Left-aligned text

Centered text

Right-aligned text

<style>
  .text-align {
    border: 3px solid lightblue;
    padding: 25px;
  }
</style>

<p class="text-align" style="text-align: left">Left-aligned text</p>
<p class="text-align" style="text-align: center">Centered text</p>
<p class="text-align" style="text-align: right">Right-aligned text</p>


Justified text alignment

The justify value for text-align stretches each line to the element's width.

Both left and right margins are perfectly aligned.

An element with justify text alignment.

Monet was raised in Le Havre, Normandy, and became interested in the outdoors and drawing from an early age. Although his mother, Louise-Justine Aubrée Monet, supported his ambitions to be a painter, his father, Claude-Adolphe, disapproved and wanted him to pursue a career in business. He was very close to his mother, but she died in January 1857 when he was sixteen years old, and he was sent to live with his childless, widowed but wealthy aunt, Marie-Jeanne Lecadre.

<style>
  .text-justify {
    padding: 20px;
    border: 5px solid lightblue;
    max-width: 400px;
    text-align: justify;
  }
</style>

<p class="text-justify">
  Monet was raised in Le Havre, Normandy, and became
  interested in the outdoors and drawing from an early age.
  Although his mother, Louise-Justine Aubrée Monet,
  supported his ambitions to be a painter, his father,
  Claude-Adolphe, disapproved and wanted him to pursue
  a career in business. He was very close to his mother,
  but she died in January 1857 when he was sixteen years
  old, and he was sent to live with his childless,
  widowed but wealthy aunt, Marie-Jeanne Lecadre.
</p>

For details on text-align, see our CSS text-align Property Reference.


Text Decoration

The text-decoration property adds a line to text.

The line type can be underline, overline, line-through, and none.

Text decorations: underline, line-through, and overline.

Underline

Line Through

Overline

<p style="text-decoration: underline">Underline</p>
<p style="text-decoration: line-through">Line Through</p>
<p style="text-decoration: overline">Overline</p>

A none value removes underlines from an HTML element.
This link is rendered without an underline.

A link with no underline:
Google.com

<p>
  A link with no underline: <br />
  <a href="https://google.com"
     style="text-decoration: none; color: darkslateblue;">Google.com</a>
</p>

For details on text-decoration, see our CSS text-decoration Property Reference.


Text Transformation

The text-tranform property specifies the case of the text.

Possible values include uppercase, lowercase, or capitalize.

Text transforms: uppercase, lowercase, and capitalize.

Van Gogh is a well-known post-impressionist artist.

Van Gogh is a well-known post-impressionist artist

Van Gogh is a well-known post-impressionist artist

<p style="text-transform: uppercase">
  Van Gogh is a well-known
  post-impressionist artist.
</p>

<p style="text-transform: lowercase">
  Van Gogh is a well-known
  post-impressionist artist
</p>

<p style="text-transform: capitalize">
  Van Gogh is a well-known
  post-impressionist artist
</p>

For details on text-transform, see our CSS text-transform Property Reference.


Text Indentation

The text-indent property specifies the indentation of the first line of text.

The value can be any valid length value, such as, px, pt, cm, etc.

The first line in this text block is left-indented.

Van Gogh suffered from psychotic episodes and delusions and though he worried about his mental stability, he often neglected his physical health, did not eat properly and drank heavily. His friendship with Gauguin ended after a confrontation with a razor when, in a rage, he severed part of his own left ear.

<p style="text-indent: 30px">
  Van Gogh suffered from psychotic episodes 
  and delusions and though he worried about 
  his mental stability, he often neglected 
  his physical health, did not eat properly 
  and drank heavily. His friendship with 
  Gauguin ended after a confrontation with 
  a razor when, in a rage, he severed part
  of his own left ear.
</p>

For details on text-indent, see our CSS text-indent Property Reference.


Letter Spacing

The letter-spacing property sets the space between the characters in text.

Its value can be positive or negative.

Two paragraphs with increased and decreased letter spacing respectively.

Van Gogh is a well-known post-impressionist artist

Van Gogh is a well-known post-impressionist artist

<p style="letter-spacing: 1.5px">
  Van Gogh is a well-known 
  post-impressionist artist
</p>

<p style="letter-spacing: -1.5px">
  Van Gogh is a well-known 
  post-impressionist artist
</p>

For details on letter-spacing, see our CSS letter-spacing Property Reference.


Line Height

The line-height property specifies the space between each line of text.

Its value is auto, or any valid length value, such as px, em, etc.

Two paragraphs with different line heights.

Van Gogh suffered from psychotic episodes and delusions and though he worried about his mental stability, he often neglected his physical health, did not eat properly and drank heavily. His friendship with Gauguin ended after a confrontation with a razor when, in a rage, he severed part of his own left ear.

Van Gogh suffered from psychotic episodes and delusions and though he worried about his mental stability, he often neglected his physical health, did not eat properly and drank heavily. His friendship with Gauguin ended after a confrontation with a razor when, in a rage, he severed part of his own left ear.

<p style="line-height: 1.9em;">
  Van Gogh suffered from psychotic episodes
  and delusions and though he worried about
  his mental stability, he often neglected
  his physical health, did not eat properly
  and drank heavily. His friendship with
  Gauguin ended after a confrontation with
  a razor when, in a rage, he severed part
  of his own left ear.
</p>

<p style="line-height: 1em;">
  Van Gogh suffered from psychotic episodes
  and delusions and though he worried about
  his mental stability, he often neglected
  his physical health, did not eat properly
  and drank heavily. His friendship with
  Gauguin ended after a confrontation with
  a razor when, in a rage, he severed part
  of his own left ear.
</p>

For details on line-height, see our CSS line-height Property Reference.


Word Spacing

The word-spacing property sets the space between the words in text.

Its value can be any valid length value, such as, px, pt, cm, etc.

A paragraph with increased word spacing.

Van Gogh is a well-known post-impressionist artist

<p style="word-spacing: 8px">
  Van Gogh is a well-known 
  post-impressionist artist
</p>

For details on word-spacing, see our CSS word-spacing Property Reference.


Text Shadow

The text-shadow property adds shadow to text.

This property accepts up to 4 values: x-offset, y-offset, blur, and color.

Text with a shadow.

Van Gogh is a well-known post-impressionist artist

<p style="font-size: 20px; text-shadow: 2px 2px #ccc;">
  Van Gogh is a well-known
  post-impressionist artist
</p>


Code Explanation

  • The first parameter (x-offset) sets the horizontal shadow position.
  • The second parameter (y-offset) sets the vertical shadow position.
  • The third parameter (color) sets the shadow color.
  • An optional parameter (blur) can be added before the color which specifies the shadow blur radius.

For details on the text-shadow property, see our CSS text-shadow Property Reference.


Did you know?

Did you know?

Text with an inner-text shadow

By using negative x-offset and y-offset values, text can get an inner-shadow effect with text-shadow. Below is an example.

Van Gogh is a well-known post-impressionist artist

<style>
  .inner-shadow {
    font-size: 24px;
    color: lightblue;
    font-weight: bold;
    text-shadow: 1px 1px white, -1px -1px #000;
  }
</style>

<h3 class="inner-shadow">
  Van Gogh is a well-known post-impressionist artist
</h3>

CSS Text Properties

This table lists all text properties.

Property Description
color Sets the color of the text
direction Sets the text direction/writing direction
letter-spacing Increases or decreases the space between characters in a text
line-height Sets the line-height
text-align Specifies the horizontal alignment of text
text-decoration Specifies a line-decoration for the text
text-indent Specifies the indentation of the first line in a text block
text-shadow Specifies a shadow effect for the text
text-transform Sets the capitalization of text
text-overflow Specifies how text that that does not fit in a container is displayed
unicode-bidi Used together with the direction property. Specifies how bi-directional text is handled in a multi-language text document. Hence the name 'bidi'.
vertical-align Sets the vertical alignment of text inside an element.
white-space Specifies how white-space in text is handled.
word-spacing Increases or decreases the space between words in a text

You may also like

Guides