CSS Text

CSS Text

CSS Outline
Next

CSS provides a vast array of properties to control the appearance of text. From changing colors and alignment to adding decorative effects and adjusting the spacing between letters, mastering text properties is essential for readability and design.

How to Style Text in CSS?

In CSS you can style CSS in a wide variety of ways.

Text Color and Alignment

These properties define the basic visual behavior of text blocks.

A. Text Color (color)

You can use the color property to set the text color. The color can be specified with color name, Hexadecimal value, rgb/rgba value, or hsl/hsla value.

Example: p { color: 006dda; }

.color-name{
   color: red;
}
.hex {
   color: #006dda;
}
.rgb{
   color: rgb(245, 200, 98);
}
.rgba{
   color: rgb(245, 200, 98, 0.5);
}
.hsl{
   color: hsla(8deg, 78%, 30%);
}
.hsla{
   color: hsla(8deg, 78%, 30%, 0.5);
}

Output

This paragraph is styled using colour name red

This paragraph is styled using Hexadecimal value #006dda

This paragraph is styled using rgb value rgb(245, 200, 98)

This paragraph is styled using rgba value rgb(245, 200, 98, 0.5)

This paragraph is styled using hsl value hsla(8deg, 78%, 30%)

This paragraph is styled using hsla value hsla(8deg, 78%, 30%, 0.5)

B. Text Alignment (text-align)

Specifies the horizontal alignment of the text within its container.