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.<\/p>\n\n\n\n
Text Alignment<\/p>\n\n\n\n
Text alignment defines how text is positioned horizontally inside an element.<\/p>\n\n\n\n
The text-align property is used for this purpose.<\/p>\n\n\n\n
Common values include left, right, center, and justify.<\/p>\n\n\n\n
Example<\/p>\n\n\n\n
p {
text-align: center;
}<\/p>\n\n\n\n
In this example, all paragraph text will be centered on the page.<\/p>\n\n\n\n
Left alignment is the default and is commonly used for body text.<\/p>\n\n\n\n
Center alignment is often used for headings and titles.<\/p>\n\n\n\n
Right alignment is useful for specific layouts such as side notes.<\/p>\n\n\n\n
Justify alignment spreads text evenly across the width, creating a clean and professional look.<\/p>\n\n\n\n
Example<\/p>\n\n\n\n
p {
text-align: justify;
}<\/p>\n\n\n\n
Text Decoration<\/p>\n\n\n\n
Text decoration is used to add or remove visual lines from text. It is commonly used for links and emphasis.<\/p>\n\n\n\n
The text-decoration property controls this feature.<\/p>\n\n\n\n
Common values include underline, overline, line-through, and none.<\/p>\n\n\n\n
Example<\/p>\n\n\n\n
h1 {
text-decoration: underline;
}<\/p>\n\n\n\n
This will underline the heading text.<\/p>\n\n\n\n
You can also remove the default underline from links.<\/p>\n\n\n\n
Example<\/p>\n\n\n\n
a {
text-decoration: none;
}<\/p>\n\n\n\n
Line-through is often used to show deleted or discounted content.<\/p>\n\n\n\n
Example<\/p>\n\n\n\n
p {
text-decoration: line-through;
}<\/p>\n\n\n\n
Overline adds a line above the text, which is less commonly used but can be useful in design.<\/p>\n\n\n\n
Combining Text Alignment and Decoration<\/p>\n\n\n\n
You can use both properties together to style text more effectively.<\/p>\n\n\n\n
Example<\/p>\n\n\n\n
h2 {
text-align: center;
text-decoration: underline;
}<\/p>\n\n\n\n
This will create a centered heading with an underline.<\/p>\n\n\n\n
Conclusion<\/p>\n\n\n\n
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.<\/p>\n\n\n