Text Decorations:
Text decorations in CSS are used to enhance the appearance of text by adding effects such as underline, overline, line-through, and text shadow. These decorations can be applied to individual text elements or entire sections of a webpage.
Text Decorations:
Text decorations in CSS are used to enhance the appearance of text by adding effects such as underline, overline, line-through, and text shadow. These decorations can be applied to individual text elements or entire sections of a webpage.
1. Underline:
The text-decoration property is used to underline text. You can specify the style, color, and thickness of the underline using additional properties like text-decoration-style, text-decoration-color, and text-decoration-thickness.
Example:
text-decoration: underline;
text-decoration-color: red;
text-decoration-style: dashed;
}
<p class="text-underline">This text has a red dashed underline.</p>
2. Overline:
Similar to underline, you can apply an overline using the text-decoration property.
Example:
text-decoration: overline;
}
<p class="text-overline">This text has an overline.</p>
3. Line-Through:
To add a line through text, use the text-decoration property with the value line-through.
Example:
text-decoration: line-through;
}
<p class="text-line-through">This text has a line through it.</p>
4. Text Shadow:
Text shadow creates a shadow effect behind the text. You can control the color, offset, blur radius, and spread radius of the shadow.
Example:
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
<p class="text-shadow">This text has a shadow effect.</p>
Text Alignments:
Text alignment in CSS controls how text is positioned within its container. The text-align property is used for this purpose and supports values like left, right, center, and justify.
1. Left Alignment:
Text aligns to the left by default. However, you can explicitly set it using CSS.
Example:
text-align: left;
}
<div class="text-left">
<p>This text is aligned to the left.</p>
</div>
2. Right Alignment:
Align text to the right using the text-align property.
Example:
text-align: right;
}
<div class="text-right">
<p>This text is aligned to the right.</p>
</div>
3. Center Alignment:
Center-align text within its container.
Example:
text-align: center;
}
<div class="text-center">
<p>This text is centered.</p>
</div>
4. Justify Alignment:
Justify aligns text so that it is spread out evenly between the left and right edges of its container, creating a clean, even look.
Example:
text-align: justify;
}
<div class="text-justify">
<p>This text is justified to fill the space evenly.</p>
</div>
Spacing:
CSS provides several properties to control the spacing around text, including letter-spacing, word-spacing, line-height, and text-indent.
1. Letter Spacing:
Adjust the spacing between letters using the letter-spacing property.
Example:
letter-spacing: 2px;
}
<p class="letter-spacing">This text has increased letter spacing.</p>
2. Word Spacing:
Similar to letter spacing, you can adjust the spacing between words using the word-spacing property.
Example:
word-spacing: 5px;
}
<p class="word-spacing">This text has increased word spacing.</p>
3. Line Height:
Line height controls the vertical space between lines of text. It can be set using the line-height property.
Example:
line-height: 1.5; /* 1.5 times the font size */
}
<p class="line-height">This text has increased line height.</p>
4. Text Indent:
Text indent adds space to the beginning of the first line of text in an element.
Example:
text-indent: 20px;
}
<p class="text-indent">This text has an indentation of 20px.</p>
- These CSS properties and examples should help you understand how to apply text decorations, alignments, and spacing to enhance the appearance and readability of text on your webpages. Adjust the values and styles according to your design needs.
- The text-decoration property is used to underline text. You can specify the style, color, and thickness of the underline using additional properties like text-decoration-style, text-decoration-color, and text-decoration-thickness.
Example:
text-decoration: underline;
text-decoration-color: red;
text-decoration-style: dashed;
}
<p class="text-underline">This text has a red dashed underline.</p>
2. Overline:
Similar to underline, you can apply an overline using the text-decoration property.
Example:
text-decoration: overline;
}
<p class="text-overline">This text has an overline.</p>
3. Line-Through:
To add a line through text, use the text-decoration property with the value line-through.
Example:
text-decoration: line-through;
}
<p class="text-line-through">This text has a line through it.</p>
4. Text Shadow:
Text shadow creates a shadow effect behind the text. You can control the color, offset, blur radius, and spread radius of the shadow.
Example:
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
<p class="text-shadow">This text has a shadow effect.</p>
Text Alignments:
Text alignment in CSS controls how text is positioned within its container. The text-align property is used for this purpose and supports values like left, right, center, and justify.
1. Left Alignment:
Text aligns to the left by default. However, you can explicitly set it using CSS.
Example:
text-align: left;
}
<div class="text-left">
<p>This text is aligned to the left.</p>
</div>
2. Right Alignment:
Align text to the right using the text-align property.
Example:
text-align: right;
}
<div class="text-right">
<p>This text is aligned to the right.</p>
</div>
3. Center Alignment:
Center-align text within its container.
Example:
text-align: center;
}
<div class="text-center">
<p>This text is centered.</p>
</div>
4. Justify Alignment:
Justify aligns text so that it is spread out evenly between the left and right edges of its container, creating a clean, even look.
Example:
text-align: justify;
}
<div class="text-justify">
<p>This text is justified to fill the space evenly.</p>
</div>
Spacing:
CSS provides several properties to control the spacing around text, including letter-spacing, word-spacing, line-height, and text-indent.
1. Letter Spacing:
Adjust the spacing between letters using the letter-spacing property.
Example:
letter-spacing: 2px;
}
<p class="letter-spacing">This text has increased letter spacing.</p>
2. Word Spacing:
Similar to letter spacing, you can adjust the spacing between words using the word-spacing property.
Example:
word-spacing: 5px;
}
<p class="word-spacing">This text has increased word spacing.</p>
3. Line Height:
Line height controls the vertical space between lines of text. It can be set using the line-height property.
Example:
line-height: 1.5; /* 1.5 times the font size */
}
<p class="line-height">This text has increased line height.</p>
4. Text Indent:
Text indent adds space to the beginning of the first line of text in an element.
Example:
text-indent: 20px;
}
<p class="text-indent">This text has an indentation of 20px.</p>
These CSS properties and examples should help you understand how to apply text decorations, alignments, and spacing to enhance the appearance and readability of text on your webpages. Adjust the values and styles according to your design needs.
Practice Excercise Practice now