Text align and transform

Learn text-align, text-transform and text-indent properties.

Text alignment

The horizontal alignment of text is set by the text-align property. Four common values exist: left, right, center and justify.

To center a paragraph you write text-align: center;. In left-to-right languages like Turkish the default is left; in right-to-left languages it is right.

justify spreads lines to both edges but spacing can become uneven; use it carefully in long columns.

Text transform

The letter case of text is changed by the text-transform property; it does not touch the source. Four common values: none, capitalize (first letter of each word), uppercase (all caps) and lowercase (all small).

For example, with text-transform: uppercase; the text "hello world" shows as "HELLO WORLD" on screen; the HTML source stays the same.

First line indent

To pull the first line of a paragraph inward, use the text-indent property. The value is written in pixels or em.

For example, text-indent: 2em; starts the first line two letter widths inside. This is a common layout in newspaper and book typography.

A negative value pushes the first line outward; it suits a hanging indent.

Exercise Style the quote paragraph

Open a block for the blockquote selector. Add these three declarations inside: text-align: justify;, text-transform: none; and text-indent: 1.5em;.

Show example solution

blockquote {
  text-align: justify;
  text-transform: none;
  text-indent: 1.5em;
}

Test yourself

Which value centers a paragraph?
- text-align: left;
- text-align: right;
- text-align: center;
- text-align: justify;
Show answer

text-align: center; — Correct. text-align: center; centers the text horizontally.

Center the heading

h1 {
  text-align: ____;
}

Show answer

h1 {
  text-align: center;
}

Match each property to its job

text-align

Horizontal alignment
text-transform

Letter case format
text-indent

First line indent
letter-spacing

Gap between letters

Next lesson: Text decoration and shadow

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies