Find file History
Pull request Compare This branch is 1 commit ahead, 1 commit behind atl-wdi:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

CSS Selectors Basics Exercise

Using what we've done in class, open the starter code provided and see how far you can get through these exercises in 10 minutes:

  • make an unordered HTML list of the following animals:

    • mouse
    • canary
    • penguin
    • salmon
    • cat
    • goldfish
    • dog
    • sheep
    • parakeet
    • tuna
  • make all the mammals red, all the birds blue, and all the fish orange using CSS classes

  • apply the following colors to the list using IDs:

    • mouse - gray
    • canary - orangeRed
    • penguin - black
    • salmon - salmon
    • cat - sienna
    • goldfish - gold
    • dog - tan
    • sheep - steelBlue
    • parakeet - lime
    • tuna - purple
  • add the following background colors to your existing classes:

    • mammal - lavenderBlush
    • bird - lightGray
    • fish - lightYellow
  • add thesee CSS rules as you see fit:

    • make the mammals bold
    • make the birds italic
    • make the fish underlined
  • create a new unordered ordered list add a list item for each the following plants:

    • Dogwood Tree
    • Oak Tree
    • Saguaro
    • Kelp
    • Venus Fly Trap
    • Ent
  • give all ul's a border with a width of 3 pixels, a color of plum, and a style of dotted. Also, give them a border radius of 5px.

  • give all li's a top border of 3 pixels, a color of seagreen, and a style of solid.

Conclusion (5 mins)

CSS can be really fun or a total nightmare. You have to remember a few rules, but once you have them remembered, it's great to see your webpage come to life as you imagined.

  • Describe the differences between classes and IDs.
  • Identify the popular CSS properities we used today.
  • What are the use cases for inline styling vs. internal/external style sheets?