Skip to content

Commit 0d4db2d

Browse files
committed
Added some ids and classes to some html elements, in order to style them without using descendants.
1 parent d93c40e commit 0d4db2d

File tree

2 files changed

+29
-9
lines changed

2 files changed

+29
-9
lines changed

starter/03-CSS-Fundamentals/index.html

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,8 @@ <h2>The Basic Language of the Web: HTML</h2>
3838
width="50"
3939
/>
4040

41-
<p>
41+
<!-- using ids is not a good practice -->
42+
<p id="author">
4243
Posted by <strong>Laura Jones</strong> on Monday, June 21st
4344
2027
4445
</p>
@@ -116,7 +117,7 @@ <h3>Why should you learn HTML?</h3>
116117
<aside>
117118
<h4>Related posts</h4>
118119

119-
<ul>
120+
<ul class="related">
120121
<li>
121122
<img
122123
src="img/related-1.jpg"
@@ -125,7 +126,7 @@ <h4>Related posts</h4>
125126
width="75"
126127
/>
127128
<a href="#">How to Learn Web Development</a>
128-
<p>By Jonas Schmedtmann</p>
129+
<p class="related-author">By Jonas Schmedtmann</p>
129130
</li>
130131
<li>
131132
<img
@@ -135,7 +136,7 @@ <h4>Related posts</h4>
135136
heigth="75"
136137
/>
137138
<a href="#">The Unknown Powers of CSS</a>
138-
<p>By Jim Dillon</p>
139+
<p class="related-author">By Jim Dillon</p>
139140
</li>
140141
<li>
141142
<img
@@ -145,13 +146,14 @@ <h4>Related posts</h4>
145146
height="75"
146147
/>
147148
<a href="#">Why JavaScript is Awesome</a>
148-
<p>By Matilda</p>
149+
<p class="related-author">By Matilda</p>
149150
</li>
150151
</ul>
151152
</aside>
152153

153154
<footer>
154-
<p>Copyright &copy; 2027 by The Code Magazine.</p>
155+
<!-- using ids is not a good practice -->
156+
<p id="copyright">Copyright &copy; 2027 by The Code Magazine.</p>
155157
</footer>
156158
</body>
157159
</html>

starter/03-CSS-Fundamentals/style.css

Lines changed: 21 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -42,11 +42,29 @@ li {
4242
}
4343

4444
/* css descendants are actually a bad practice */
45-
footer p {
45+
/* footer p {
4646
font-size: 16px;
47-
}
47+
} */
4848

4949
/* css descendants are actually a bad practice */
50-
article header p {
50+
/* article header p {
51+
font-style: italic;
52+
} */
53+
54+
#author {
5155
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;
5270
}

0 commit comments

Comments
 (0)