Exercise Solutions: CSSΒΆ

  1. Change the background color to yellow.

    style.css

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

    Back to the exercises

  1. Change all h1 to 36 px font size.

    style.css

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

    Back to the exercises

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

    style.css

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

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

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

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

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

    Back to the exercises