Selection Worksheet

Part 1: Type Selectors

Instructions:

You are to fill in the CSS only. Do not change the HTML markup

  1. Target main and give max-width of 1500px.
  2. Target section and make max-width 1000px, margin auto, and give it an outline of 2px solid black.
  3. Target ordered and unordered lists and give them a decimal list-style and 20px padding.
  4. Target h1 through h6 and set font-size to 1.5em, font-weight to 700, color to #555 and padding to 30px top, 0px on the sides and 10px on the bottom.
  5. Target paragraphs and list items and set the line-height to 1.2em and margin to 7px top, none on the sides and 3px on the bottom.
  6. Target the header and color the background orange.
  7. Target article and color the background silver.
  8. Target article list items and make the background lightgreen.
  9. Target h1 and turn the type gold and background black. Center the text using text-align and increase font size to 3em.
  10. Target h2 and make the background yellow and a left-padding of 35px.
  11. Target the text spanned in this sentence and color it rebeccapurple while coloring the type white.
  12. Target the <span> in the Universal Selector article and color the background red.
  13. Target the paragraphs in this article and make the text bold.
  14. Target body and give 10px padding top/bottom and 25px sides with a pink background.
  15. Target the h2, p, and ol and give left margin of 15px.
  16. Target the list items in the header and change their display to inline-block.

Part 2: Universal Selector

  1. Select all html elements and give them a 1px outline of solid blue with 20% alpha.
  2. Change the box-sizing to border-box.
  3. Select all elements inside this article and turn background to silver.

Part 3: Pseudo Selectors

  1. Remove the underline from the navigation links and color them white. Color background red.
  2. Give links a 10 pixel margin, 10px 20px padding and set their display to inline-block.
  3. Style the hover green.
  4. Target every odd list item in the articles with background color lightblue.

Part 4: Media Queries

  1. Viewport set to device screen size, zoom 1:1.
  2. Create media query max-width 600px.
  3. Menu becomes vertical when <600px.