CSS Text

I. Text color

color property sets the color of the text background-color property defines color of background.

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>
      p.uppercase {
        text-transform: uppercase;

      p.lowercase {
        text-transform: lowercase;

      p.capitalize {
        text-transform: capitalize;
    <p class="uppercase">This is uppercase text.</p>
    <p class="lowercase">This is lowercase text.</p>
    <p class="capitalize">This is capitalize text.</p>

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. Seperate 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;