Text alignment and decoration are important CSS properties used to control how text appears on a webpage. They help improve readability, design, and overall user experience.
Text Alignment
Text alignment defines how text is positioned horizontally inside an element.
The text-align property is used for this purpose.
Common values include left, right, center, and justify.
Example
p {
text-align: center;
}
In this example, all paragraph text will be centered on the page.
Left alignment is the default and is commonly used for body text.
Center alignment is often used for headings and titles.
Right alignment is useful for specific layouts such as side notes.
Justify alignment spreads text evenly across the width, creating a clean and professional look.
Example
p {
text-align: justify;
}
Text Decoration
Text decoration is used to add or remove visual lines from text. It is commonly used for links and emphasis.
The text-decoration property controls this feature.
Common values include underline, overline, line-through, and none.
Example
h1 {
text-decoration: underline;
}
This will underline the heading text.
You can also remove the default underline from links.
Example
a {
text-decoration: none;
}
Line-through is often used to show deleted or discounted content.
Example
p {
text-decoration: line-through;
}
Overline adds a line above the text, which is less commonly used but can be useful in design.
Combining Text Alignment and Decoration
You can use both properties together to style text more effectively.
Example
h2 {
text-align: center;
text-decoration: underline;
}
This will create a centered heading with an underline.
Conclusion
Text alignment and decoration are simple yet powerful tools in CSS. By using them properly, you can create clean, attractive, and easy-to-read web pages. Practice these properties to improve your web design skills.