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.

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 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 a 10px 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. Set the viewport meta tag for responsiveness.
  2. Create a media query for max-width 600px.
  3. Change the menu from horizontal to vertical when viewport is less than 600px.