root
/
public
mirror of https://github.com/01-edu/public.git
14
27
Fork 0
Code Releases Wiki Activity
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.
5941 Commits
41 Branches
11 Tags
349 MiB
 
 
 
 
 
 
Tree: 09e24ff227
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '09e24ff227'
${ noResults }
public/subjects/DPxAI/select-then-style/README.md

3.3 KiB
Raw Blame History

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!

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: screenshot

Notions