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