CSS Text Styling: Alignment & Transformation

Learn how to control text alignment, capitalization, and spacing to create beautiful and readable web content.

CSS transforms text into a powerful design tool.

Welcome! Let's see how CSS can transform plain text into a stylish and readable design element.

p { /* No styles yet */ }

Horizontal Alignment with 'text-align'

The text-align property specifies the horizontal alignment of text within its container. The most common values are left, right, center, and justify (which makes lines of equal width).

Capitalization with 'text-transform'

Use text-transform to control the capitalization of text. Key values include uppercase (ALL CAPS), lowercase (all small letters), and capitalize (Capitalizes The First Letter Of Each Word).

Character Spacing with 'letter-spacing'

The letter-spacing property adjusts the space between characters. You can use positive values (e.g., 2px) to spread letters out or negative values (e.g., -1px) to bring them closer together.

Line Spacing with 'line-height'

Often called "leading" in design, line-height sets the space between lines of text. Using a unitless value (like 1.5) is recommended as it creates a height relative to the font size, improving readability.

Practice Zone

Interactive Test 1: Match the Properties

Match each CSS property to its correct description.

Arrastra en el orden correspondiente.

Arrastra las opciones:

line-height

text-align

letter-spacing

text-transform

Completa el código:

Controls horizontal alignment.______

Modifies text capitalization.______

Adjusts space between characters.______

Sets the space between lines.______

Unlock with Premium

Interactive Test 2: Complete the Style

Rellena los huecos en cada casilla.

.title {
  text-align: ;
  text-transform: ;
  letter-spacing: px;
  line-height: ;
}

Unlock with Premium

Practice Example: Code Editor

Style the h1 element: center its text, make it uppercase, give it 3px of letter spacing, and a line height of 1.4.

* Write the code below. Correct characters will be shown in green and incorrect ones in red.

h1 {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 3px;
  line-height: 1.4;
}

Unlock with Premium

Knowledge Check

Which property is used to control the capitalization of text?

Unlock with Premium

Typography in Practice

Good typography is invisible design. It enhances readability and creates a clear visual hierarchy. Here’s how these properties work together.

1. Creating Visual Hierarchy

Combine properties to distinguish between headings and paragraphs. An uppercase, centered heading with generous spacing immediately draws the eye, while a left-aligned paragraph with comfortable line-height is easy to read.

h1 {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 4px;
}
p {
  line-height: 1.7;
  text-align: justify;
}

Main Title

This paragraph text is styled for maximum readability, creating a clear distinction from the main heading above.

2. Enhancing User Experience (UX)

Proper line-height is crucial for long-form content. Too little, and text feels cramped. Too much, and lines feel disconnected. A value between 1.5 and 1.8 is typically a good starting point for body text.

.readable-text {
  line-height: 1.7;
}

With proper line height, this block of text becomes much easier for the user to read without losing their place between lines.

Practical Takeaway: These four properties—text-align, text-transform, letter-spacing, and line-height—are your core toolkit for shaping the user's reading experience on the web.

Text Styling Glossary

text-align: Sets the horizontal alignment of text. Values include left, right, center, and justify.
text-transform: Controls the capitalization of text. Values include uppercase, lowercase, and capitalize.
letter-spacing: Adjusts the horizontal space between characters. Also known as "tracking" in typography.
line-height: Sets the vertical distance between lines of text. Also known as "leading" in typography.
justify: A value for text-align where text is stretched so that every line has equal width, creating clean edges on both the left and right sides.
Typography: The art and technique of arranging type to make written language legible, readable, and appealing when displayed.