? CSS Text Properties

⚡ Quick Overview

CSS text properties are used to control how text looks on a web page—its color, alignment, decoration (underline, line-through), capitalization, spacing, and even shadow. Mastering these properties helps you create clear, readable, and attractive UI text.

• color – text color
• text-align – horizontal alignment of text
• text-decoration – underline, line-through, etc.
• text-transform – uppercase, lowercase, capitalize
• letter-spacing – space between letters
• word-spacing – space between words
• text-shadow – adds depth and glow effects to text

? Key Concepts

• Use color to match text with your brand or theme.
• text-align is applied to block-level containers to align inner text.
• text-decoration is commonly used for links and emphasis.
• text-transform changes how text appears without changing the actual HTML content.
• letter-spacing and word-spacing help with readability and design balance.
• text-shadow can make headings pop or create subtle depth.

? Text Color (color)

The color property sets the text color. You can use HEX, RGB, HSL, or named colors like red. Always ensure sufficient contrast for accessibility.

// Set paragraph text color using a HEX value
p {
color:#ff5733;
}

? Text Alignment (text-align)

The text-align property controls the horizontal alignment of inline content inside a block-level element. Common values are left, right, center, and justify.

// Center-align text inside a container
.text-box {
text-align:center;
}

?️ Text Decoration (text-decoration)

The text-decoration property adds visual effects such as underline, overline, line-through, or none. It is often used to style links or highlight important text.

// Remove underline from links and add it on hover
a {
text-decoration:none;
}

a:hover {
text-decoration:underline;
}

? Text Transformation (text-transform)

The text-transform property controls the capitalization of text. It does not change the actual text in HTML—only how it is displayed.

• uppercase – converts all letters to capitals
• lowercase – converts all letters to small letters
• capitalize – capitalizes the first letter of each word

// Display headings in uppercase without changing HTML text
h2 {
text-transform:uppercase;
}

↔️ Text Spacing (letter-spacing & word-spacing)

Use letter-spacing to control the space between characters and word-spacing for the space between words. These are useful for headings and hero text where typography is important.

// Add spacing to letters and words for a stylized heading
.heading-spaced {
letter-spacing:2px;
word-spacing:5px;
}

? Text Shadow (text-shadow)

The text-shadow property adds shadow behind text. It takes values in the order: horizontal offset, vertical offset, blur radius, color.

// Add a soft shadow behind large headings
.hero-title {
text-shadow:2px 2px 4px rgba(0,0,0,0.3);
}

? Key Properties Summary

? Common Use Cases

• Brand headings with custom color, letter-spacing, and text-shadow.
• Blog paragraphs using text-align: justify; for neat alignment.
• Navigation links styled with text-decoration and hover effects.
• Buttons or badges using text-transform: uppercase; for emphasis.