Change the background color to yellow.
style.css
1body {
2 background-color: yellow;
3}
Change all h1 to 36 px font size.
style.css
1h1 {
2 font-size: 36px;
3}
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>
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>