CSS · Lesson 1 of 4

Change your heading colour

HTML gives your page content. CSS changes its appearance. Here h1 selects the heading, and color sets its text colour.

Your task

Change seagreen to purple, then run the code. Try another heading colour.

Each new lesson builds on your personal page. Your saved lesson draft opens when you return.

Choose an image from your computer

The image stays in your browser. Choose it, then use its filename when you add the image to your code.

        CSS · style.cssh1 {
  color: seagreen;
}
main {
  background: #f0f7f2;
}
        Edit your project HTML
            HTML · index.html<main>
  <h1>Hello, I’m Sara</h1>
  <p>This is my first page.</p>
  <ul>
    <li>Reading</li>
    <li>Drawing</li>
    <li>Learning</li>
  </ul>
</main>
            
        
    

Your page

Checks use your current code. Try the page yourself too.

Did the heading colour change? Try changing the background too, then move on to spacing.

Next: Spacing and borders

I need help

Write the colour after the colon. Keep the semicolon and braces. If the heading does not change, check that color is inside the h1 rule.

More explanation

Save the page to your computer

Download the HTML file

If the download does not start, copy the complete code below into a text file named index.html and save it as UTF-8.

Complete code to save

Your task

Your page

Your feedback