CSS Text Alignment and Decoration

Text alignment controls where inline content sits within its line box; decorations such as underlines convey emphasis and link affordance.

text-align aligns inline-level content along the line box, commonly start, center or end. It does not move a block-level box across its parent. text-decoration sets an underline, overline or line-through; related longhands set color, style and thickness.

Links should remain visibly identifiable, including when users do not hover. Removing the underline without another reliable cue can make links hard to find.

Text alignment acts inside a content box; decoration paints marks on the text rather than adjusting layout dimensions.

Center text in a banner without moving the banner itself.

HTML

<div class="announcement"><h3>Special opening hours</h3><p>Saturday · 10 AM to 5 PM</p></div>

CSS

.announcement { text-align: center; padding: 16px; background: #eff6ff; border-radius: 10px; }
.announcement h3 { margin: 0 0 7px; color: #1d4ed8; }
.announcement p { margin: 0; }

Rendered output

Observe: The heading and paragraph are centered inside the same full-width announcement.

Give an actual link an underline whose weight is easy to notice.

HTML

<p class="link-note">Read the <a href="#details">event information</a> before visiting.</p>

CSS

.link-note { font-size: 1rem; line-height: 1.6; }
.link-note a { color: #1d4ed8; text-decoration-line: underline; text-decoration-style: solid; text-decoration-thickness: 2px; text-underline-offset: 4px; }

Rendered output

Observe: The underline is separated slightly from the glyphs and the link remains identifiable.

Text alignment acts inside a content box; decoration paints marks on the text rather than adjusting layout dimensions.

Compare the two examples: identify the selector, each changed property, and which visible part of the output proves that the CSS took effect.

• text-align:center does not horizontally center a fixed-width block; use auto margins or a layout container.
• Avoid removing every link underline without an accessible replacement.

Change the banner alignment to start. Make the link underline dotted and explain what changed visually.

Before changing the code, predict what will change. Then verify by checking the rendered result.

Text alignment handles inline content; text-decoration adds visual marks such as underlines.

Revisit the rendered examples if the rule still feels abstract. Change one declaration at a time so you can connect cause and effect.