CSS Text

I. Text color

  • color property sets the color of the text
  • background-color property defines the background color.
h2 {
  background-color: green;
  color: white;
}

II. Text alignment

text-align property sets the horizontal alignment of a text. A text can be:

  • left
  • right
  • center
  • justify
h2 {
  text-align: center;
}

h3 {
  text-align: left;
}

h4 {
  text-align: right;
}

h5 {
  text-align: justify;
}

III. Text decoration

text-decoration: none; can remove underlines from links.

a {
  text-decoration: none;
}

IV. Text Transformation

text-transform property specifies uppercase and lowercase letters in a text. It can also capitalize the first letter of each word.

<!DOCTYPE html>
<html>
  <head>
    <style>
      p.uppercase {
        text-transform: uppercase;
      }

      p.lowercase {
        text-transform: lowercase;
      }

      p.capitalize {
        text-transform: capitalize;
      }
    </style>
  </head>
  <body>
    <p class="uppercase">This is uppercase text.</p>
    <p class="lowercase">This is lowercase text.</p>
    <p class="capitalize">This is capitalize text.</p>
  </body>
</html>

V. Text spacing

1. Indentation

text-indent property sets the indentation of the first line.

p {
  text-indent: 20px;
}

2. Spacing

letter-spacing property sets the space between the characters.

h2 {
  letter-spacing: 2px;
}

3. Height

line-height property sets the space between lines.

p {
  line-height: 1.2;
}

4. Word spacing

word-spacing property sets the space between the words.

h3 {
  word-spacing: 5px;
}

5. White space

white-space: nowrap; disables text wrapping inside an element.

VI. Text shadow

We can set shadow for our text with text-shadow. It takes 3 values:

  • The offset to the right of the shadow from the actual text
  • Vertical offset
  • Color of the shadow
p {
  text-shadow: 2px 2px lightgray;
}

VII. Columns

1. Separate text into columns

We can spit text into columns with column-count:

p {
  column-count: 3;
}

2. Column gap

We can set the gap between columns with column-gap:

p {
  column-count: 3;
  column-gap: 40px;
}