public/subjects/DPxAI/select-then-style

Select then style

Brainpower mode

Context

To bring your robot friend to life, it's not enough to just build its skeleton with HTML. Your robot needs personality and style, and that's where CSS (Cascading Style Sheets) comes in. CSS is like the clothing and accessories that give your robot its unique look and feel. It helps you decorate and arrange the elements on your page, making everything look just right. Ready to start styling? Let’s dive in and give your robot buddy the perfect look!

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 have created and properly identified the different sections of your being, it's time to make it look more lifelike! To achieve that, you're going to style it with CSS. Create a CSS file, link it to your select-then-style.html, and:

• Target all the elements with the universal selector and style them with:

  • margin of 0
  • box-sizing set 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 them with:

  • padding of 20px
  • width of 100%
  • height of calc(100% / 3) (one third of the body height)

• Target each of the following elements with the id selector, using the id you defined earlier for each section, and style them:

  • 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