diff --git a/dom/select-and-style_test.js b/dom/select-and-style_test.js index 08cab01f..0ae3dfb1 100644 --- a/dom/select-and-style_test.js +++ b/dom/select-and-style_test.js @@ -1,22 +1,49 @@ - export const tests = [] tests.push(async ({ eq }) => { // check the CSS stylesheet is linked in the head tag - return eq.$('head link', { + await eq.$('head link', { rel: 'stylesheet', href: 'http://localhost:9898/select-and-style/select-and-style.css', }) }) + tests.push(async ({ eq }) => { // check the universal selector has been declared properly - return eq.css('*', { + await eq.css('*', { margin: '0px', opacity: '0.85', boxSizing: 'border-box', }) }) + + +tests.push(async ({ eq }) => { + // check that the body was styled + + await eq.css('body', { height: '100vh' }) +}) + + +tests.push(async ({ eq }) => { + // check that sections elements are styled + + await eq.css('section', { + padding: '20px', + width: '100%', + height: 'calc(33.3333%)', + }) +}) + + +tests.push(async ({ eq }) => { + // check that the individual sections are styled + + await eq.css('#face', { backgroundColor: 'cyan' }) + await eq.css('#upper-body', { backgroundColor: 'blueviolet' }) + await eq.css('#lower-body', { backgroundColor: 'lightsalmon' }) +}) diff --git a/subjects/select-and-style/README.md b/subjects/select-and-style/README.md index 7d54d686..07e520d2 100644 --- a/subjects/select-and-style/README.md +++ b/subjects/select-and-style/README.md @@ -1,35 +1,64 @@ -### Select & style +## Select & style -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: +### Instructions -- 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: +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][0]. Create a CSS file, [link it][1] to your +`select-and-style.html`, and: + +- target all the elements with the [universal selector][2] 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][3], 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][4], 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` -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": +To style an element, you systematically have to declare [rulesets][5], composed +of a property and a value. Here is an exemple of how to set the color of `div` +tags to `"red"`: -```div { +```css +div { color: red; } ``` ### Expected output -This is what you should see in the browser: -![](select-and-style.png) +This is what you should see in the browser: ![screenshot](select-and-style.png) ### Notions -- [`link` a CSS file](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link#including_a_stylesheet) -- [CSS basics](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics) -- [ruleset](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics#anatomy_of_a_css_ruleset) -- [List of different selectors](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics#different_types_of_selectors) -- [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) +- [`link` a CSS file][1] +- [CSS basics][7] +- [ruleset][5] +- [List of different selectors][6] +- [universal selector][2] +- [type selector][3] +- [`id` selector][4] + +[0]: https://developer.mozilla.org/en-US/docs/Web/CSS +[1]: + https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link#including_a_stylesheet +[2]: https://developer.mozilla.org/en-US/docs/Web/CSS/Universal_selectors +[3]: https://developer.mozilla.org/en-US/docs/Web/CSS/Type_selectors +[4]: https://developer.mozilla.org/en-US/docs/Web/CSS/ID_selectors +[5]: + https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics#anatomy_of_a_css_ruleset +[6]: + https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics#different_types_of_selectors +[7]: + https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics