A Few Additional CSS Stylings

Author: devmodo

wip/03-CSS-Fundamentals/index.html

@@ -114,7 +114,7 @@ <h3>Why should you learn HTML?</h3>
     <aside>
       <h4>Related posts</h4>
 
-      <ul>
+      <ul class="related-posts-list">
         <li>
           <img
             src="img/related-1.jpg"
@@ -123,12 +123,12 @@ <h4>Related posts</h4>
             width="75"
           />
           <a href="#">How to Learn Web Development</a>
-          <p>By Jonas Schmedtmann</p>
+          <p class="related-author">By Jonas Schmedtmann</p>
         </li>
         <li>
           <img src="img/related-2.jpg" alt="Lightning" width="75" heigth="75" />
           <a href="#">The Unknown Powers of CSS</a>
-          <p>By Jim Dillon</p>
+          <p class="related-author">By Jim Dillon</p>
         </li>
         <li>
           <img
@@ -138,13 +138,13 @@ <h4>Related posts</h4>
             height="75"
           />
           <a href="#">Why JavaScript is Awesome</a>
-          <p>By Matilda</p>
+          <p class="related-author">By Matilda</p>
         </li>
       </ul>
     </aside>
 
     <footer>
-      <p>Copyright &copy; 2027 by The Code Magazine.</p>
+      <p id="copyright">Copyright &copy; 2027 by The Code Magazine.</p>
     </footer>
   </body>
 </html>

wip/03-CSS-Fundamentals/style.css

@@ -31,12 +31,28 @@ li {
     font-size: 20px;
 }
 
-/*Example of descendant selector*/
+/*Example of descendant selector
 footer p {
     font-size: 16px;
 }
+*/
 
 /*ID selector. Don't use this anymore either.*/
 #author {
     font-style: italic;
+    font-size: 18px;
+}
+
+#copyright {
+    font-size: 16px;
+}
+
+/*Class selector*/
+.related-author {
+    font-size: 18px;
+    font-weight: bold;
+}
+
+.related-posts-list {
+    list-style: none;
 }