mirror of https://github.com/01-edu/public.git
select-and-style: test and review
This commit is contained in:
parent
c3987e9f55
commit
b557252cda
|
@ -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' })
|
||||
})
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Reference in New Issue