Merge pull request #190 from Zekumoru/fix_exercise_solution

02-class-id-selectors: Change solution
This commit is contained in:
Eric Olkowski 2022-11-19 07:25:06 -05:00 committed by GitHub
commit 8bea2cf448
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 12 additions and 4 deletions

View File

@ -3,7 +3,7 @@
font-family: Verdana, "DejaVu Sans", sans-serif; font-family: Verdana, "DejaVu Sans", sans-serif;
} }
.oddly-cool { .adjust-font-size {
font-size: 24px; font-size: 24px;
} }
@ -12,8 +12,16 @@
font-size: 36px; 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 { #four {
background-color: hsl(120, 100%, 75%); background-color: hsl(120, 100%, 75%);
font-size: 24px;
font-weight: bold; font-weight: bold;
} }

View File

@ -10,8 +10,8 @@
<body> <body>
<p class="odd">Number 1 - I'm a class!</p> <p class="odd">Number 1 - I'm a class!</p>
<div id="two">Number 2 - I'm one ID.</div> <div id="two">Number 2 - I'm one ID.</div>
<p class="odd oddly-cool">Number 3 - I'm a class, but cooler!</p> <p class="odd adjust-font-size">Number 3 - I'm a class, but cooler!</p>
<div id="four">Number 4 - I'm another ID.</div> <div id="four" class="adjust-font-size">Number 4 - I'm another ID.</div>
<p class="odd">Number 5 - I'm a class!</p> <p class="odd">Number 5 - I'm a class!</p>
</body> </body>
</html> </html>