CSS Colors and Text Styling

Hello friends 👋 welcome back to our CSS journey. In the last tutorial, we learned how CSS works and how it can change the look of a web page. Today, we are going to explore colors and text styling. These are some of the most exciting parts of CSS because they let us bring life and creativity to our websites.

Using Colors in CSS

You can add colors to almost any element on a webpage. CSS supports colors in different ways:

  • Color names like red, blue, green, yellow.

  • Hex codes like #ff0000 for red or #00ff00 for green.

  • RGB values like rgb(0, 0, 255) for blue.

  • RGBA values (the “A” stands for transparency), like rgba(255, 0, 0, 0.5) for semi-transparent red.

Example:

<!DOCTYPE html>
<html>
<head>
  <title>CSS Colors</title>
  <style>
    body {
      background-color: lightyellow;
    }
    h1 {
      color: darkred;
    }
    p {
      color: #0066cc;
    }
  </style>
</head>
<body>
  <h1>CSS Colors Example</h1>
  <p>This paragraph is blue using a hex code.</p>
</body>
</html>

In this example, the background is light yellow, the heading is dark red, and the paragraph is blue.

Text Styling with CSS

Text is a very important part of any website. CSS lets you change the font, size, spacing, and decoration of text to make it more readable and attractive.

Here are some common text properties:

  • color → sets the text color.

  • font-size → changes the size of text.

  • font-family → sets the font style (like Arial, Verdana, Times New Roman).

  • font-weight → makes text bold.

  • font-style → makes text italic.

  • text-align → aligns text (left, right, center).

  • text-decoration → adds or removes underlines.

Example:

<!DOCTYPE html>
<html>
<head>
  <title>CSS Text Styling</title>
  <style>
    h1 {
      color: purple;
      text-align: center;
      font-family: Arial, sans-serif;
    }
    p {
      font-size: 18px;
      line-height: 1.5;
      font-style: italic;
    }
    a {
      color: green;
      text-decoration: none;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <h1>Text Styling with CSS</h1>
  <p>This is an italic paragraph with larger text.</p>
  <p>Here is a <a href="#">styled link</a> with no underline.</p>
</body>
</html>


When you run this, the heading will be purple and centered, paragraphs will be italic with bigger text, and the link will be bold green with no underline.

Try It Yourself

Create a new file called colors.html. Inside it, write a heading and two paragraphs. Use CSS to:

  • Give the page a light background.

  • Style the heading with a bold color and centered text.

  • Make one paragraph italic and the other bold.

  • Change the color of links to your favorite color.

Save it and open in your browser. Experiment with different colors and fonts until you like the design.

Congratulations 🎉 You just learned how to add colors and style text with CSS. In the next tutorial, we will learn about borders, margins, and padding — the secrets to spacing and shaping your web pages. 🚀