Completed Using Margins and Paddings

jamesacox53 · jamesacox53 · commit abe1f96c259c · 2022-08-17T10:58:04.000+01:00
diff --git a/myWork/03-CSS-Fundamentals/index.html b/myWork/03-CSS-Fundamentals/index.html
@@ -8,7 +8,7 @@
 
   <body>
     <header class="main-header">
-      <h1>📘 The Code Magazine</h1>
+      <h1 class="title-text">📘 The Code Magazine</h1>
 
       <nav>
         <a href="blog.html" target="_blank">Blog</a>
@@ -18,11 +18,12 @@ <h1>📘 The Code Magazine</h1>
       </nav>
     </header>
 
-    <article>
+    <article class="product-article">
       <header>
-        <h2>The Basic Language of the Web: HTML</h2>
+        <h2 class="article-header">The Basic Language of the Web: HTML</h2>
 
         <img
+          class="author-image"
           src="images/laura-jones.jpg"
           alt="Photo of Laura Jones"
           width="50"
@@ -33,6 +34,7 @@ <h2>The Basic Language of the Web: HTML</h2>
         </p>
 
         <img
+          class="article-image"
           src="images/post-img.jpg"
           alt="HTML code on a screen"
           width="500"
@@ -68,7 +70,7 @@ <h3>What is HTML?</h3>
 
       <p>In HTML, each element is made up of 3 parts:</p>
 
-      <ol>
+      <ol class="article-list">
         <li>The opening tag</li>
         <li>The closing tag</li>
         <li>The actual element</li>
@@ -90,7 +92,7 @@ <h3>Why should you learn HTML?</h3>
         web. Here are 5 of them:
       </p>
 
-      <ul>
+      <ul class="article-list">
         <li>To be able to use the fundamental web dev language</li>
         <li>
           To hand-craft beautiful websites instead of relying on tools like
diff --git a/myWork/03-CSS-Fundamentals/style.css b/myWork/03-CSS-Fundamentals/style.css
@@ -1,12 +1,32 @@
+* {
+  margin: 0;
+  padding: 0 3px;
+}
+
 body {
   color: #444444;
   font-family: sans-serif;
 }
 
+.main-header {
+  background-color: #f7f7f7;
+  border-top: 5px solid #1098ad;
+  padding: 10px 20px;
+  margin-bottom: 15px;
+}
+
+.related-aside {
+  background-color: #f7f7f7;
+  border-top: 5px solid #1098ad;
+  border-bottom: 5px solid #1098ad;
+  padding: 10px 0;
+}
+
 h1,
 h2,
 h3 {
   color: #1098ad;
+  margin-bottom: 10px;
 }
 
 h1 {
@@ -17,10 +37,12 @@ h1 {
 
 h2 {
   font-size: 40px;
+  margin-bottom: 8px;
 }
 
 h3 {
-  font-size: 25px;
+  font-size: 22px;
+  margin-top: 30px;
 }
 
 h4 {
@@ -32,15 +54,26 @@ h4 {
 p {
   font-size: 16px;
   line-height: 1.5;
+  margin-bottom: 10px;
+}
+
+.article-list {
+  margin: 0 25px 5px 25px;
 }
 
 li {
   font-size: 15px;
+  margin-bottom: 10px;
+}
+
+li:last-child {
+  margin-bottom: 0;
 }
 
 .author {
   font-style: italic;
   font-size: 14px;
+  margin-bottom: 3px;
 }
 
 .copyright {
@@ -56,16 +89,6 @@ li {
   list-style: none;
 }
 
-.main-header {
-  background-color: #f7f7f7;
-}
-
-.related-aside {
-  background-color: #f7f7f7;
-  border-top: 5px solid #1098ad;
-  border-bottom: 5px solid #1098ad;
-}
-
 a:link {
   color: #1098ad;
   text-decoration: none;
@@ -85,3 +108,28 @@ a:active {
   background-color: black;
   font-style: italic;
 }
+
+.title-text {
+  margin-top: 5px;
+  margin-bottom: 5px;
+}
+
+.author-image {
+  margin-bottom: 3px;
+}
+
+.article-image {
+  margin-bottom: 5px;
+}
+
+strong {
+  padding: 0;
+}
+
+.article-header {
+  font-size: 40px;
+}
+
+.product-article {
+  margin-bottom: 20px;
+}
