public

History

Clement Denis 4c65e9e273 fix(js): replace base64 url trick by temp file this fix some tests with new version of nodejs		2 years ago
..
README.md	fix(js): replace base64 url trick by temp file	2 years ago
select-and-style.png	Create a copy of the dom tests to js image	2 years ago

README.md

Select & style

Resources

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

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][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: