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 effect 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 Code Review

While there are several more activities for today, this is the project we will peer code review at 4:15pm.

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..."?

What was done particularly well? And/or what advice do you have for the other pair?