styling hyperlinks

Author: jorge1alcala

starter/02-HTML-Fundamentals/index.html

@@ -16,7 +16,7 @@ <h5>The Basic Language of the Web: HTML</h5>
     <h6>The Basic Language of the Web: HTML</h6>
     -->
 
-    <header>
+    <header class="main-header">
       <h1>📘 The Code Magazine</h1>
 
       <nav>
@@ -115,7 +115,7 @@ <h3>Why should you learn HTML?</h3>
     <aside>
       <h4>Related posts</h4>
 
-      <ul>
+      <ul class="decoration">
         <li>
           <img
             src="img/related-1.jpg"

starter/02-HTML-Fundamentals/style.css

@@ -5,9 +5,14 @@ h4,
 p,
 li {
   font-family: sans-serif;
+  color: #444;
+}
+h1,
+h2,
+h3 {
+  color: #1098ad;
 }
 h1 {
-  color: aquamarine;
   font-size: 26px;
   text-transform: uppercase;
   font-style: italic;
@@ -54,3 +59,42 @@ header p {
 .decoration {
   list-style: none;
 }
+.main-header {
+  background-color: #f7f7f7;
+}
+aside {
+  background-color: #f7f7f7;
+  border-top: 5px solid #1098ad;
+  border-bottom: 5px solid #1098ad;
+}
+li:first-child {
+  font-weight: bold;
+}
+li:last-child {
+  font-style: italic;
+}
+li:nth-child(even) {
+  /* color: red; */
+}
+/* Misconception: this won't work */
+article p:first-child {
+  /* color: rgb(146, 17, 17); */
+}
+
+/* styling links */
+a:link {
+  color: #1098ad;
+  text-decoration: none;
+}
+a:visited {
+  color: #1098ad;
+}
+a:hover {
+  color: orangered;
+  font-weight: bold;
+  text-decoration: underline wavy orangered;
+}
+a:active {
+  background-color: black;
+  font-style: italic;
+}