Current Assignment(s)

P2: The Instructables Site
Due: Recommended by Monday, 6.04

Directing Attention

By now, you are familiar with two ways to select an “item” to style:

  1. By the structural element itself:
    • body {} (“Do ___ to the entire body of the page.”)
    • table {} (“Do ___ to all tables on the page.”)
    • p {} (“Do ___ to all paragraphs on the page.”)
  2. By creating classes:
    • .a-class {} (“Do ___ to any element with class="a-class".”)
    • .another-class {} (“Do ___ to any element with class="another-class".”)

As you can see, selecting elements effects large portions of the page, good for backgrounds, image styling, and text. Creating and selecting classes is good for styling distinct portions of the page, to better differentiate them from each other. We can combine these selections to style elements, both overall and individually.

For example, we can say we want all tables in our site to have black borders 1px wide, but the first table will have orange text, and the second green: