Beginner LevelCSS & Modern Layouts
How do text-align, text-decoration, and text-transform work in CSS?
❓ Interview Prompt: Explain text formatting properties for alignment, underlines, and case transformations.
CSS provides several text formatting properties:
•
`text-align`: Horizontal alignment within block containers:
left, right, center, justify.•
`text-decoration`: Controls underlines, overlines, line-throughs. Shorthand:
text-decoration: underline wavy #886f68.•
`text-decoration-skip-ink: auto`: Prevents underlines from crossing through letter descenders (g, y, p).
•
`text-transform`:
uppercase, lowercase, capitalize (first letter of each word).•
`text-indent`: Indents the first line of a paragraph.
•
`letter-spacing`: Adjusts space between characters (kerning). Good for uppercase headings.
Code Implementation Example
css
.section-title {
text-align: center;
text-transform: uppercase;
letter-spacing: 0.1em;
font-weight: 700;
}
a {
text-decoration: underline;
text-decoration-color: #886f68;
text-underline-offset: 3px; /* Space between text and underline */
text-decoration-skip-ink: auto;
}
.strikethrough { text-decoration: line-through; }💡Uppercase headings with tracking and styled underline links.
🎯 Interview Key Takeaway
Use text-underline-offset for accessible, spaced underlines and letter-spacing for uppercase heading readability.
#Text#Typography#Formatting#Beginner
Back to all CSS & Modern Layouts Questions→