Ch. 32 - CSS Theroy jonasschmedtmann#2: Inheritance and the Universal Selector

Author: FrankGecko

starter/03-CSS-Fundamentals/index.html

@@ -34,6 +34,7 @@ <h1 style="color: blue">📘 The Code Magazine</h1>
       -->
       <h1>📘 The Code Magazine</h1>
       <nav>
+        <!-- <strong>this is a parapgraph</strong> -->
         <a href="blog.html">Blog</a>
         <a href="#">Challenges</a>
         <a href="#">Flexbox</a>

starter/03-CSS-Fundamentals/notes/img/how_inheritance_works.png

@@ -148,6 +148,23 @@ <h2>Ch. 31 CSS Theory #1: Conflicts Between Selectors</h2>
           to lowest priority read from left to right.
         </p>
       </article>
+
+      <article>
+        <h2>Ch. 32 CSS Theory #2: Inheritance and the Universal Selector</h2>
+        <p>
+          An inherited property is very easily overwritten by any rule which has
+          a value for that same property.
+        </p>
+        <p>
+          Inheritance does not conflict with other selectors, rather,
+          inheritance works by applying styles to all child elements.
+        </p>
+        <img src="img/how_inheritance_works.png" />
+        <p>
+          By contrast, the universal selector applies to every element, and thus
+          can conflict with other selectors.
+        </p>
+      </article>
     </article>
   </body>
 </html>

starter/03-CSS-Fundamentals/notes/index.html

@@ -1,3 +1,13 @@
+/* * {
+  border-top: 10px solid #1098ad;
+} */
+
+body {
+  color: #444;
+  font-family: sans-serif;
+  /* border-top: 10px solid #1098ad; */
+}
+
 h1 {
   /* color: blue; */
   font-size: 26px;
@@ -28,16 +38,6 @@ li {
   font-size: 20px;
 }
 
-h1,
-h2,
-h3,
-h4,
-p,
-li {
-  font-family: sans-serif;
-  color: #444;
-}
-
 /* footer p {
   font-size: 16px;
 } */
@@ -148,3 +148,13 @@ a:active {
 footer p {
   color: green !important;
 } */
+
+/* nav a:link,
+nav strong {
+  font-size: 18px;
+} */
+
+/* nav {
+  font-size: 18px;
+}
+ */