odin-default-css-exercises/foundations/06-cascade-fix
Daniel Murphy 0f83cb8e2d Update solution comments 2022-08-05 10:27:27 -04:00
..
solution Update solution comments 2022-08-05 10:27:27 -04:00
README.md Update cascade-fix/README.md 2022-07-26 14:42:42 -03:00
desired-outcome.png Update desired-outcome 2022-07-29 09:26:53 -03:00
index.html Update index.html 2022-07-29 09:17:26 -03:00
style.css Update foundations/06-cascade-fix/style.css 2022-08-04 14:17:55 -05:00

README.md

CSS Methods

This final exercise for CSS Foundations is going to give you a closer look at the cascade, in particular specificity and rule order. Both the HTML and CSS files are filled out for you, so instead of adding rules yourself, you will simply be editing what is provided.

There are a few elements that have some sort of specificity or rule order issue in the provided CSS file. It's up to you to figure out what issue is affecting an element, and how to fix it. You can edit the CSS file by adding, removing, or editing selectors for a declaration block, or by moving declaration blocks around. You should not edit the HTML file or any of the actual styles in the CSS.

There are multiple ways to solve this exercise, and we did our best to include all of the possible solutions for each element.

Issues with the cascade can be the bane of their existence for many when it comes to CSS. While you won't become a cascade expert from this exercise alone, and there are other ways to deal with these issues, it is still super helpful to see how these issues affect our final styles and why it's important to order rules carefully.

Desired Outcome

desired outcome

Self Check

  • Did you make sure to not edit the HTML file?
  • If you added selectors to the CSS, do they target a valid HTML element?

Note: for accessibility reasons, the style in this exercise has changed. For new and old students, we propose to carry out the exercise noting how important it is to pay attention to the accessibility of the web, and we encourage more and more practices like this.