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.
6039 Commits
41 Branches
11 Tags
349 MiB
 
 
 
 
 
 
Tree: 62486ed720
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '62486ed720'
${ noResults }
public/subjects/select-and-style-dom
Clement Denis 4c65e9e273
fix(js): replace base64 url trick by temp file 		2 years ago
..
README.md fix(js): replace base64 url trick by temp file 2 years ago
select-and-style.png
…

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][1] 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;
}

How to submit

This exercise must be submited as a JS file, thankfully, javascript allows you to write CSS !

Here is how you would submit the CSS sample from above in the editor:

document.documentElement.innerHTML = `
<head>
  <style>

div {
  color: red;
}

#block-1 {
  color: red;
}

  </style>
</head>
<body>
  <div>hello</div>
</body>
`

Make sure the css is between <style> tags and it will be loaded !

Expected output

This is what you should see in the browser: screenshot

Notions