CSS Text Properties
1. Text Shadow
The text-shadow property is used to add shadow effects to text. It takes values for horizontal and vertical offset, blur radius, and shadow color.
Example: text-shadow: 2px 2px 5px gray;
2. Text Transform: Uppercase
The text-transform: uppercase; property converts all the text to uppercase letters.
Example: text-transform: uppercase;
3. Text Transform: Lowercase
The text-transform: lowercase; property converts all the text to lowercase letters.
Example: text-transform: lowercase;
4. Bold Text
The font-weight: bold; property makes the text bold, which emphasizes the text and makes it stand out.
Example: font-weight: bold;
5. Italic Text
The font-style: italic; property italicizes the text, giving it a slanted appearance for emphasis or style.
Example: font-style: italic;
6. Underline Text
The text-decoration: underline; property underlines the text.
Example: text-decoration: underline;
Example
<html>
<head>
<title>Text properties</title>
<link rel="stylesheet" href="text-styles.css">
</head>
<body>
<h1 class="wlcm">Welcome</h1>
<p class="para">Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Voluptatem alias corporis mollitia repudiandae. Numquam commodi, quisquam exercitationem
sed nam quia explicabo obcaecati quibusdam. Cum mollitia quasi tempore molestias
earum veritatis! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem
alias corporis mollitia repudiandae. Numquam commodi, quisquam exercitationem sed nam
quia explicabo obcaecati quibusdam. Cum mollitia quasi tempore molestias earum
veritatis!</p>
</body>
</html>
h1.wlcm{
color: red;
text-align: center;
font-size: 100px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
text-transform: uppercase;
text-shadow: 0px 30px 20px greenyellow;
}
p.para{
text-transform: lowercase;
font-weight:bold;
font-style: italic;
text-decoration: underline;
}