module3.2.2

Compukid · Compukid · commit 4cf85a16b14b · 2024-04-30T22:02:46.000-04:00
diff --git a/module3.2.2_classes_ids/index.html b/module3.2.2_classes_ids/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+        <title>Classes and IDs</title>
+        <link rel="stylesheet" href="style.css">
+    </head>
+    <body>
+        <h1>Classes and IDs</h1>
+        <p id="intro">
+            Classes and IDs are "attribute selectors". This means that you can attach style to HTML elements based on that element's attributes. This empowers you to apply different style to items of the same HTML type.
+        </p>
+        <p class="odd">
+            Classes are an HTML attribute that specifies a name for a group of elements on the page. You can apply the class name to as many elements as you like, even if they are of different HTML tag types. You can use the class name with a period in front as the selector.
+        </p>
+        <p class="even">
+            Class names must be single words, but you can include digits and dashes as long as the name begins with a letter. Note that names are case sensitive.
+        </p>
+        <p class="odd">
+            An ID is an HTML attribute that specifies a name or unique identifier for a particular HTML element. They are like classes with a very important distinction: the value of the ID attribute must be unique throughout the document. This lets you target a single HTML element for styling.
+        </p>
+        <p class="even">
+            ID names have the same rules as class names: start with a letter, can include numbers and dashes, no spaces. The way to create a selector for an ID is also similar to how you create a selector for a class, except you replace the period with a hash symbol ("#").
+        </p>
+    </body>
+</html>
diff --git a/module3.2.2_classes_ids/style.css b/module3.2.2_classes_ids/style.css
@@ -0,0 +1,9 @@
+#intro {
+    color: green;
+}
+.odd {
+    color: blue;
+}
+.even {
+    color: red;
+}
