CSS Text Styling: Font, Color, Alignment, and Decoration

CSS Text

In CSS, text can be styled in various ways to enhance the appearance of content on a web page. You can modify properties such as font, color, alignment, spacing, decoration, and shadow to improve readability and design.

Font Properties

Font properties define how the text appears in terms of size, style, and weight.

p {
  font-family: Arial, sans-serif;
  font-size: 16px;
  font-weight: bold;
  font-style: italic;
}

Common Font Properties:

font-family: Sets the typeface (e.g., Arial, Verdana).

font-size: Sets the text size (e.g., 16px, 1.2em).

font-weight: Sets thickness (normal, bold, 100–900).

font-style: Changes the style (normal, italic, oblique).

Text Color

The color property sets the color of the text.

p {
  color: #333;
}

You can use:

Color names (red, blue)

HEX values (#ff0000)

RGB values (rgb(255,0,0))

Text Alignment

Align text within its container using text-align.

p {
  text-align: center;
}

Possible values:

left

center

right

justify

Text Decoration

The text-decoration property adds or removes text effects.

a {
  text-decoration: underline;
}

Options:

underline

overline

line-through

none

Line Height

line-height sets the vertical spacing between lines.

p {
  line-height: 1.5;
}

Helps improve readability.

Text Transform

text-transform changes the case of the text.

h1 {
  text-transform: uppercase;
}

Options:

uppercase

lowercase

capitalize

Letter Spacing

Adjust spacing between characters using letter-spacing.

h2 {
  letter-spacing: 2px;
}

Text Shadow

Adds a shadow behind the text.

h3 {
  text-shadow: 2px 2px 4px #000;
}

Example: Text Colors

<!DOCTYPE html>
<html>
  <head>
    <title>Text Color Example</title>
  </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: