Text Alignment & Decoration in CSS

1. Text Alignment

The text-align property controls horizontal alignment of text within a container.

p.left {
    text-align: left;
}

p.center {
    text-align: center;
}

p.right {
    text-align: right;
}

p.justify {
    text-align: justify;
}
            

Use justify for newspaper-style block text that aligns on both sides.

2. Text Decoration

The text-decoration property is used to underline, overline, strike-through, or remove decoration from text.

a {
    text-decoration: none;
}

h2 {
    text-decoration: underline;
}

p.marked {
    text-decoration: line-through;
}
            

3. Text Decoration Shorthand

The shorthand version allows you to specify style, color, and type together:

a.custom-link {
    text-decoration: underline dotted red;
}
            

4. Text Transform

Change the capitalization of text using text-transform.

.upper {
    text-transform: uppercase;
}

.lower {
    text-transform: lowercase;
}

.capitalize {
    text-transform: capitalize;
}
            

Conclusion

Text alignment and decoration are essential for content structure and visual appeal. Use these properties to guide your users’ attention and create readable, elegant layouts.