public/subjects/select-and-style-dom

Select & style

Resources

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

• Video Link a CSS stylesheet to your HTML file
• Video CSS - Style with type selectors
• Video HTML/CSS - Set & style with ID selector

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:

Notions

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