7.1 The text-decoration Property
CSS provides various properties for styling and decorating text on web pages. The text-decoration,
text-transform, and text-shadow properties let you add underlining, change text case, and create shadows, making
the text more expressive and appealing.
The text-decoration property manages decorative effects on text, such as underlining, overlining, and
strikethrough. It also allows you to set the color and style of the lines used for decorating text.
Values:
none: removes all text decorationsunderline: underlines the textoverline: adds a line above the textline-through: adds a line through the text (strikethrough)blink: text blinks (not supported by all browsers)text-decoration-color: sets the color of the decoration linetext-decoration-style: sets the style of the line (solid, double, dotted, dashed, wavy)text-decoration-thickness: sets the thickness of the decoration line
Usage Example:
.underline {
text-decoration: underline;
}
.overline {
text-decoration: overline;
}
.line-through {
text-decoration: line-through;
}
.custom-decoration {
text-decoration: underline wavy red;
}
<body>
<p class="underline">This text is underlined.</p>
<p class="overline">This text has a line over it.</p>
<p class="line-through">This text is struck through.</p>
<p class="custom-decoration">This text is underlined with a wavy red line.</p>
</body>
7.2 The text-transform Property
The text-transform property manages text transformation by changing the letter case. It's useful for
automatically adjusting text to headings, lowercase, etc.
Values:
none: no transformations (default)capitalize: first letter of each word becomes uppercaseuppercase: all letters become uppercaselowercase: all letters become lowercasefull-width: converts text to full (double) width (not supported by all browsers)
Usage Example:
.capitalize {
text-transform: capitalize;
}
.uppercase {
text-transform: uppercase;
}
.lowercase {
text-transform: lowercase;
}
<body>
<p class="capitalize">this text will have each word capitalized.</p>
<p class="uppercase">this text will be all uppercase.</p>
<p class="lowercase">THIS TEXT WILL BE ALL LOWERCASE.</p>
</body>
7.3 The text-shadow Property
The text-shadow property adds a shadow to the text, which helps create visual effects
and improve text readability on a web page.
Values:
<offset-x>: horizontal offset of the shadow<offset-y>: vertical offset of the shadow<blur-radius>: blur radius of the shadow (optional)<color>: color of the shadow (optional)
Usage Example:
.text-shadow {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.multiple-shadows {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5), -2px -2px 4px rgba(255, 255, 255, 0.5);
}
<body>
<p class="text-shadow">This text has a shadow.</p>
<p class="multiple-shadows">This text has multiple shadows.</p>
</body>
Code Explanation:
text-shadow: 2px 3px 4px rgba(0, 0, 0, 0.5);: adds a shadow with a horizontal offset of 2px, vertical offset of 3px, blur radius of 4px, and a semi-transparent black colortext-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5), -2px -2px 4px rgba(255, 255, 255, 0.5);: adds two shadows with different parameters, creating a more complex visual effect
GO TO FULL VERSION