Day 2: Colors, Fonts & Text

Goal

Learn how to control text appearance using colors, fonts, and spacing properties.

Topics

Colors: names, hex codes, rgb(), rgba()
Fonts: font-family, font-size, font-weight
Text alignment: text-align
Text decoration: underline, line-through
Line height and letter spacing: line-height, letter-spacing

Color Examples

p {
  color: blue;           /* named color */
}

h1 {
  color: #FF5733;        /* hex code */
}

span {
  color: rgba(255, 0, 0, 0.7); /* rgba with transparency */
}

Font Examples

body {
  font-family: 'Arial', sans-serif;
  font-size: 16px;
}

h2 {
  font-weight: bold;
}

Text Alignment & Decoration

h1 {
  text-align: center;
}

p.underline {
  text-decoration: underline;
}

p.strikethrough {
  text-decoration: line-through;
}

Line Height & Letter Spacing

p {
  line-height: 1.8;
  letter-spacing: 1px;
}

Practice

Create a paragraph with a custom color, font, and spacing.
Center a heading and make it bold.

Example HTML with CSS

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSS Day 2 Practice</title>
  <style>
    h1 {
      text-align: center;
      font-weight: bold;
      color: #2E86C1;
    }

    p {
      color: rgb(100, 100, 200);
      font-family: 'Georgia', serif;
      font-size: 18px;
      line-height: 1.8;
      letter-spacing: 1px;
    }

    p.underline {
      text-decoration: underline;
    }

    p.strikethrough {
      text-decoration: line-through;
    }
  </style>
</head>
<body>

  <h1>CSS Styling Basics</h1>
  <p>This is a normal styled paragraph.</p>
  <p class="underline">This paragraph is underlined.</p>
  <p class="strikethrough">This paragraph has a line-through.</p>

</body>
</html>