Complete CSS Foundations exercise 1

dmhenry · dmhenry · commit b8548aa532c0 · 2025-04-03T09:24:34.000-04:00
Added CSS type selectors using three methods:

  - external method
  - internal method
  - inline method
diff --git a/foundations/intro-to-css/01-css-methods/index.html b/foundations/intro-to-css/01-css-methods/index.html
@@ -1,14 +1,24 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta charset="UTF-8" />
+    <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.css" />
+    <style>
+      p {
+        background-color: green;
+        color: white;
+        font-size: large;
+        font-family: "Times New Roman", serif;
+        text-align: left;
+      }
+    </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; color: black; font-size: x-large; font-family: serif">Inline Method</button>
   </body>
-</html>
+</html>
diff --git a/foundations/intro-to-css/01-css-methods/styles.css b/foundations/intro-to-css/01-css-methods/styles.css
@@ -0,0 +1,8 @@
+div {
+    background-color: red;
+    color: white;
+    font-size: xx-large;
+    font-family: "Times New Roman", serif;
+    font-weight: bold;
+    text-align: center;
+}
