🚨 Get Your Free NFT Certificate Mint by Completing the Web3 Exam! START NOW

Code has been added to clipboard!

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

Reading time 6 min
Published Sep 11, 2016
Updated Jan 23, 2020

This is a TITLE

(Text-align, text-transform and color properties were used on this)

This is a paragraph. It is justified, indented by 30px, and the space between characters is set to 5px. This link is colored but not underlined. Here is some more text that the paragraph justification is clearly visible. Cool, right?

TL;DR — CSS text styling properties set colors, sizes, fonts, shadows for your text content. CSS also offers properties for setting text-alignment, the spacing between letters and words, etc.

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

Example
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:

Example
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:

Value Description
left Your text will appear on the left side of the page (default)
right Your text will appear on the right side of the page
center Your text will appear in the center of the page
justify The text will be stretched, so each line has the same width

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:

Example
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>:

Example
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>:

Example
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.

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

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

DataCamp
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
Udacity
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
Udemy
Pros
  • Easy to navigate
  • No technical issues
  • Seems to care about its users
Main Features
  • Huge variety of courses
  • 30-day refund policy
  • Free certificates of completion

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:

Example
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:

Example
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:

Example
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

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

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

h-shadow Length of the horizontal shadow. Describe its values using length parameters (cm, pt, px, etc.). Required.
v-shadow Height of the vertical shadow. Describe its values using length parameters (cm, pt, px, etc.). Required.
blur-radius Specifies the blur radius. Describe its value using length parameters (cm, pt, px, etc.). If not included, it is 0.
color Determines the color of the shadow. Describe it using color names, RGB, or HEX values. If not included, it is black.

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:

Example
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:

This is a very long text that you can't see until you hover over it!
Example
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

Example
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

Example
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.