Clean • Professional
Text is one of the most important parts of any website. CSS gives you full control over how text looks, behaves, and is positioned. You can style its color, size, font, alignment, decoration, spacing, and more.
The color property in CSS sets the color of the text inside an element. y controlling text color, you can improve readability, highlight important information, or match your website’s design theme.
Examples:
p {
color: #333333; /* HEX color for dark gray */
}
h1 {
color: rgb(255, 87, 51); /* RGB color for bright orange-red */
}
span.highlight {
color: hsl(210, 50%, 40%); /* HSL color for deep blue */
}
The text-align property defines horizontal alignment of text within its container. By adjusting alignment, you can improve readability, structure your content better, and create visually appealing designs.
Common Values:
left
Aligns text to the left edge of the container (default for most browsers).
Best for most paragraphs and body text in left-to-right languages.
right
Aligns text to the right edge of the container.
Useful for side notes, small callouts, or right-to-left languages.
center
Centers text horizontally within the container.
Ideal for headings, banners, buttons, or other focal elements.
justify
Stretches text so that each line fills the container from left to right.
Often used in articles, reports, and books for a neat block-style appearance.
Examples:
h1 {
text-align: center; /* Center-aligned heading */
}
p {
text-align: justify; /* Evenly spaced text across the line */
}
The text-transform property changes the case of text without altering the HTML content. It’s purely visual, making it easy to control the case of headings, buttons, or any text element.
Common Values:
uppercase – Converts all text to uppercase letters.
lowercase – Converts all text to lowercase letters.
capitalize – Capitalizes the first letter of each word.
none – Leaves the text unchanged.
Examples:
h2 {
text-transform: uppercase; /* ALL CAPS heading */
}
p.title {
text-transform: capitalize; /* First letter of each word capitalized */
}
The text-decoration property is used to add or remove decorations such as underlines, overlines, or line-throughs. It helps highlight links, indicate deleted content, or create stylistic effects.
Common Values:
none – Removes all text decorations (e.g., removing the default underline from links).
underline – Adds a line beneath the text.
overline – Adds a line above the text.
line-through – Strikes through the text.
underline overline – Combines underline and overline.
Additional Feature:
text-decoration-color allows customizing the color of the decoration line, enabling unique visual styles.Examples:
a {
text-decoration: none; /* Removes default underline from links */
}
p.del {
text-decoration: line-through; /* Strike-through effect */
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Text Example</title>
<style>
.example-text {
/* Text Color */
color: #3498db;
/* Text Alignment */
text-align: center;
/* Text Transform */
text-transform: uppercase;
/* Text Decoration */
text-decoration: underline overline;
/* Additional Styling for Visibility */
font-size: 36px;
font-family: Arial, sans-serif;
margin: 50px;
}
</style>
</head>
<body>
<h1 class="example-text">CSS Text Example</h1>
</body>
</html>Output :
