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:
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
- Venus Fly Trap
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?