public/subjects/select-and-style

Select & style

Now that you created & identified properly the different sections of your being, it's time to make it look more living-like! To achieve that, you're going to style it with CSS. Create a CSS file, link it to your select-and-style.html, and:

• target all the elements with the universal selector and style them with a margin of 0, box-sizing to "border-box" and an opacity of 0.85
• target the body tag and style it with a height of 100vh so it takes the viewport height
• target all the section tags with the type selector, and style it with a padding of 20 pixels, a width of 100% and a height of "calc(100% / 3)" (one third of the body height)
• target each following element with the id selector, using the id you defined earlier for each section, and style it:
  • face with a "cyan" background-color
  • upper-body with a "blueviolet" background-color
  • lower-body with a "lightsalmon" background-color

To style an element, you systematically have to declare rulesets, composed of a property and a value. Here is an exemple of how to set the color of div tags to "red":

  color: red;
}

Expected output

This is what you should see in the browser:

Notions

• link a CSS file
• CSS basics
• ruleset
• List of different selectors
• universal selector
• type selector
• id selector