Skip to content

Commit bf499fd

Browse files
teoli2003teoli2003
authored
Merge pull request mdn#81 from estelle/cascadelayer
Cascade Layers: New task
2 parents 6c6857c + 77220ca commit bf499fd

File tree

5 files changed

+169
-59
lines changed

5 files changed

+169
-59
lines changed

‎learn/tasks/cascade/cascade-download.html

+3-8
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,10 @@
1-
<!doctype html>
1+
<!DOCTYPE html>
22
<html lang="en">
3-
43
<head>
5-
<meta charset="utf-8">
4+
<meta charset="utf-8" />
65
<title>The Cascade Task</title>
76

87
<style>
9-
108
body {
119
background-color: #fff;
1210
color: #333;
@@ -28,7 +26,6 @@
2826
</head>
2927

3028
<body>
31-
3229
<div id="outer" class="container">
3330
<div id="inner" class="container">
3431
<ul>
@@ -41,7 +38,5 @@
4138
</ul>
4239
</div>
4340
</div>
44-
4541
</body>
46-
47-
</html>
42+
</html>

‎learn/tasks/cascade/cascade.html

+24-48
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,25 @@
1-
<!doctype html>
1+
<!DOCTYPE html>
22
<html lang="en">
3-
4-
<head>
5-
<meta charset="utf-8">
3+
<head>
4+
<meta charset="utf-8" />
65
<title>The Cascade Task</title>
7-
<link rel="stylesheet" href="../styles.css">
8-
<style>
9-
10-
</style>
6+
<link rel="stylesheet" href="../styles.css" />
117

128
<style class="editable">
13-
@layer yellow, purple, green;
14-
15-
@layer yellow {
169
#outer div ul .nav a {
17-
background-color: yellow;
10+
background-color: powderblue;
1811
padding: 5px;
1912
display: inline-block;
2013
margin-bottom: 10px;
2114
}
22-
}
23-
@layer purple {
15+
2416
div div li a {
2517
color: rebeccapurple;
2618
}
27-
}
28-
@layer green {
29-
a {
30-
color: lightgreen;
31-
}
32-
}
3319
</style>
34-
</head>
20+
</head>
3521

36-
<body>
22+
<body>
3723
<section class="preview">
3824
<div id="outer" class="container">
3925
<div id="inner" class="container">
@@ -44,30 +30,21 @@
4430
</div>
4531
</div>
4632
</section>
47-
<textarea class="playable playable-css" style="height: 400px;">
48-
@layer yellow, purple, green;
33+
<textarea class="playable playable-css" style="height: 250px">
34+
#outer div ul .nav a {
35+
background-color: powderblue;
36+
padding: 5px;
37+
display: inline-block;
38+
margin-bottom: 10px;
39+
}
4940

50-
@layer yellow {
51-
#outer div ul .nav a {
52-
background-color: yellow;
53-
padding: 5px;
54-
display: inline-block;
55-
margin-bottom: 10px;
56-
}
57-
}
58-
@layer purple {
59-
div div li a {
60-
color: rebeccapurple;
61-
}
62-
}
63-
@layer green {
64-
a {
65-
color: lightgreen;
66-
}
67-
}
68-
</textarea>
41+
div div li a {
42+
color: rebeccapurple;
43+
}
44+
</textarea
45+
>
6946

70-
<textarea class="playable playable-html" style="height: 170px;">
47+
<textarea class="playable playable-html" style="height: 170px">
7148
<div id="outer" class="container">
7249
<div id="inner" class="container">
7350
<ul>
@@ -79,9 +56,8 @@
7956
</textarea>
8057

8158
<div class="playable-buttons">
82-
<input id="reset" type="button" value="Reset">
59+
<input id="reset" type="button" value="Reset" />
8360
</div>
84-
</body>
85-
<script src="../playable.js"></script>
86-
61+
</body>
62+
<script src="../playable.js"></script>
8763
</html>

‎learn/tasks/cascade/cascadelayer-download.html

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>The Cascade Layer Task</title>
6+
7+
<style>
8+
@layer yellow, purple, green;
9+
10+
@layer yellow {
11+
#outer div ul .nav a {
12+
padding: 5px;
13+
display: inline-block;
14+
margin-bottom: 10px;
15+
}
16+
}
17+
@layer purple {
18+
div div li a {
19+
color: rebeccapurple;
20+
}
21+
}
22+
@layer green {
23+
a {
24+
color: lightgreen;
25+
}
26+
}
27+
</style>
28+
</head>
29+
30+
<body>
31+
<div id="outer" class="container">
32+
<div id="inner" class="container">
33+
<ul>
34+
<li class="nav">
35+
<a href="#">One</a>
36+
</li>
37+
<li class="nav">
38+
<a href="#">Two</a>
39+
</li>
40+
</ul>
41+
</div>
42+
</div>
43+
</body>
44+
</html>

‎learn/tasks/cascade/cascadelayer.html

+81
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>The Cascade Layer Task</title>
6+
<link rel="stylesheet" href="../styles.css" />
7+
<style></style>
8+
9+
<style class="editable">
10+
@layer yellow, purple, green;
11+
12+
@layer yellow {
13+
#outer div ul .nav a {
14+
padding: 5px;
15+
display: inline-block;
16+
margin-bottom: 10px;
17+
}
18+
}
19+
@layer purple {
20+
div div li a {
21+
color: rebeccapurple;
22+
}
23+
}
24+
@layer green {
25+
a {
26+
color: lightgreen;
27+
}
28+
}
29+
</style>
30+
</head>
31+
32+
<body>
33+
<section class="preview">
34+
<div id="outer" class="container">
35+
<div id="inner" class="container">
36+
<ul>
37+
<li class="nav"><a href="#">One</a></li>
38+
<li class="nav"><a href="#">Two</a></li>
39+
</ul>
40+
</div>
41+
</div>
42+
</section>
43+
<textarea class="playable playable-css" style="height: 400px">
44+
@layer yellow, purple, green;
45+
46+
@layer yellow {
47+
#outer div ul .nav a {
48+
padding: 5px;
49+
display: inline-block;
50+
margin-bottom: 10px;
51+
}
52+
}
53+
@layer purple {
54+
div div li a {
55+
color: rebeccapurple;
56+
}
57+
}
58+
@layer green {
59+
a {
60+
color: lightgreen;
61+
}
62+
}
63+
</textarea>
64+
65+
<textarea class="playable playable-html" style="height: 170px">
66+
<div id="outer" class="container">
67+
<div id="inner" class="container">
68+
<ul>
69+
<li class="nav"><a href="#">One</a></li>
70+
<li class="nav"><a href="#">Two</a></li>
71+
</ul>
72+
</div>
73+
</div>
74+
</textarea>
75+
76+
<div class="playable-buttons">
77+
<input id="reset" type="button" value="Reset" />
78+
</div>
79+
</body>
80+
<script src="../playable.js"></script>
81+
</html>

‎learn/tasks/cascade/marking.md

+17-3
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1-
# The Cascade Task Marking Guide
1+
# Cascade and inheritance marking guide
2+
3+
## Task 1
24

35
One possible solution is as follows:
46

@@ -8,6 +10,18 @@ One possible solution is as follows:
810
}
911
```
1012

11-
There are two things the student needs to do in this task. First, you need to write a selector for the a element which is more specific than the selector used to turn the background blue. I have achieved this by using the id selector which has very high specificity.
13+
There are two things the student needs to do in this task. First, write a selector for the `a` element which is more specific than the selector used to turn the background powderblue. In this solution, this is achieved by using the `id` selector, which has very high specificity.
14+
15+
Then the student needs to remember there are special keyword values for all properties. In this case, using `inherit` sets the background color back to be the same as its parent element.
16+
17+
## Task 2
18+
19+
One possible solution is as follows:
20+
21+
```
22+
@layer yellow, green, purple;
23+
```
24+
25+
There is one thing the student needs to do in this task: change the order of precedence so the declaration for the desired color is in the last declared layer, which is what his solution shows.
1226

13-
Then they need to remember that there are special keyword values for all properties. In this case I am using inherit to set the background back to be the same as its parent element.
27+
The student needs to remember that unlayered normal styles take precedence over layered normal styles. But, if all styles are within layers — as in the case of this task — styles in later declared layers take precedence over styles declared in earlier layers. Moving the purple layer to the end means it has precedence over the green and yellow layers.

0 commit comments

Comments
 (0)