Skip to content

Commit f59765a

Browse files
estelleestelle
committed
Cascade Layers: New task
1 parent e39d727 commit f59765a

File tree

3 files changed

+147
-3
lines changed

3 files changed

+147
-3
lines changed

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

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

‎learn/tasks/cascade/cascadelayer.html‎

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

‎learn/tasks/cascade/marking.md‎

Lines changed: 14 additions & 3 deletions
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,15 @@ 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 blue. 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+
```
1224

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.

0 commit comments

Comments
 (0)