![]() |
3 years ago | |
---|---|---|
.. | ||
README.md | 3 years ago | |
select-and-style.png | 4 years ago |
README.md
Select & style
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 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 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;
}
Expected output
This is what you should see in the browser: