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. Only 5px will show, the rest will be hidden by the content.
  3. 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.
  4. 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.
  5. Target the header and color the background orange.
  6. Target article and color the background silver.
  7. Target article list items and make the background lightgreen.
  8. Target h1 and turn the type gold and background black. Center the text using text-align and increase font size to 3em.
  9. Target h2 and make the background yellow and a left-padding of 35px.
  10. Target the text spanned in this sentence and color it rebeccapurple while coloring the type white.
  11. Target the in the Universal Selector article and color the background red.
  12. Target the paragraphs in this article and make the text bold.
  13. Target body and give 10px padding on top and bottom, 25px padding on the sides, and a pink background color.
  14. Target the h2, p, and ol and give left margin of 15px.
  15. 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 hsl(250 100 50 /.2);
  2. Change the box-sizing to border-box.
  3. Select all elements inside #universal and turn the 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 10 pixel margins, 10px 20px padding, and set their display to inline-block.
  3. Style the hover state green.
  4. Target every odd list item in the articles with background color lightblue using :nth-child(odd).

Part 4: Media Queries

  1. In the head set the viewport to the device screen size and force zoom to be 1:1:
  2. Create a media query set to max-width 600px: @media all and (max-width: 600px) {}
  3. Change the menu from horizontal to vertical by changing the nav li display to block when the viewport is less than 600px.