CSS Text: Learn to Set Colors, Spacing, Direction and Alignment

Popular CSS Text-Styling Options

color

The CSS text style usually includes color property. It sets the color for the text content.

In the following example, we assign colors to <h1> and <p> elements:

Purple color

Pink color

h1 {
   color: purple;
}

p {
   color: #FF1493; /* The code for pink */
}

You can set color by using CSS color names (blue, green, red, etc.), RGB value indicators (rgb()) or HEX value indicators (#ffffff). Pick the right colors and make palettes with our Pickeristic tool.

text-align

The text-align property sets the alignment of the CSS text. You can justify the text to the right, left, or center. You can also stretch it out so each line would have equal width.

The following example shows you all the possible ways to align CSS text:

h1 {
   text-align: left;
}

h2 {
   text-align: center;
}

h3 {
   text-align: right;
}

p {
   text-align: justify;
}

You can describe values of text-align with keywords:

text-decoration

The CSS text-decoration property sets decorative lines to emphasize points in CSS text. There are four value options:

• none – no line (default)
• line-through – over the text
• overline – above the text
• underline – below the text

In the next example, you'll see all types of text-decoration lines:

h1 {
   text-decoration: underline;
}

h2 {
   text-decoration: overline;
}

h3 {
   text-decoration: line-through;
}

a {
   text-decoration: none;
}

Tip: the none value is commonly used for removing the underline from links.

You can define styles and colors for each of these lines in the same declaration when using the text-decoration shorthand.

text-transform

The CSS text can change automatically to have only lowercase or uppercase letters. The text-transform can change the style in the following ways:

I'm uppercase.
I'm lowercase.
I'm capitalized.

In the example, we assign different text-transform values to three different HTML elements: <h1>, <p>, <b>:

h1 {
   text-transform: uppercase;
}

p {
   text-transform: lowercase;
}

b {
   text-transform: capitalize;
}

text-indent

In some countries, it is a rule to use indentation on the first line of each paragraph. Sometimes people use it for clarity and better readability as well.

To define the indentation of the CSS text, we use the text-indent property. It accepts length indicators as values (cm, pt, px, etc.).

In the following example, we assign a 45px text indentation to the paragraph element <p>:

p {
   text-indent: 45px;
}

letter-spacing

The letter-spacing property takes length parameters (cm, pt, px, etc.) and uses them to set the spacing between characters.

Tip: you can use both negative and positive length values. The positive numbers increase spacing, while negative ones make the text more packed.

This text has a 2px letter spacing!
This text has a -2px letter spacing!

The example below shows the result of positive and negative spacing on <h1> and <h2> elements.

h1 {
    letter-spacing: 2px; /* This will increase the space between letters */
}

h2 {
    letter-spacing: -2px; /* This will decrease the space between letters */
}

Pros

• Easy to use with a learn-by-doing approach
• Offers quality content
• Gamified in-browser coding experience
• The price matches the quality
• Suitable for learners ranging from beginner to advanced

Main Features

• Free certificates of completion
• Focused on data science skills
• Flexible learning timetable

GET 25% OFF

Pros

• Simplistic design (no unnecessary information)
• High-quality courses (even the free ones)
• Variety of features

Main Features

• Nanodegree programs
• Suitable for enterprises
• Paid Certificates of completion

UP TO 70% OFF

Pros

• A wide range of learning programs
• University-level courses
• Easy to navigate
• Verified certificates
• Free learning track available

Main Features

• University-level courses
• Suitable for enterprises
• Verified certificates of completion

FREE COURSES

word-spacing

The word-spacing property defines the spacing between words for CSS texts. It works with positive and negative length indicators (cm, pt, px, etc.)

This text has a 5px word spacing!
This text has a -5px word spacing!

In the example below, you will see how negative and positive values affect the text:

h1 {
   word-spacing: 5px; /* This increases the space between words */
}

h2 {
   word-spacing: -5px; /* This decreases the space between words */
}

line-height

The line-height property defines the vertical spacing between lines of text. It can have these values:

• Length indicators (cm, pt, px, etc.).
• Regular numbers (representing the number of lines that make the height of lines).

In the following example, we create vertical space equal to the space that five lines would take:

p {
   line-height: 5;
}

direction

The direction property sets the CSS text style by defining the direction of the text.

• ltr (from left to the right).
• rtl (from right to the left).

In this example, we assign the right-to-left direction to the <p> element:

p {
   direction: rtl; /* This makes the text go from the right to the left */
}

text-shadow

CSS text styles become even better with the text-shadow property. In this next example, we add a blue shadow to the text:

I have a shadow

h1 {
   text-shadow: 0px 2px 5px blue;
}

Consider this table with required and optional values of text-shadow:

text-overflow

The CSS text-overflow property defines how overflowed content is presented. The content renders as an ellipsis or can be clipped.

This example shows the use of text-overflow with two possible values of ellipsis and clip:

p.test1 {
    white-space: nowrap; 
    width: 100px; 
    border: 2px solid #2c2f30;
    overflow: hidden;
    text-overflow: clip; 
}

p.test2 {
    white-space: nowrap; 
    width: 100px; 
    border: 2px solid #2c2f30;
    overflow: hidden;
    text-overflow: ellipsis; 
}

To improve CSS text effects, we can pair text-overflow with other styling properties and pseudo classes.

This example shows the overflowed content once users hover over it:

p.test:hover {
    text-overflow: inherit;
    overflow: visible;
}

overflow-wrap

CSS text effects include overflow-wrap, which breaks long words and wraps them onto the next line. The property prevents the text from overflowing its line box.

This is some very loooooooooooooooong text

p {
 width: 50px;
 height: 100px;
 border: 5px solid red;
 padding: 6px;
 margin: 6px;
 overflow-wrap: break-word;
}

It can have these values:

• normal: words break only at standard places.
• anywhere: words break at any point to prevent overflowing. CSS considers soft wrap opportunities of the word when estimating min-content intrinsic sizes.
• break-word: the same as anywhere but CSS does not consider soft wrap opportunities.
• inherit: elements take the overflow-wrap value from their parents.

Tip: the CSS overflow-wrap used to be known as word-wrap.

word-break

The word-break property sets the line breaking rules when text overflows its content box.

This example presents the way word-break works with the break-all value:

This is some very loooooooong text

This is some very loooooooong text

p.test1 {
    word-break: break-all;
}

p.test2 {
    word-break: keep-all;
}

The word-break property can have the following values:

• normal: the default line break rules.
• break-all: prevents overflow by inserting breaks between any two characters (not for Japanese/Korean/Chinese characters).
• keep-all: no words break for Korean/Japanese/Chinese texts. Other texts act normal.

Note: the deprecated break-word worked the same as word-break: normal and overflow-wrap: anywhere.

CSS Text: Useful Tips

• Remember that CSS text styles apply to entire elements. If you need to add effects to a specific part of the text, you should wrap it in elements such as <span>.
• Pseudo elements also help to style the first line, first word, or the highlighted parts of the CSS text.