updated css lesson

step1-00/css-demo.css

@@ -1,29 +1,31 @@
+/* https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Combinators_and_multiple_selectors */
+
+/* Targeting an HTML tag */
 h1 {
-  padding: 10px;
-  margin-bottom: 15px;
-  margin-top: 15px;
   color: black;
   background: #ddd;
   border: 1px solid #ababab;
+  margin-bottom: 15px;
+  margin-top: 15px;
+  padding: 10px;
 }
 
-a {
-  color: white;
-}
-a:hover {
-  color: #ccc;
+/* Overriding inherited styles */
+span {
+  color: #004578;
 }
 
+/* Targeting a class name  */
 .tiles {
   display: flex;
 }
 
+/* Decendant selector */
 .tiles img {
-  display: block;
-  margin: 0 auto;
-  max-width: 75%;
+  width: 100%;
 }
 
+/* Direct decendant selector */
 .tiles > div {
   background: rgb(10, 10, 10);
   color: white;
@@ -32,18 +34,38 @@ a:hover {
   margin-right: 20px;
 }
 
+/* Qualified selector */
+div.links {
+  background: #004578;
+}
+
+/* Style inheritance only works for unstyled elements */
+a {
+  color: white;
+}
+
+/* Pseudo hover selector */
+a:hover {
+  color: #ccc;
+}
+
+/* Sibling selectors */
+a ~ a {
+  display: block;
+}
+
+/* Positional Pseudo Selectors  */
 .tiles > div:last-child {
   margin-right: 0;
 }
 
-a + a {
-  display: block;
-}
-
-#contact-form > * {
+/* ID and selector lists */
+#contact-form label,
+#contact-form input {
   display: block;
 }
 
+/* Attribute selector */
 input[type='submit'] {
   margin-top: 10px;
 }

step1-00/css-demo.html

@@ -6,7 +6,7 @@
     <div>
       <h1>This is my <span>Title</span></h1>
       <div class="tiles">
-        <div>
+        <div class="links">
           <h2>Important Links</h2>
           <a href="#">We're Awesome</a>
           <a href="#">Learn More</a>
@@ -14,14 +14,14 @@
         </div>
         <div>
           <h2>Our Logo</h2>
-          <img src="./fabric.jpg" alt="fabric logo" />
+          <img src="./fabric.jpg" width="100" alt="fabric logo" />
         </div>
         <div>
           <h2>Contact Us</h2>
-          <form id="contact-form">
+          <div id="contact-form">
             <label>Email</label><input type="email" />
             <input value="Submit" type="submit" />
-          </form>
+          </div>
         </div>
       </div>
     </div>