Ch. 31 - CSS Theory jonasschmedtmann#1: Conflicts Between Selectors

FrankGecko · FrankGecko · commit efa2418f2829 · 2022-11-17T11:25:48.000+02:00
diff --git a/starter/03-CSS-Fundamentals/index.html b/starter/03-CSS-Fundamentals/index.html
@@ -160,7 +160,7 @@ <h4>Related posts</h4>
     </aside>
 
     <footer>
-      <p id="copy" class="related-author">
+      <p id="copyright" class="copyright text">
         Copyright &copy; 2027 by The Code Magazine.
       </p>
     </footer>
diff --git a/starter/03-CSS-Fundamentals/notes/img/conflicting_selectors_and_declarations.png b/starter/03-CSS-Fundamentals/notes/img/conflicting_selectors_and_declarations.png
diff --git a/starter/03-CSS-Fundamentals/notes/img/resolving_conflicing_selectors.png b/starter/03-CSS-Fundamentals/notes/img/resolving_conflicing_selectors.png
diff --git a/starter/03-CSS-Fundamentals/notes/index.html b/starter/03-CSS-Fundamentals/notes/index.html
@@ -3,6 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <title>CSS Fundamentals Notes</title>
+    <link rel="stylesheet" href="style.css" />
   </head>
   <body>
     <article>
@@ -133,6 +134,20 @@ <h2>Ch. 30 Using Chrome Dev Tools</h2>
           corresponding pseudo-class.
         </p>
       </article>
+
+      <article>
+        <h2>Ch. 31 CSS Theory #1: Conflicts Between Selectors</h2>
+        <img src="img/conflicting_selectors_and_declarations.png" />
+        <img src="img/resolving_conflicing_selectors.png" />
+        <p>
+          In VSCode, mousing over a CSS selector will show the "Selector
+          Specificity".
+        </p>
+        <p>
+          Selector Specificity indicates the priority of the selector, highest
+          to lowest priority read from left to right.
+        </p>
+      </article>
     </article>
   </body>
 </html>
diff --git a/starter/03-CSS-Fundamentals/notes/style.css b/starter/03-CSS-Fundamentals/notes/style.css
@@ -0,0 +1,3 @@
+img {
+  width: 1000px;
+}
diff --git a/starter/03-CSS-Fundamentals/style.css b/starter/03-CSS-Fundamentals/style.css
@@ -51,10 +51,6 @@ li {
   font-size: 18px;
 }
 
-#copyright {
-  font-size: 16px;
-}
-
 .related-author {
   font-size: 18px;
   font-weight: bold;
@@ -134,3 +130,21 @@ a:active {
   background-color: black;
   font-style: italic;
 }
+
+/* resolving conflicts */
+/* 
+#copyright {
+  color: red;
+}
+
+.copyright {
+  color: blue;
+}
+
+.text {
+  color: yellow;
+}
+
+footer p {
+  color: green !important;
+} */
