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.
 
 
 
 
 
 
Clement Denis 8573f049f2 Create a copy of the dom tests to js image 2 years ago
..
README.md Create a copy of the dom tests to js image 2 years ago
select-and-style.png Create a copy of the dom tests to js image 2 years ago

README.md

Select & style

Resources

We provide you with some content to get started smoothly, check it out!

Instructions

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:

    • margin of 0
    • box-sizing to border-box
    • 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:

    • padding of 20px
    • width of 100%
    • 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

Code examples

To style an element, you systematically have to declare rulesets, composed of a property and a value.

Set the color of div tags to "red":

div {
  color: red;
}

Set the background-color of the HTML element with the id "block-1":

#block-1 {
  color: red;
}

Expected output

This is what you should see in the browser: screenshot

Notions