Skip to content
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Commit bc72046

Browse files
committedFeb 10, 2022
all exercises completed
1 parent a8b4902 commit bc72046

File tree

9 files changed

+83
-20
lines changed

9 files changed

+83
-20
lines changed
 

‎foundations/01-css-methods/index.html

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,19 @@
44
<meta charset="UTF-8">
55
<meta http-equiv="X-UA-Compatible" content="IE=edge">
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<link rel="stylesheet" href="style.css">
8+
<style>
9+
p {
10+
background-color: green;
11+
color: white;
12+
font-size: 18px;
13+
}
14+
</style>
715
<title>Methods for Adding CSS</title>
816
</head>
917
<body>
1018
<div>Style me via the external method!</div>
1119
<p>I would like to be styled with the internal method, please.</p>
12-
<button>Inline Method</button>
20+
<button style="background-color: orange; font-size: 18px;">Inline Method</button>
1321
</body>
1422
</html>

‎foundations/01-css-methods/style.css

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
div {
2+
background-color: red;
3+
color: white;
4+
font-size: 32px;
5+
font-weight: bold;
6+
text-align: center;
7+
}

‎foundations/02-class-id-selectors/index.html

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,10 @@
88
<link rel="stylesheet" href="style.css">
99
</head>
1010
<body>
11-
<p>Number 1 - I'm a class!</p>
12-
<div>Number 2 - I'm one ID.</div>
13-
<p>Number 3 - I'm a class, but cooler!</p>
14-
<div>Number 4 - I'm another ID.</div>
15-
<p>Number 5 - I'm a class!</p>
11+
<p class="odd">Number 1 - I'm a class!</p>
12+
<div id="two">Number 2 - I'm one ID.</div>
13+
<p class="odd three">Number 3 - I'm a class, but cooler!</p>
14+
<div id="four">Number 4 - I'm another ID.</div>
15+
<p class="odd">Number 5 - I'm a class!</p>
1616
</body>
1717
</html>
Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
.odd {
2+
background-color: lightpink;
3+
font-family: Verdana, "DejaVu Sans", sans-serif;
4+
}
5+
6+
.three {
7+
font-size: 24px;
8+
}
9+
10+
#two {
11+
color: blue;
12+
font-size: 36px;
13+
}
14+
15+
#four {
16+
background-color: lightgreen;
17+
font-size: 24px;
18+
font-weight: bold;
19+
}

‎foundations/03-grouping-selectors/index.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
<link rel="stylesheet" href="style.css">
99
</head>
1010
<body>
11-
<button>Click Me!</button>
12-
<button>No, Click Me!</button>
11+
<button class="left">Click Me!</button>
12+
<button class="right">No, Click Me!</button>
1313
</body>
1414
</html>
Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
.left {
2+
background-color: black;
3+
color: white;
4+
}
5+
6+
.right {
7+
background-color: yellow;
8+
}
9+
10+
.left,
11+
.right {
12+
font-size: 28px;
13+
font-family: Helvetica, 'Times New Roman' sans-serif;
14+
}
Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
.avatar.proportioned {
2+
width: 300px;
3+
height: auto;
4+
}
5+
6+
.avatar.distorted {
7+
width: 200px;
8+
height: 400px;
9+
}
Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
.container .text {
2+
background-color: yellow;
3+
color: red;
4+
font-size: 20px;
5+
text-align: center;
6+
}

‎foundations/06-cascade-fix/style.css

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -3,32 +3,32 @@
33
color: hsl(0, 100%, 50%);
44
}
55

6-
.small-para {
7-
font-size: 14px;
8-
}
9-
106
.para {
117
font-size: 22px;
128
}
139

14-
.confirm {
10+
.small-para {
11+
font-size: 14px;
12+
}
13+
14+
#confirm-button {
1515
background: green;
1616
color: white;
1717
font-weight: bold;
18-
}
18+
}
1919

2020
.button {
2121
background-color: rgb(255, 255, 255);
2222
color: rgb(0, 0, 0);
2323
font-size: 20px;
2424
}
2525

26-
.child {
27-
color: red;
28-
font-size: 14px;
29-
}
30-
3126
div.text {
3227
color: green;
3328
font-size: 22px;
34-
}
29+
}
30+
31+
div .child {
32+
color: red;
33+
font-size: 14px;
34+
}

0 commit comments

Comments
 (0)
Failed to load comments.