Skip to content

Commit 6987dc2

Browse files
rachelandrewrachelandrew
committed
a bunch of examples for the learn section.
1 parent 8efb121 commit 6987dc2

File tree

11 files changed

+715
-0
lines changed

11 files changed

+715
-0
lines changed

‎learn/cascade/all.html‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
<!doctype html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>all</title>
7+
<link rel="stylesheet" href="../styles.css">
8+
<style>
9+
10+
</style>
11+
12+
<style class="editable">
13+
blockquote {
14+
background-color: red;
15+
border: 2px solid green;
16+
}
17+
18+
.fix-this {
19+
all: unset;
20+
}
21+
</style>
22+
</head>
23+
24+
<body>
25+
<section class="preview">
26+
<blockquote>
27+
<p>This blockquote is styled</p>
28+
</blockquote>
29+
30+
<blockquote class="fix-this">
31+
<p>This blockquote is not styled</p>
32+
</blockquote>
33+
</section>
34+
35+
<textarea class="playable playable-css" style="height: 280px;">
36+
blockquote {
37+
background-color: red;
38+
border: 2px solid green;
39+
}
40+
41+
.fix-this {
42+
all: unset;
43+
}
44+
</textarea>
45+
46+
<textarea class="playable playable-html" style="height: 140px;">
47+
<blockquote>
48+
<p>This blockquote is styled</p>
49+
</blockquote>
50+
51+
<blockquote class="fix-this">
52+
<p>This blockquote is not styled</p>
53+
</blockquote>
54+
</textarea>
55+
56+
<div class="playable-buttons">
57+
<input id="reset" type="button" value="Reset">
58+
</div>
59+
</body>
60+
<script src="../playable.js"></script>
61+
62+
</html>

‎learn/cascade/cascade-simple.html‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<!doctype html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>The Cascade: simple example</title>
7+
<link rel="stylesheet" href="../styles.css">
8+
<style>
9+
10+
</style>
11+
12+
<style class="editable">
13+
h1 {
14+
color: red;
15+
}
16+
h1 {
17+
color: blue;
18+
}
19+
</style>
20+
</head>
21+
22+
<body>
23+
<section class="preview">
24+
<h1>This is my heading.</h1>
25+
</section>
26+
27+
<textarea class="playable playable-css" style="height: 120px;">
28+
h1 {
29+
color: red;
30+
}
31+
h1 {
32+
color: blue;
33+
}
34+
</textarea>
35+
36+
<textarea class="playable playable-html" style="height: 40px;">
37+
<h1>This is my heading.</h1>
38+
</textarea>
39+
40+
<div class="playable-buttons">
41+
<input id="reset" type="button" value="Reset">
42+
</div>
43+
</body>
44+
<script src="../playable.js"></script>
45+
46+
</html>

‎learn/cascade/important.html‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
<!doctype html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>!important</title>
7+
<link rel="stylesheet" href="../styles.css">
8+
<style>
9+
10+
</style>
11+
12+
<style class="editable">
13+
#winning {
14+
background-color: red;
15+
border: 1px solid black;
16+
}
17+
18+
.better {
19+
background-color: gray;
20+
border: none !important;
21+
}
22+
23+
p {
24+
background-color: blue;
25+
color: white;
26+
padding: 5px;
27+
}
28+
</style>
29+
</head>
30+
31+
<body>
32+
<section class="preview">
33+
<p class="better">This is a paragraph.</p>
34+
<p class="better" id="winning">One selector to rule them all!</p>
35+
</section>
36+
37+
<textarea class="playable playable-css" style="height: 280px;">
38+
39+
#winning {
40+
background-color: red;
41+
border: 1px solid black;
42+
}
43+
44+
.better {
45+
background-color: gray;
46+
border: none !important;
47+
}
48+
49+
p {
50+
background-color: blue;
51+
color: white;
52+
padding: 5px;
53+
}
54+
</textarea>
55+
56+
<textarea class="playable playable-html" style="height: 140px;">
57+
<p class="better">This is a paragraph.</p>
58+
<p class="better" id="winning">One selector to rule them all!</p>
59+
</textarea>
60+
61+
<div class="playable-buttons">
62+
<input id="reset" type="button" value="Reset">
63+
</div>
64+
</body>
65+
<script src="../playable.js"></script>
66+
67+
</html>

‎learn/cascade/inheritance.html‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
<!doctype html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>Inheritance</title>
7+
<link rel="stylesheet" href="../styles.css">
8+
<style>
9+
10+
</style>
11+
12+
<style class="editable">
13+
.main {
14+
color: rebeccapurple;
15+
border: 2px solid #ccc;
16+
padding: 0 2em;
17+
}
18+
19+
.special {
20+
color: black;
21+
font-weight: bold;
22+
}
23+
</style>
24+
</head>
25+
26+
<body>
27+
<section class="preview">
28+
<ul class="main">
29+
<li>Item One</li>
30+
<li>Item Two
31+
<ul>
32+
<li>2.1</li>
33+
<li>2.2</li>
34+
</ul>
35+
</li>
36+
<li>Item Three
37+
<ul class="special">
38+
<li>3.1
39+
<ul>
40+
<li>3.1.1</li>
41+
<li>3.1.2</li>
42+
</ul>
43+
</li>
44+
<li>3.2</li>
45+
</ul>
46+
</li>
47+
</ul>
48+
</section>
49+
50+
<textarea class="playable playable-css" style="height: 180px;">
51+
.main {
52+
color: rebeccapurple;
53+
border: 2px solid #ccc;
54+
padding: 1em;
55+
}
56+
57+
.special {
58+
color: black;
59+
font-weight: bold;
60+
}
61+
</textarea>
62+
63+
<textarea class="playable playable-html" style="height: 330px;">
64+
<ul class="main">
65+
<li>Item One</li>
66+
<li>Item Two
67+
<ul>
68+
<li>2.1</li>
69+
<li>2.2</li>
70+
</ul>
71+
</li>
72+
<li>Item Three
73+
<ul class="special">
74+
<li>3.1
75+
<ul>
76+
<li>3.1.1</li>
77+
<li>3.1.2</li>
78+
</ul>
79+
</li>
80+
<li>3.2</li>
81+
</ul>
82+
</li>
83+
</ul>
84+
</textarea>
85+
86+
<div class="playable-buttons">
87+
<input id="reset" type="button" value="Reset">
88+
</div>
89+
</body>
90+
<script src="../playable.js"></script>
91+
92+
</html>

‎learn/cascade/keywords.html‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
<!doctype html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>Keyword values</title>
7+
<link rel="stylesheet" href="../styles.css">
8+
<style>
9+
10+
</style>
11+
12+
<style class="editable">
13+
body {
14+
color: green;
15+
}
16+
17+
.my-class-1 a {
18+
color: inherit;
19+
}
20+
21+
.my-class-2 a {
22+
color: initial;
23+
}
24+
25+
.my-class-3 a {
26+
color: unset;
27+
}
28+
</style>
29+
</head>
30+
31+
<body>
32+
<section class="preview">
33+
<ul>
34+
<li>Default <a href="#">link</a> color</li>
35+
<li class="my-class-1">Inherit the <a href="#">link</a> color</li>
36+
<li class="my-class-2">Reset the <a href="#">link</a> color</li>
37+
<li class="my-class-3">Unset the <a href="#">link</a> color</li>
38+
</ul>
39+
</section>
40+
41+
<textarea class="playable playable-css" style="height: 280px;">
42+
body {
43+
color: green;
44+
}
45+
46+
.my-class-1 a {
47+
color: inherit;
48+
}
49+
50+
.my-class-2 a {
51+
color: initial;
52+
}
53+
54+
.my-class-3 a {
55+
color: unset;
56+
}
57+
</textarea>
58+
59+
<textarea class="playable playable-html" style="height: 140px;">
60+
<ul>
61+
<li>Default <a href="#">link</a> color</li>
62+
<li class="my-class-1">Inherit the <a href="#">link</a> color</li>
63+
<li class="my-class-2">Reset the <a href="#">link</a> color</li>
64+
<li class="my-class-3">Unset the <a href="#">link</a> color</li>
65+
</ul>
66+
</textarea>
67+
68+
<div class="playable-buttons">
69+
<input id="reset" type="button" value="Reset">
70+
</div>
71+
</body>
72+
<script src="../playable.js"></script>
73+
74+
</html>

0 commit comments

Comments
 (0)