Project 1: Color My Page

Project 1: Color My Page

Your first CSS project: turn a boring gray page into something colorful.

The goal

Style an existing HTML page with your own colors, fonts and button look.

What you practice

• Linking an external stylesheet
• Element selectors
• The color property (text)
• background-color
• text-align and font-size

Starter CSS

body {
  background-color: #fff8f0;
  color: #333;
  font-family: Arial, sans-serif;
}

h1 {
  color: coral;
  text-align: center;
}

button {
  background-color: coral;
  color: white;
  border: none;
  padding: 10px 16px;
  border-radius: 8px;
}

Do it

1. Link the stylesheet with a <link> tag in the head.
2. Give the body a soft background and a readable text color.
3. Make every <h1> striking; center it.
4. Style all buttons so they look like buttons.

Checklist

• [ ] Stylesheet linked in the head
• [ ] Body background + text color
• [ ] One heading with a new color
• [ ] A button that no longer looks default
• [ ] The page is easy to read (good contrast)

TL;DR

Selector + property + value. Pick colors with enough contrast, and link your stylesheet in the head.