Challenge jonasschmedtmann#3

Author: JenifferGenoves

starter/03-CSS-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>
@@ -80,7 +80,7 @@ <h3>What is HTML?</h3>
       <p>In HTML, each element is made up of 3 parts:</p>
 
       <ol>
-        <li>The opening tag</li>
+        <li class="first-li">The opening tag</li>
         <li>The closing tag</li>
         <li>The actual element</li>
       </ol>
@@ -102,7 +102,9 @@ <h3>Why should you learn HTML?</h3>
       </p>
 
       <ul>
-        <li>To be able to use the fundamental web dev language</li>
+        <li class="first-li">
+          To be able to use the fundamental web dev language
+        </li>
         <li>
           To hand-craft beautiful websites instead of relying on tools like
           Worpress or Wix

starter/03-CSS-Fundamentals/style.css

@@ -1,12 +1,36 @@
-h1,
+/* * {
+  border-top: 5px solid #1098ad;
+}
+ */
+body {
+  color: #444;
+  font-family: sans-serif;
+}
+
+.main-header {
+  background-color: #f7f7f7;
+  /* padding: 20px;
+  padding-left: 40px;
+  padding-right: 40px; */
+  padding: 20px 40px;
+}
+
+aside {
+  background-color: #f7f7f7;
+  border-top: 5px solid #1098ad;
+  border-bottom: 5px solid #1098ad;
+}
+
+/* h1,
 h2,
 h3,
 h4,
 p,
 li {
   font-family: sans-serif;
+  color: #444;
 }
-
+ */
 h1,
 h2,
 h3 {
@@ -72,9 +96,63 @@ li {
   list-style: none;
 }
 
-/*
-Resolving conflicts
-#copyright {
+/* header {
+  background-color: #f7f7f7;
+}
+ */
+
+/* body {
+  background-color: aquamarine;
+}
+
+.first-li {
+  font-weight: bold;
+} */
+
+li:first-child {
+  font-weight: bold;
+}
+
+li:last-child {
+  font-style: italic;
+}
+
+li:nth-child(2) {
+  /*odd- even 
+  color: red; */
+}
+
+/* Misconception: This won't work */
+
+article p:first-child {
+  color: red;
+}
+
+/* Styling links order LVHA*/
+
+a:link {
+  color: #1098ad;
+  text-decoration: none;
+}
+
+a:visited {
+  /*color: #777; */
+  color: #1098ad;
+}
+
+a:hover {
+  color: orangered;
+  font-weight: bold;
+  text-decoration: underline /*dotted- wavy*/ orangered;
+}
+
+a:active {
+  background-color: black;
+  font-style: italic;
+}
+
+/* Resolving conflicts */
+/* #copyright {
   color: red;
 }
 
@@ -87,6 +165,6 @@ Resolving conflicts
 }
 
 footer p {
-  color: green;
+  color: green !important;
 }
  */