This is a quick exercise that demonstrates the different weight values of the three main CSS selector types, tag, class, and id, by targeting the same html tag with each of them.

  1. Go to codepen.io and log into your account.

  2. Next, go to the button icon at the far right top corner and select the "New pen" option.

  3. In the HTML pane, add a div tag.

  4. Within the div tag, type "lorem" and then hit the tab key. This will produce some placeholder text.

  5. Add a class attribute with value "block" to the div:

  6. Add an id attribute with value "intro" to the div:

  7. In the CSS pane, create a "div" tag selector and set the background color to yellow. A yellow background should appear immediately in the output pane.

  8. Below the tag selector, create a "block" class selector and set the background color to orange. The previously yellow background should now change to orange in the output pane.

  9. Below the class selector, create an "intro" id selector and set the background color to red. The previously orange background should now change to red in the output pane.

  10. When done, click the "Save" button.

  11. Click on the "Settings" button. Add the following title "Selector weight" in the title field. Also, add "html" and "css" tags in the tags field.

  12. When you're done, submit a link to your pen via the Assignments option for this week in Insight.