Exercise Solutions: CSSΒΆ

  1. Change the background color to yellow.

    style.css

    1
2
3
    body {
   background-color: yellow;
}

    Back to the exercises

  1. Change all h1 to 36 px font size.

    style.css

    1
2
3
    h1 {
   font-size: 36px;
}

    Back to the exercises

  1. Use a CSS class to align only the headings to the center of the page.

    style.css

    1
2
3
    .center {
   text-align: center;
}

    index.html - add a center class to all header tags (h1, h2, etc.)

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
    <body>
   <h1 class="center">My Very Cool Web Page</h1>
   <h2 class="center">Why this Website is Very Cool</h2>
   <ol>
      <li>I made it!</li>
      <li>This website is colorful!</li>
   </ol>
   <h2 class="center" id="cool-text">Why I love Web Development</h2>
   <p>Web Development is a very cool skill that I love learning!</p>
   <p>I love making websites because all I have to do is reload the page to see the changes I have made!</p>
</body>

    Back to the exercises

  1. Use a CSS id to change the elements in the ordered list to a color of your choosing.

    style.css

    1
2
3
    #list-color {
   color: blueviolet;
}

    index.html - add the id attribute to the ol tag

    1
2
3
4
    <ol id="list-color">
   <li>I made it!</li>
   <li>This website is colorful!</li>
</ol>

    Back to the exercises