You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

2.4 KiB

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