CSS Text

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.

Text Color

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 */
}

Text Alignment

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 */
}

Text Transform

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.

Great for headings, call-to-action buttons, or banners.

lowercase – Converts all text to lowercase letters.

Useful for stylistic elements like tags or labels.

capitalize – Capitalizes the first letter of each word.

Ideal for titles, menu items, or labels.

none – Leaves the text unchanged.

Default behavior.

Examples:

h2 {
  text-transform: uppercase; /* ALL CAPS heading */
}

p.title {
  text-transform: capitalize; /* First letter of each word capitalized */
}

Text Decoration

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 */
}