1
<div class="overview">
2
  <h1>Syntax Overview</h1>
3

4
  <p>Some things you can see in this example:</p>
5

6
  <ol class="features">
7
    <li>Declarations</li>
8
    <li>Rules</li>
9
    <li>Resets/Normalizations</li>
10
    <li class="fancy">Class selectors</li>
11
    <li>Psuedo-class selectors</li>
12
  </ol>
13

14
  <blockquote>Then - like just draw the rest of the owl</blockquote>
15
</div>

1
h1 {
2
    color: lightblue;
3
    margin: 0px;
4
}
5

6
.overview {
7
    padding: 1rem;
8
    transition: all 300ms;
9
    border: solid 4px transparent;
10
}
11

12
.fancy {
13
    text-decoration: underline;
14
}
15

16
.overview:hover {
17
    border-color: lightblue;
18
}

1
<div class="a">
2
  <div class="b">First child of A that is B</div>
3
  <div class="b">Other B Child</div>
4
  <div>
5
    <div class="b">Nested B Child</div>
6
  </div>
7
  <div class="b">Another B Child</div>
8
  <div class="c">Some other content in A</div>
9
</div>
10

11
<div class="b">B as a sibling of A</div>
12

13
<div class="b">Some other B sibling of A</div>

1
/* Descendant */
2
.a .b { background-color: green; }
3

4
/* Child */
5
.a > .b { background-color: blue; }
6

7
/* Next-sibling */
8
.a + .b {background-color: red; }
9

10
/* Multiple */
11
.a, .b, .c { padding: 1rem; }

1
<div id="a" class="a">
2
  <div class="b">First child of A that is B</div>
3
  <div class="b">Other B Child</div>
4
  <div>
5
    <div class="b">Nested B Child</div>
6
  </div>
7
  <div class="b">Another B Child</div>
8
  <div class="c">Some other content in A</div>
9
</div>
10

11
<div class="b">B as a sibling of A</div>
12

13
<div class="b">Some other B sibling of A</div>
14

15
<blockquote>
16
  Note that all content in A is now Green. The Selector with the higher
17
  specificity takes priority even though it is defined earlier in the stylesheet
18
</blockquote>

1
/*1,1,0*/
2
#a .b { background-color: green; }
3

4
/*0,1,0*/
5
.b { background-color: blue; }
6

7
/*0,2,0*/
8
.a + .b {background-color: red; }
9

10
.a, .b, .c { padding: 1rem; }

1
<label>
2
  An Email Input
3
  <input type="email" id="email" pattern=".+@.+\..+" size="30" required />
4
</label>

1
input {
2
    color:black;
3
    padding: 1rem;
4
    font-size: large;
5
    font-weight: bold;
6
    border: 4px solid black;
7
    outline: none;
8
}
9

10
input:focus {
11
    background-color: plum;
12
}
13

14
input:hover {
15
    background-color: lightblue;
16
}
17

18
input:invalid {
19
    border-color: lightcoral;
20
}
21

22
input:valid {
23
    border-color: aquamarine;
24
}

1
<div class="example">
2
  <div class="before">before block</div>
3
  <div class="box"><div class="content">content</div></div>
4
  <div class="after">after block</div>
5
</div>

9 collapsed lines
1
.example {
2
    background-color: lightblue;
3
}
4

5
.before, .after {
6
    padding: 10px;
7
    background-color: lightgrey;
8
}
9

10
.content {
11
    background-color: lightgrey;
12
    height: 50px;
13
}
14

15
.box {
16
    background-color: lightcoral;
17
    border: 1rem solid lightgreen;
18
    padding: 2rem;
19
    margin: 3rem;
20
}

21 collapsed lines
1
.example {
2
    background-color: lightblue;
3
}
4

5
.spacer {
6
    padding: 10px;
7
    background-color: lightgrey;
8
}
9

10
.content {
11
    background-color: lightgrey;
12
    height: 50px;
13
}
14

15
.block, .inline, .inline-block {
16
    background-color: lightcoral;
17
    border: .5rem solid lightgreen;
18
    padding: 1rem;
19
    margin: 1.5rem;
20
}
21

22
.block {
23
    display: block;
24
}
25

26
.inline {
27
    display: inline;
28
}
29

30
.inline-block {
31
    display: inline-block;
32
}