CSS: Appearance

Colours and fonts

Lesson 7 of 18 · About 20 minutes

Your goal: Style your existing hobby page.

Learn

CSS rules select elements and set properties. Put rules inside style in the head. background-color changes a background; color changes text. Use CSS for colours in new work.

View starter code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>My hobby page</title>
    <style>
      body {
        background-color: white;
        color: black;
      }
    </style>
  </head>

  <body>
    <h1>My hobby</h1>
    <p>I enjoy learning something new.</p>
  </body>
</html>

Your challenge

Use your saved hobby page or this starter. Set a light background, dark text and a readable font.

Keep developing your hobby page: Download HTML before leaving the sandbox, then choose Open HTML file when returning to your project. Load saved draft restores only this lesson’s draft in this browser.

Practise in the sandbox

Show a hint

Inside style, try body { background-color: lightblue; color: #172554; font-family: Arial, sans-serif; }.

Show a sample answer

Try the challenge first. This is one possible answer or a snippet to adapt.

body {
  background-color: lightblue;
  color: #172554;
  font-family: Arial, sans-serif;
}

Check your work

All text remains easy to read against its background.

I tried the challenge and checked the result.

Completion is your own check, not an automatic grade.