CSS Selector Basics

Style using Classes and IDs - Independent Practice (10 mins) - PART 1

Using what we've done in class 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

Independent Practice - Using CSS to select class and id attributes (10 minutes) - PART 2

Go back to your code from the previous independent practice problem and continue to work through these exercises:

• make the mammals bold

• make the birds italic

• make the fish underlined

• create a new unordered 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.