Platform under construction

Typography & Visual Style

Intermediate

Text Alignment

Text alignment controls reading flow and visual balance. It should support scanning, not become a decorative habit.

.article { text-align: start; }
.price { text-align: end; }

Typography & Visual Style

Text alignment should help the eye find the next line.

Text alignment changes where each line begins and ends. That affects reading speed, scanning and visual order.

Left-aligned text is usually easiest for long paragraphs in left-to-right languages because every line starts from the same edge.

Centered text can work for short hero copy or labels, but long centered paragraphs become harder to read because the starting point keeps moving.

start

Logical alignment that follows writing direction.

left

Common in left-to-right layouts, especially long text.

center

Useful for short, controlled text blocks.

right

Useful for numbers, tables or right-to-left contexts.

Visual model

Make visual decisions systematic instead of random.

Typography and visual style are where CSS starts to feel like design. These models turn subjective choices into reusable decisions you can explain, test and improve.

Start

Best default for readable paragraphs.

Center

Works for short headlines or cards.

End

Useful when data or direction calls for it.

Examples

High-end visual CSS has a reason behind every value.

Alignment matched to content

.article { text-align: start; }
.hero-intro { text-align: center; max-width: 42rem; }
.price { text-align: end; }

Centered everything

body {
  text-align: center;
}

.article p {
  max-width: 70ch;
}

Rules that matter

Visual style becomes professional when it becomes repeatable.

A beautiful one-off style is not enough. The goal is a visual system that keeps working when the site grows, content changes and new pages are added.

Use start for long text

Stable line starts make paragraphs easier to read.

Center only short text

Centered paragraphs become tiring quickly.

Use logical values

text-align: start adapts better than left for international layouts.

Align numbers consistently

Tables and prices often benefit from end alignment.

Do not fake layout with text-align

Use flex or grid for component alignment.

Test actual line length

Alignment depends on width and wrapping.

Production thinking

Visual polish must survive real content, real users and real devices.

Why does this matter?

Alignment guides the eye. Bad alignment makes users work harder before they even understand the content.

Accessibility

Long centered text can reduce readability for many users. Keep reading patterns predictable.

Production note

Set alignment at the right level. Do not apply global center alignment and fight it everywhere else.

SEO note

Readable content structure supports users who arrive from search and need quick clarity.

Live code lab

Change the CSS and watch the interface respond.

The preview runs in an isolated iframe. Links and forms stay inside the practice area, so you can experiment without leaving the lesson.

Mini assignment

Try this now.

Change .copy text-align to center and read both paragraphs.
Use text-align: end and explain when that might make sense.
Replace start with left and think about writing direction.

Practice assignment

Do this before moving to the next lesson.

Create one long paragraph and one short headline.
Use start alignment for the paragraph and center for the short headline.
Explain why those choices are different.

HTML CSS

Live preview

Self-check

Before you continue, prove that you understand Text Alignment.