CSS-Text
CSS Text
- In CSS text can be styled in a variety of ways to control its appearance on a web page.
- We can change properties such as font size, color, and alignment, to achieve the desired visual effect.
Text properties and their usage
Font Properties:
- font-family: Indicates the font family for text.
- font-size: Sets the size of the text.
- font-weight: Controls the thickness of the text.
- font-style: Defines the style of the text (italic, oblique, normal).
p {
font-family: Arial, sans-serif;
font-size: 16px;
font-weight: bold;
font-style: italic;
}
Text Color:
- Sets the color of the text.
p {
color: #333;
}
Text Alignment:
- text-align: Aligns text within its container (left, center, right, justify).
p {
text-align: center;
}
Text Decoration:
- text-decoration: Adds or removes text decorations (underline, overline, line-through, none).
a {
text-decoration: underline;
}
Line Height:
- line-height: Sets the vertical space between lines of text.
p {
line-height: 1.5;
}
Text Transform:
- text-transform: Transform the text (uppercase, lowercase, capitalize).
h1 {
text-transform: uppercase;
}
Letter Spacing:
- letter-spacing: Adjusts the space between characters.
h2 {
letter-spacing: 2px;
}
Text Shadow:
- text-shadow: Adds a shadow effect to the text.
h3 {
text-shadow: 2px 2px 4px #000;
}
Example:
<html>
<head>
</head>
<body>
<h2>Text Color</h2>
<p style="color: blueviolet;"> Color Name </p>
<p style="color: rgb(255,124,100);"> RGB value </p>
</body>
</html>
Output:
Text Color
Color Name
RGB value