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 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 botom.
  7. Target the header and color the background orange.
  8. Target article and color the background silver;
  9. Target article list items and make the background lightgreen.
  10. Target h1 and turn the type gold and background black. Hint, type is color. Center the text using text-align and increase font size to 3em.
  11. Target h2 and make the background yellow and a left-padding of 35px.
  12. Target the text spanned in this sentence and color it rebeccapurple while coloring the type white. Named in honor of Eric Meyer's little girl who died of brain cancer at the age of 6.
  13. Target the <span> in the Universal Selector article and color the background red
  14. Target the paragraphs in this article and make the text bold.
  15. Target body and give 10px padding on top and bottom and 25px padding on the sides and give the body a pink background color.
  16. Target the h2, p, and ol and give left margin of 15px.
  17. 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. You will learn about this next week but it changes the way width and height of elements are calculated. The default is set to content-box which adds the width and height of padding and border increasing the side of the element. This option keeps the element size the same and subtracts the padding and border from that.
  3. The universal selector becomes more useful when used to select all elements inside of another element. This article has id=universal. Select all elements inside of it 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 margins, 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 :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 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=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. The menu will now change whenever the viewport is less than 600 pixels.