4. Styling Text with CSS: Fonts, Colors, and Text Alignment

Hey there!

Styling text is one of the first and most important steps in making your website look polished and readable. Whether you want to set the perfect font, choose attractive colors, or align your text just right, CSS gives you powerful tools to control how your text appears on the page.

In this post, we’ll cover all the essentials of styling text with CSS — from picking fonts and setting font sizes, to coloring text and controlling alignment. Along the way, you’ll find clear explanations, practical code snippets, and step-by-step instructions suitable for beginners and intermediate developers alike.

Ready? Let’s dive into the world of CSS text styling!

1. Understanding the Basics of CSS Text Styling

CSS text styling involves modifying how text looks on your web pages using various CSS properties. The most common properties include:

Fonts: Change the typeface, size, weight, and style.
Colors: Set the color of your text to match your design.
Text alignment: Align text to left, center, right, or justify it.
Other styling options: Such as letter spacing, line height, text decoration, and more.

2. Styling Fonts with CSS

a. Setting the Font Family

The font-family property lets you specify which font your text should use.

p {
  font-family: Arial, sans-serif;
}

This tells the browser to use Arial if available, or fall back to any sans-serif font if Arial is not installed.

You can specify multiple fonts as a “font stack” for better compatibility:

h1 {
  font-family: "Georgia", "Times New Roman", serif;
}

Tip: Always end your font stack with a generic family like serif, sans-serif, or monospace to ensure fallback options.

b. Changing Font Size

Use font-size to adjust the size of your text. You can use different units like pixels (px), ems (em), rems (rem), or percentages (%).

h2 {
  font-size: 24px;
}

p {
  font-size: 1.2em; /* 1.2 times the parent element's font size */
}

px is fixed size, good for precise control.
em and rem are relative units; rem is relative to the root (html) font size.

c. Font Weight and Style

Control how bold or light the text appears:

strong {
  font-weight: bold;
}

.light-text {
  font-weight: 300; /* lighter font weight */
}

em {
  font-style: italic;
}

Common font-weight values include normal (400), bold (700), or numeric values (100 to 900).

3. Applying Colors to Text

Use the color property to set text color.

p {
  color: #333333; /* dark gray */
}

.highlight {
  color: #ff4500; /* bright orange */
}

You can use named colors (red), HEX codes (#ff0000), RGB (rgb(255,0,0)), or even HSL (hsl(0, 100%, 50%)).

4. Text Alignment and Spacing

a. Text Alignment

Align your text horizontally with the text-align property:

h1 {
  text-align: center;
}

p {
  text-align: justify;
}

Common values:

left (default)
center
right
justify (stretches lines to fill the container)

b. Line Height and Letter Spacing

Improve readability by adjusting line height and spacing between letters:

p {
  line-height: 1.6; /* 1.6 times the font size */
  letter-spacing: 0.05em; /* slight space between letters */
}

5. Putting It All Together — Practical Example

Here’s a complete example of styling text on a webpage:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>CSS Text Styling Example</title>
  <style>
    body {
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      color: #222;
      line-height: 1.5;
      margin: 40px;
    }

    h1 {
      font-family: "Georgia", serif;
      font-size: 36px;
      font-weight: bold;
      color: #005f73;
      text-align: center;
      margin-bottom: 20px;
    }

    p {
      font-size: 18px;
      color: #333;
      text-align: justify;
      letter-spacing: 0.03em;
      margin-bottom: 15px;
    }

    .highlight {
      color: #ee6c4d;
      font-weight: 600;
    }
  </style>
</head>
<body>
  <h1>Welcome to Stylish Text with CSS</h1>
  <p>This paragraph shows how you can control your text's <span class="highlight">font, color, and alignment</span> using simple CSS properties.</p>
  <p>By adjusting font family, size, weight, and spacing, you can create readable and visually appealing web pages for your users.</p>
</body>
</html>

Open this in your browser to see the font styles, colors, and alignments in action.

6. Additional Tips and Tricks

Use web fonts from services like Google Fonts to access thousands of stylish fonts beyond system defaults. Example: htmlCopy<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet"> Then: cssCopybody { font-family: 'Roboto', sans-serif; }
Use text-transform to change letter casing: cssCopyh2 { text-transform: uppercase; }
Use text-decoration to add underline, line-through, or remove decorations: cssCopya { text-decoration: none; }

7. Conclusion and Next Steps

You now know how to style text using CSS to control fonts, colors, and alignment. This foundational skill helps make your websites more readable and attractive.

Next steps: Explore more advanced text effects like shadows (text-shadow), responsive typography, or animations on text. You might also want to dive into CSS layout techniques such as Flexbox and Grid to position your text and other elements perfectly.

Until then — happy styling!