By /

CSS Text Formatting

CSS offers a wide range of properties to control the appearance of text on your web pages. Here are some key ones: 

1. Font Properties:

  • font-family: Specifies the font family to use (e.g., serif, sans-serif, monospace, Arial, Verdana).
  • font-size: Sets the font size (e.g., 16px, 1em, 1rem, inherit).
  • font-weight: Controls the boldness of the text (e.g., normal, bold, bolder, lighter, 100-900).
  • font-style: Sets the font style (e.g., normal, italic, oblique).

2. Text Decoration:

  • text-decoration: Adds decorations like underline, overline, or line-through to the text.

3. Text Alignment:

  • text-align: Aligns the text within its container (e.g., left, right, center, justify).

4. Text Transformation:

  • text-transform: Changes the case of the text (e.g., uppercase, lowercase, capitalize).

5. Text Spacing:

  • letter-spacing: Adjusts the space between letters.
  • word-spacing: Adjusts the space between words.
  • line-height: Sets the vertical spacing between lines of text.

6. Text Indentation:

  • text-indent: Indents the first line of text.

7. Example:

p {
   font-family: Arial, sans-serif;
   font-size: 18px;
   color: #333;
   text-align: justify;
}

This CSS rule styles all <p> elements with:

  • The Arial font (or a similar sans-serif font).
  • A font size of 18 pixels.
  • A dark gray color.
  • Justified text alignment.
Scroll to Top