/use-all-the-selectors

A CSS exercise refreshing and teaching about all the different selectors.

Primary LanguageHTML

summary time deliverables
A CSS exercise refreshing and teaching about all the different selectors.
30 minutes
1 HTML file, 1 CSS file

Use all the selectors!

Overview

  • Fork this repository.
  • Create a new CSS file named main.css in your css folder—it’s already connected in the HTML.
  • Write the CSS selectors described below and add the requested properties.
  • Double check that it matches the included screenshot.
  • Do NOT change the HTML.
  • Run it through Markbot and make sure it passes all the checks.

CSS selectors

  1. Select body — add background-color: #fdf6e3;
  2. Select header and footer — add font-size: 1.5rem;
  3. Select ul inside nav — add font-family: sans-serif;
  4. Select the logo by class — add text-transform: uppercase;
  5. Select the class wrapper — add background-color: #eee8d5;
  6. Select the IDs contents, favs, facts and types — add color: #93a1a1;
  7. Use a child (or direct descendant) selector to get the .dfn that’s immediately inside the .wrapper (not inside anything else) — add background-color: #b58900;
  8. Use an adjacent selector to get the strong inside .dfn, the strong that starts “Botanically…” — add color: #fff;
  9. Select all the a tags, but not the a tags with the class of .no-highlight — add background-color: #719e07;
  10. Select the link with rel="external" attribute — add background-color: #2694d8;
  11. Select the first li inside the ol — add color: #719e47;
  12. Select the last li inside the ol — add color: #2aa198;
  13. Select every odd li inside .types — add background-color: #657ba3;
  14. Select every even li inside .types — add background-color: #586e75;
  15. Select every 3rd li inside .types — add background-color: #d04b16;

Goal

Visually match the images in the “screenshots” folder.

  • Final screenshots in the “screenshots” folder.

Hand in

Drop this folder into your Markbot application. Make sure to fix all the errors. And submit for grades using Markbot.