Ch. 27 - Working With Colors

Author: FrankGecko

starter/03-CSS-Fundamentals/index.html

@@ -27,7 +27,7 @@ <h5>The Basic Language of the Web: HTML</h5>
     <h6>The Basic Language of the Web: HTML</h6>
     -->
 
-    <header>
+    <header class="main-header">
       <!-- 
         in-line css
         <h1 style="color: blue">📘 The Code Magazine</h1>

starter/03-CSS-Fundamentals/notes.html

@@ -61,6 +61,36 @@ <h3>Why use classes over IDs?</h3>
           a single element.
         </p>
       </article>
+
+      <article>
+        <h2>Ch. 27 Working with Colors</h2>
+        <p>
+          When multiple of the same style is applied to an element, the last one
+          is taken (more later).
+        </p>
+        <p>
+          It is an industry standard to represent a color using the hexidecimal
+          model, or rgba if transparency (alpha) is desired.
+        </p>
+        <p>
+          It is not reasonable to memorize or know many colors, instead, using a
+          color picker is standard.
+        </p>
+        <p>
+          VSCode has a built-in color picker that can be accessed by typing any
+          hexidecimal value (#fff, for example), and then clicking this
+          hexidecimal value.
+        </p>
+        <p>
+          VSCode's color picker provides different models for values, which can
+          be cycled through by clicking the value at the top of the color
+          picker.
+        </p>
+        <p>
+          A short-hand property is a special property that can be used to define
+          multiple properties in a single declaration.
+        </p>
+      </article>
     </article>
   </body>
 </html>

starter/03-CSS-Fundamentals/style.css

@@ -35,6 +35,7 @@ h4,
 p,
 li {
   font-family: sans-serif;
+  color: #444;
 }
 
 /* footer p {
@@ -62,3 +63,26 @@ li {
 .related {
   list-style: none;
 }
+
+h1,
+h2,
+h3 {
+  color: #1098ad;
+}
+
+.main-header {
+  background-color: #f7f7f7;
+}
+
+aside {
+  background-color: #f7f7f7;
+  /* border: 5px solid #1098ad; */
+  /* border-left: 5px solid #1098ad; */
+  /* border-right: 5px solid #1098ad; */
+  border-top: 5px solid #1098ad;
+  border-bottom: 5px solid #1098ad;
+}
+
+/* body {
+  background-color: blue;
+} */