Skip to content

Commit 16d5245

Browse files
kfoolablekfoolable
committed
Done with CSS Theory jonasschmedtmann#1 
1 parent d691168 commit 16d5245

File tree

2 files changed

+172
-10
lines changed

2 files changed

+172
-10
lines changed

‎starter/03-CSS-Fundamentals/index.html

Lines changed: 19 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8" />
5+
<link rel="stylesheet" href="style.css" />
56
<title>The Basic Language of the Web: HTML</title>
67
</head>
78

@@ -15,7 +16,7 @@ <h5>The Basic Language of the Web: HTML</h5>
1516
<h6>The Basic Language of the Web: HTML</h6>
1617
-->
1718

18-
<header>
19+
<header class="main-header">
1920
<h1>📘 The Code Magazine</h1>
2021

2122
<nav>
@@ -37,7 +38,9 @@ <h2>The Basic Language of the Web: HTML</h2>
3738
width="50"
3839
/>
3940

40-
<p>Posted by <strong>Laura Jones</strong> on Monday, June 21st 2027</p>
41+
<p id="author">
42+
Posted by <strong>Laura Jones</strong> on Monday, June 21st 2027
43+
</p>
4144

4245
<img
4346
src="img/post-img.jpg"
@@ -74,7 +77,7 @@ <h3>What is HTML?</h3>
7477
<p>In HTML, each element is made up of 3 parts:</p>
7578

7679
<ol>
77-
<li>The opening tag</li>
80+
<li class="first-li">The opening tag</li>
7881
<li>The closing tag</li>
7982
<li>The actual element</li>
8083
</ol>
@@ -96,7 +99,9 @@ <h3>Why should you learn HTML?</h3>
9699
</p>
97100

98101
<ul>
99-
<li>To be able to use the fundamental web dev language</li>
102+
<li class="first-li">
103+
To be able to use the fundamental web dev language
104+
</li>
100105
<li>
101106
To hand-craft beautiful websites instead of relying on tools like
102107
Worpress or Wix
@@ -112,21 +117,21 @@ <h3>Why should you learn HTML?</h3>
112117
<aside>
113118
<h4>Related posts</h4>
114119

115-
<ul>
120+
<ul class="related">
116121
<li>
117122
<img
118123
src="img/related-1.jpg"
119124
alt="Person programming"
120125
width="75"
121-
width="75"
126+
height="75"
122127
/>
123128
<a href="#">How to Learn Web Development</a>
124-
<p>By Jonas Schmedtmann</p>
129+
<p class="related-author">By Jonas Schmedtmann</p>
125130
</li>
126131
<li>
127132
<img src="img/related-2.jpg" alt="Lightning" width="75" heigth="75" />
128133
<a href="#">The Unknown Powers of CSS</a>
129-
<p>By Jim Dillon</p>
134+
<p class="related-author">By Jim Dillon</p>
130135
</li>
131136
<li>
132137
<img
@@ -136,11 +141,15 @@ <h4>Related posts</h4>
136141
height="75"
137142
/>
138143
<a href="#">Why JavaScript is Awesome</a>
139-
<p>By Matilda</p>
144+
<p class="related-author">By Matilda</p>
140145
</li>
141146
</ul>
142147
</aside>
143148

144-
<footer>Copyright &copy; 2027 by The Code Magazine.</footer>
149+
<footer>
150+
<p id="copyright" class="copyright text">
151+
Copyright &copy; 2027 by The Code Magazine.
152+
</p>
153+
</footer>
145154
</body>
146155
</html>

‎starter/03-CSS-Fundamentals/style.css

Lines changed: 153 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,153 @@
1+
h1,
2+
h2,
3+
h3,
4+
h4,
5+
p,
6+
li {
7+
font-family: sans-serif;
8+
color: #444;
9+
}
10+
11+
h1,
12+
h2,
13+
h3 {
14+
color: #1098ad;
15+
}
16+
17+
h1 {
18+
font-size: 26px;
19+
text-transform: uppercase;
20+
font-style: italic;
21+
}
22+
23+
h2 {
24+
font-size: 40px;
25+
}
26+
27+
h3 {
28+
font-size: 30px;
29+
}
30+
31+
h4 {
32+
font-size: 20px;
33+
text-transform: uppercase;
34+
text-align: center;
35+
}
36+
37+
p {
38+
font-size: 22px;
39+
line-height: 1.5;
40+
}
41+
42+
li {
43+
font-size: 20px;
44+
}
45+
46+
/* footer p {
47+
font-size: 16px;
48+
} */
49+
50+
/* article header p {
51+
font-style: italic;
52+
} */
53+
54+
#author {
55+
font-style: italic;
56+
font-size: 18px;
57+
}
58+
59+
#copyright {
60+
font-size: 16px;
61+
}
62+
63+
.related-author {
64+
font-size: 18px;
65+
font-weight: bold;
66+
}
67+
68+
.related {
69+
list-style: none;
70+
}
71+
72+
.main-header {
73+
background-color: #f7f7f7;
74+
}
75+
76+
aside {
77+
background-color: #f7f7f7;
78+
border-top: 5px solid #1098ad;
79+
border-bottom: 5px solid #1098ad;
80+
}
81+
82+
/* .first-li {
83+
font-weight: bold;
84+
} */
85+
86+
/* pseudo class */
87+
li:first-child {
88+
font-weight: bold;
89+
}
90+
91+
li:last-child {
92+
font-style: italic;
93+
}
94+
95+
li:nth-child(even) {
96+
color: red;
97+
}
98+
99+
/* styling links */
100+
a:link {
101+
color: #1098ad;
102+
/* removes the default underline in links */
103+
text-decoration: none;
104+
}
105+
106+
a:visited {
107+
color: #1098ad;
108+
}
109+
110+
a:hover {
111+
color: orangered;
112+
font-weight: bold;
113+
text-decoration: underline orangered;
114+
}
115+
116+
/* active is when you click a link, it changes the active state */
117+
a:active {
118+
background-color: black;
119+
font-style: italic;
120+
}
121+
/* LVHA - Link - Visited - Hover - Active */
122+
123+
/* Stopped at CSS Theory 1 */
124+
/* Thank you for this note! Do it again if you decide to pause the course again */
125+
126+
/* CSS Hierarchy */
127+
/* Highest Priority
128+
129+
5 Declarations marked !important -> like a hack for last resort situations
130+
4 Inline style (style attribute in HTML)
131+
3 ID (#) selector
132+
2 Class (.) or pseudo-class (:) selector
133+
1 Element selector (p, div, li, etc.)
134+
0 Universal selector (*)
135+
136+
Lowest Priority */
137+
138+
/* Resolving conflicts */
139+
#copyright {
140+
color: red;
141+
}
142+
143+
.copyright {
144+
color: blue;
145+
}
146+
147+
.text {
148+
color: yellow;
149+
}
150+
151+
footer p {
152+
color: green !important;
153+
}

0 commit comments

Comments
 (0)