mirror of https://github.com/01-edu/public.git
2 changed files with 78 additions and 22 deletions
@ -1,22 +1,49 @@ |
|||||||
|
|
||||||
|
|
||||||
export const tests = [] |
export const tests = [] |
||||||
|
|
||||||
tests.push(async ({ eq }) => { |
tests.push(async ({ eq }) => { |
||||||
// check the CSS stylesheet is linked in the head tag
|
// check the CSS stylesheet is linked in the head tag
|
||||||
|
|
||||||
return eq.$('head link', { |
await eq.$('head link', { |
||||||
rel: 'stylesheet', |
rel: 'stylesheet', |
||||||
href: 'http://localhost:9898/select-and-style/select-and-style.css', |
href: 'http://localhost:9898/select-and-style/select-and-style.css', |
||||||
}) |
}) |
||||||
}) |
}) |
||||||
|
|
||||||
|
|
||||||
tests.push(async ({ eq }) => { |
tests.push(async ({ eq }) => { |
||||||
// check the universal selector has been declared properly
|
// check the universal selector has been declared properly
|
||||||
|
|
||||||
return eq.css('*', { |
await eq.css('*', { |
||||||
margin: '0px', |
margin: '0px', |
||||||
opacity: '0.85', |
opacity: '0.85', |
||||||
boxSizing: 'border-box', |
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' }) |
||||||
|
}) |
||||||
|
@ -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). |
### Instructions |
||||||
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 a `margin` of 0, `box-sizing` to "border-box" and an `opacity` of 0.85 |
Now that you created & identified properly the different sections of your being, |
||||||
- target the `body` tag and style it with a `height` of 100vh so it takes the viewport height |
it's time to make it look more living-like! To achieve that, you're going to |
||||||
- 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) |
style it with [CSS][0]. Create a CSS file, [link it][1] to your |
||||||
- 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: |
`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` |
- `face` with a "cyan" `background-color` |
||||||
- `upper-body` with a "blueviolet" `background-color` |
- `upper-body` with a "blueviolet" `background-color` |
||||||
- `lower-body` with a "lightsalmon" `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. |
To style an element, you systematically have to declare [rulesets][5], composed |
||||||
Here is an exemple of how to set the color of `div` tags to "red": |
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; |
color: red; |
||||||
} |
} |
||||||
``` |
``` |
||||||
|
|
||||||
### Expected output |
### Expected output |
||||||
|
|
||||||
This is what you should see in the browser: |
This is what you should see in the browser: ![screenshot](select-and-style.png) |
||||||
![](select-and-style.png) |
|
||||||
|
|
||||||
### Notions |
### Notions |
||||||
|
|
||||||
- [`link` a CSS file](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link#including_a_stylesheet) |
- [`link` a CSS file][1] |
||||||
- [CSS basics](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics) |
- [CSS basics][7] |
||||||
- [ruleset](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics#anatomy_of_a_css_ruleset) |
- [ruleset][5] |
||||||
- [List of different selectors](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics#different_types_of_selectors) |
- [List of different selectors][6] |
||||||
- [universal selector](https://developer.mozilla.org/en-US/docs/Web/CSS/Universal_selectors) |
- [universal selector][2] |
||||||
- [type selector](https://developer.mozilla.org/en-US/docs/Web/CSS/Type_selectors) |
- [type selector][3] |
||||||
- [`id` selector](https://developer.mozilla.org/en-US/docs/Web/CSS/ID_selectors) |
- [`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 |
||||||
|
Loading…
Reference in new issue