public/subjects/select-and-style

Select & style

Now that you created & identified properly the different elements 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 index.html, and :

• target all the elements with the universal selector and style them with an opacity of 0.8
• target all the section tags with the type selector, and style it with a padding of 20 pixels and a margin of 15 pixels
• target each following element with the id selector, using the id you defined earlier for each section, and style it:
  • face with a width & height of 80 pixels, and a "lime" background-color
  • upper-body with a width of 200 pixels, a height of 220 pixels, and a "deeppink" background-color
  • lower-body with a width of 100 pixels, a height of 220 pixels, and a "yellow" background-color
• target the body tag and style it with a display at "flex", a flex-direction at "column" and a align-items at "center" (this is to turn the body into a flex container, so the elements will be centered in the page)

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;
}

Notions

• link a CSS file
• CSS basics
• ruleset
• List of different selectors
• universal selector
• type selector
• id selector
• Flexbox layout, you can train on Flexbox froggy