Exercises: CSS

We have built a website for you to test your CSS knowledge. You can find the code within your javascript-projects/css/exercises directory!

Note

Open the index.html file in your browser to view the application.

Utilize the pwd command to view your current working directory:

The current working directory in the above image is /home/john/Documents/launchcode/curriculum/exercises-studios/javascript-projects/css/exercises

If you copy and paste the filepath after you run the pwd on your machine into a browser window and add index.html to the end of the string you will find your application.

For the exercises, add the following style rules to the website:

Change the background color to yellow.
Check Your Solution
```
body {
    background-color: yellow;
}
```
Change all paragraph text color to green.
Change all h1 to 36 px font size.
Check Your Solution
```
h1 {
    font-size: 36px;
}
```
Align all text to the center of the page.
Let’s say that you don’t like aligning all of the text to the center. Use a CSS class to align only the headings to the center of the page.
Check Your Solution
```
.center {
    text-align: center;
}
```

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

Check Your Solution

<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>

Change the font color of elements with the id, cool-text, to blue.
Use a CSS id to change the elements in the ordered list to a color of your choosing.
Check Your Solution
```
#list-color {
   color: blueviolet;
}
```

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

Check Your Solution

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

Note

We learned from the reading that the location of CSS and the selector type can change the order of precedence of the CSS rules. Try different locations and selector types and see what happens!