…
|
||
---|---|---|
.. | ||
README.md | ||
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
of0
box-sizing
toborder-box
opacity
of0.85
-
target the
body
tag and style it with aheight
of100vh
so it takes the viewport height -
target all the
section
tags with the type selector, and style it with:padding
of20px
width
of100%
height
ofcalc(100% / 3)
(one third of thebody
height)
-
target each following element with the
id
selector, using theid
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: