From a083ea478d8e6de5ba3967d0c438ef23b660b0a6 Mon Sep 17 00:00:00 2001 From: Marie Malarme Date: Fri, 26 Feb 2021 23:30:16 +0000 Subject: [PATCH] Update subject exercise 3 "Select & style" --- subjects/select-and-style/README.md | 23 ++++++++++++++--------- 1 file changed, 14 insertions(+), 9 deletions(-) diff --git a/subjects/select-and-style/README.md b/subjects/select-and-style/README.md index 2adaa224..34ddf34c 100644 --- a/subjects/select-and-style/README.md +++ b/subjects/select-and-style/README.md @@ -1,15 +1,15 @@ ### Select & style -Now that you created & identified properly the different elements of your being, it's time to make it look more living-like! To achieve that, you're going to style it with [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS). -Create a CSS file, [link it](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link#including_a_stylesheet) to your `index.html`, and : +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](https://developer.mozilla.org/en-US/docs/Web/CSS). +Create a CSS file, [link it](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link#including_a_stylesheet) to your `select-and-style.html`, and: -- target all the elements with the [universal selector](https://developer.mozilla.org/en-US/docs/Web/CSS/Universal_selectors) and style them with an `opacity` of 0.8 -- target all the `section` tags with the [type selector](https://developer.mozilla.org/en-US/docs/Web/CSS/Type_selectors), and style it with a `padding` of 20 pixels and a `margin` of 15 pixels +- target all the elements with the [universal selector](https://developer.mozilla.org/en-US/docs/Web/CSS/Universal_selectors) and style them with a `margin` of 0, `box-sizing` to "border-box" and an `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](https://developer.mozilla.org/en-US/docs/Web/CSS/Type_selectors), and style it with a `padding` of 20 pixels, a `width` of 100% and a `height` of "calc(100% / 3)" (one third of the `body` height) - target each following element with the [`id` selector](https://developer.mozilla.org/en-US/docs/Web/CSS/ID_selectors), using the `id` you defined earlier for each section, and style it: - - `face` with a `width` & `height` of 80 pixels, and a "deeppink" `background-color` - - `upper-body` with a `width` of 200 pixels, a `height` of 220 pixels, and a "blue" `background-color` - - `lower-body` with a `width` of 100 pixels, a `height` of 220 pixels, and a "yellow" `background-color` -- target the `body` tag and style it with a `display` at "flex", a `flex-direction` at "column" and a `align-items` at "center" (this is to turn the `body` into a [`flex` container](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox), so the elements will be centered in the page) + - `face` with a "cyan" `background-color` + - `upper-body` with a "blueviolet" `background-color` + - `lower-body` with a "lightsalmon" `background-color` To style an element, you systematically have to declare [rulesets](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics#anatomy_of_a_css_ruleset), composed of a property and a value. Here is an exemple of how to set the color of `div` tags to "red": @@ -19,6 +19,12 @@ Here is an exemple of how to set the color of `div` tags to "red": } ``` +### Expected output + +This is what you should see in the browser: + + + ### Notions - [`link` a CSS file](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link#including_a_stylesheet) @@ -28,4 +34,3 @@ Here is an exemple of how to set the color of `div` tags to "red": - [universal selector](https://developer.mozilla.org/en-US/docs/Web/CSS/Universal_selectors) - [type selector](https://developer.mozilla.org/en-US/docs/Web/CSS/Type_selectors) - [`id` selector](https://developer.mozilla.org/en-US/docs/Web/CSS/ID_selectors) -- [Flexbox layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox), you can train on [Flexbox froggy](https://flexboxfroggy.com/)