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