Skip to main content
Version: v1.2

✏️ 1.1.4.2 Practice: Cascading

Goal: In the Cascading lesson, we learned:

  • Styles can be inherited by elements nested within other elements
  • In the CSS stylesheet, body can be used to style the entire page
  • Elements within other elements are known as child elements
  • The most specific CSS rule takes precedence
  • Avoid inline styling because it invalidates the power of CSS

Now, let's put these concepts to practice. In this exercise we will continue to practice everything we've learned thus far while simultaneously exploring cascading.

Warm Up​

  • What are the rules of specificity? How do they affect CSS selectors?
  • Why is inline CSS less preferable than CSS stylesheets?
  • How does CSS inheritance work?

Code​

Animal Shelter Website​

Now is your turn to practice with inheritance and cascading styles.

  • Create a new web page for an animal shelter. List out the animals available to be adopted, including pictures and descriptions of each animal. Have at least 3-5 animals listed. Don't forget to set up a git repository, make frequent commits and push to a remote repository on GitHub.
  • Display each animal's "profile" in a column.
  • Change the styles of elements nested within the columns using the idea of cascading.
  • Find other places in your web pages where you can change elements on the page according to cascading precedence.

Further Exploration​

Check out the CSS reference on the Mozilla Developer Network for ideas about what selectors and properties you can change with CSS.

Peer/Instructor Code Review​

After working on this project ask a Peer or Instructor for a Code Review.

  • Is a custom-made stylesheet that uses cascading, the box model, and floats included?
  • Is the indentation and spacing of HTML and CSS accurate?
  • Are commits made regularly with clear messages that finish the phrase "It will..."?