Merge pull request TheOdinProject#190 from Zekumoru/fix_exercise_solu…

…tion 02-class-id-selectors: Change solution
Gil-Gaitan · Nov 19, 2022 · 8bea2cf · 8bea2cf
2 parents b65d8fa + baea35d
commit 8bea2cf
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 4 deletions.
diff --git a/foundations/02-class-id-selectors/solution/solution.css b/foundations/02-class-id-selectors/solution/solution.css
@@ -3,7 +3,7 @@
   font-family: Verdana, "DejaVu Sans", sans-serif;
 }
 
-.oddly-cool {
+.adjust-font-size {
   font-size: 24px;
 }
 
@@ -12,8 +12,16 @@
   font-size: 36px;
 }
 
+/*
+    In the id selector 'four' below, we could have also
+    added a rule to set the font size to 24px.
+
+    However, since the elements 'Number 3' and 'Number 4'
+    in the HTML file share the same font size, we reused
+    the 'adjust-font-size' class above to help reduce
+    duplicate code.
+*/
 #four {
   background-color: hsl(120, 100%, 75%);
-  font-size: 24px;
   font-weight: bold;
 }
diff --git a/foundations/02-class-id-selectors/solution/solution.html b/foundations/02-class-id-selectors/solution/solution.html
@@ -10,8 +10,8 @@
   <body>
     <p class="odd">Number 1 - I'm a class!</p>
     <div id="two">Number 2 - I'm one ID.</div>
-    <p class="odd oddly-cool">Number 3 - I'm a class, but cooler!</p>
-    <div id="four">Number 4 - I'm another ID.</div>
+    <p class="odd adjust-font-size">Number 3 - I'm a class, but cooler!</p>
+    <div id="four" class="adjust-font-size">Number 4 - I'm another ID.</div>
     <p class="odd">Number 5 - I'm a class!</p>
   </body>
 </html>