TheOdinProject · Prateek14b · Feb 3, 2025 · Feb 3, 2025 · Feb 3, 2025 · Feb 3, 2025
diff --git a/foundations/block-and-inline/01-margin-and-padding-1/style.css b/foundations/block-and-inline/01-margin-and-padding-1/style.css
@@ -7,22 +7,23 @@ body {
   background: pink;
   border: 3px solid blue;
   /* CHANGE ME */
-  padding: 0px;
-  margin: 0px;
+  padding: 32px;
+  margin: 12px;
 }
 
 .two {
   background: lightblue;
   border: 3px solid purple;
   /* CHANGE ME */
-  margin-bottom: 0px;
+  margin-bottom: 48px;
 }
 
 .three {
   background: peachpuff;
   border: 3px solid brown;
   width: 200px;
   /* CHANGE ME */
-  padding: 0px;
-  margin-left: 0px;
+  padding: 32px;
+  margin-left: auto;
+
 }
diff --git a/foundations/cascade/01-cascade-fix/index.html b/foundations/cascade/01-cascade-fix/index.html
@@ -20,3 +20,4 @@
     </div>
   </body>
 </html>
+<!--yeah, im calling it a day. woohoo-->
diff --git a/foundations/cascade/01-cascade-fix/style.css b/foundations/cascade/01-cascade-fix/style.css
@@ -8,17 +8,18 @@ body {
   font-weight: 800;
 }
 
-.small-para {
-  font-size: 14px;
-  font-weight: 800;
-}
-
+/* just repositioned this .para class selector above .small-para. This ensures this class property gets overruled by the one below it. */
 .para {
   font-size: 22px;
 }
 
-.confirm {
-  background: green;
+.small-para {
+  font-size: 14px;
+  font-weight: 800;
+}
+/*changed background to background-color as error correction. Also, chained classes together to get precedence.*/
+.confirm.button {
+  background-color: green;
   color: white;
   font-weight: bold;
 } 
@@ -28,8 +29,8 @@ body {
   color: rgb(0, 0, 0);
   font-size: 20px;
 }
-
-.child {
+/*chained three selectors to target the child div element, and give this precedence over the 2-chained selector below. */
+div.child.text { 
   color: rgb(0, 0, 0);
   font-weight: 800;
   font-size: 14px;

diff --git a/foundations/intro-to-css/01-css-methods/index.html b/foundations/intro-to-css/01-css-methods/index.html
@@ -5,10 +5,18 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Methods for Adding CSS</title>
+    <link rel="stylesheet" href="styles/style.css">
+    <style>
+      p{
+        background-color: green;
+        color:white;
+        font-size: 18px;
+      }
+    </style>
   </head>
   <body>
     <div>Style me via the external method!</div>
     <p>I would like to be styled with the internal method, please.</p>
-    <button>Inline Method</button>
+    <button style="background-color: orange; font-size: 18px;">Inline Method</button>
   </body>
 </html>
diff --git a/foundations/intro-to-css/01-css-methods/styles/style.css b/foundations/intro-to-css/01-css-methods/styles/style.css
@@ -0,0 +1,7 @@
+div{
+    background-color: red;
+    color: white;
+    font-size: 32px;
+    text-align: center;
+    font-weight: bold;
+}
diff --git a/foundations/intro-to-css/02-class-id-selectors/index.html b/foundations/intro-to-css/02-class-id-selectors/index.html
@@ -8,10 +8,10 @@
     <link rel="stylesheet" href="style.css">
   </head>
   <body>
-    <p>Number 1 - I'm a class!</p>
-    <div>Number 2 - I'm one ID.</div>
-    <p>Number 3 - I'm a class, but cooler!</p>
-    <div>Number 4 - I'm another ID.</div>
-    <p>Number 5 - I'm a class!</p>
+    <p class="oddnumber">Number 1 - I'm a class!</p>
+    <div id="second-element">Number 2 - I'm one ID.</div>
+    <p class="oddnumber largerfont">Number 3 - I'm a class, but cooler!</p>
+    <div id="fourth-element">Number 4 - I'm another ID.</div>
+    <p class="oddnumber">Number 5 - I'm a class!</p>
   </body>
 </html>
diff --git a/foundations/intro-to-css/02-class-id-selectors/style.css b/foundations/intro-to-css/02-class-id-selectors/style.css
@@ -0,0 +1,16 @@
+.oddnumber{
+    background-color: rgb(244, 119, 119);
+    font-family: 'Verdana', 'DejaVu Sans', 'sans-serif';
+}
+#second-element{
+    color: rgb(0,0,256);
+    font-size: 36px;
+}
+#fourth-element{
+    background-color: rgb(96, 244, 96);
+    font-size: 24px;
+    font-weight: bold;
+}
+.largerfont{
+    font-size: 24px;
+}
diff --git a/foundations/intro-to-css/03-grouping-selectors/index.html b/foundations/intro-to-css/03-grouping-selectors/index.html
@@ -8,7 +8,7 @@
     <link rel="stylesheet" href="style.css">
   </head>
   <body>
-    <button>Click Me!</button>
-    <button>No, Click Me!</button>
+    <button class="first-element">Click Me!</button>
+    <button class="second-element">No, Click Me!</button>
   </body>
 </html>
diff --git a/foundations/intro-to-css/03-grouping-selectors/style.css b/foundations/intro-to-css/03-grouping-selectors/style.css
@@ -0,0 +1,11 @@
+.first-element{
+    background-color:black;
+    color:white;
+}
+.second-element{
+    background-color:yellow;
+}
+.first-element, .second-element{
+    font-size:28px;
+    font-family: Helvetica, 'Times New Roman',sans-serif;
+}
diff --git a/foundations/intro-to-css/04-chaining-selectors/style.css b/foundations/intro-to-css/04-chaining-selectors/style.css
@@ -1 +1,8 @@
-/* Add CSS Styling */
+.proportioned.avatar{
+    width: 300px;
+    height: auto;
+}
+.avatar.distorted{
+    width: 200px;
+    height: 400px;
+}
diff --git a/foundations/intro-to-css/05-descendant-combinator/style.css b/foundations/intro-to-css/05-descendant-combinator/style.css
@@ -0,0 +1,6 @@
+div p{
+    background-color:yellow;
+    color:red;
+    font-size: 20px;
+    text-align: center;
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -20,3 +20,4 @@ @@
         </div>
       </body>
     </html>
+    <!--yeah, im calling it a day. woohoo-->