modified: css/exercises/index.html

imrn16 · imrn16 · commit df5bb2e6225a · 2024-08-10T07:56:57.000-07:00
modified:   css/exercises/styles.css
diff --git a/css/exercises/index.html b/css/exercises/index.html
@@ -1,22 +1,31 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width">
-    <title>CSS Exercises</title>
-    <link href="styles.css" rel="stylesheet" type="text/css" />
-  </head>
-  <body>
-    <script src="script.js"></script>
-    <!-- You do not need to do anything with script.js right now! Later, we will learn how to add JavaScript to websites! --->
-    <h1>My Very Cool Web Page</h1>
-    <h2>Why this Website is Very Cool</h2>
-    <ol>
-      <li>I made it!</li>
-      <li>This website is colorful!</li>
-    </ol>
-    <h2 id="cool-text">Why I love Web Development</h2>
-    <p>Web Development is a very cool skill that I love learning!</p>
-    <p>I love making websites because all I have to do is reload the page to see the changes I have made!</p>
-  </body>
+	<head>
+		<meta charset="utf-8" />
+		<meta
+			name="viewport"
+			content="width=device-width" />
+		<title>CSS Exercises</title>
+		<link
+			href="styles.css"
+			rel="stylesheet"
+			type="text/css" />
+	</head>
+	<body>
+		<script src="script.js"></script>
+		<!-- You do not need to do anything with script.js right now! Later, we will learn how to add JavaScript to websites! --->
+		<h1 class="center">My Very Cool Web Page</h1>
+		<h2 class="center">Why this Website is Very Cool</h2>
+		<ol id="list-color">
+			<li>I made it!</li>
+			<li>This website is colorful!</li>
+		</ol>
+		<h2
+			class="center"
+			id="cool-text">
+			Why I love Web Development
+		</h2>
+		<p>Web Development is a very cool skill that I love learning!</p>
+		<p>I love making websites because all I have to do is reload the page to see the changes I have made!</p>
+	</body>
 </html>
diff --git a/css/exercises/styles.css b/css/exercises/styles.css
@@ -1 +1,16 @@
-/* Start adding your styling below! */ 
+/* Start adding your styling below! */
+body {
+	background-color: yellow;
+}
+
+h1 {
+	font-size: 36;
+}
+
+.center {
+	text-align: center;
+}
+
+#list-color {
+	color: blueviolet;
+}
