cheeks/css-exercises
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'main' of gitea.lt.leftovertoast.net:cheeks/css-exercises

Browse Source
This commit is contained in:
cheeks 2024-07-10 18:57:52 -04:00
commit 832618ca0a
2 changed files with 6 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
foundations/03-grouping-selectors/README.md
View File

@ -4,15 +4,16 @@ Let's build a little off the previous exercise. Here, you're going to give two e
This will help you further practice adding classes and using class selectors, so be sure you add the class attribute in the HTML file. For the remainder of these exercises, the format of any colors is entirely up to you; we trust you'll practice using the different values! The properties you need to add to each element are: This will help you further practice adding classes and using class selectors, so be sure you add the class attribute in the HTML file. For the remainder of these exercises, the format of any colors is entirely up to you; we trust you'll practice using the different values! The properties you need to add to each element are:
* **The first element**: a black background, white text color, and a bold font weight - **The first element**: a black background and white text
* **The second element**: a yellow background - **The second element**: a yellow background
* **Both elements**: a font size of 28px and a list of fonts containing `Helvetica` and `Times New Roman`, with `sans-serif` as a fallback - **Both elements**: a font size of 28px and a list of fonts containing `Helvetica` and `Times New Roman`, with `sans-serif` as a fallback
## Desired Outcome ## Desired Outcome
![desired outcome](./desired-outcome.png) ![desired outcome](./desired-outcome.png)
### Self Check ### Self Check
- Does each element have a unique class name? - Does each element have a unique class name?
- Did you use the grouping selector for styles that both elements share? - Did you use the grouping selector for styles that both elements share?
- Did you make separate rules for the styles unique to each element? - Did you make separate rules for the styles unique to each element?

4
foundations/03-grouping-selectors/solution/solution.css
View File

@ -1,4 +1,3 @@
.inverted, .inverted,
.fancy { .fancy {
font-family: Helvetica, "Times New Roman", sans-serif; font-family: Helvetica, "Times New Roman", sans-serif;
@ -8,9 +7,8 @@
.inverted { .inverted {
background-color: black; background-color: black;
color: white; color: white;
font-weight: bold;
} }
.fancy { .fancy {
background-color: yellow; background-color: yellow;
} }