CSS · Lesson 4 of 4

Give your page your own style

Combine colours, spacing, and an organised list. max-width limits the content width, and @media changes the layout on smaller screens.

Your task

Choose your colours and spacing. Save and open the page, then narrow the browser. Check that the list becomes a column on a small screen.

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.cssmain {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
}
h1 {
  color: seagreen;
}
ul {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
@media (max-width: 600px) {
  ul {
    flex-direction: column;
  }
}
        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.

Is the text readable and the list organised on phone and desktop? Your page and styles continue into JavaScript, where you will add interaction.

Next: JavaScript and Interaction

I need help

Start with one colour and simple spacing. Keep flex-wrap so the list stays inside the page. “More explanation” has a complete example and extra exercises.

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