Skip to content

Latest commit

 

History

History
71 lines (55 loc) · 2.9 KB

README.md

File metadata and controls

71 lines (55 loc) · 2.9 KB
Raw

Selectors - Exercises

Overview

In this exercise we will practice using various CSS Selectors. Specifically we will use:

  • Basic Selectors (Type, Class, Id, Universal)
  • Attribute Selectors
  • Combinators
  • Pseudo Selectors (Structural, State)
  • Pseudo Element Selectors (Before and After)

GAME - CSS Diner

Overview

In this exercise we will get familiar with the various CSS Selectors by playing a game called CSS Diner

Getting Started

#Instructions

  • The game consists of 32 levels.
  • In each level There is scene described uisng an HTML-like file that contains some made up elements like <plate>, <bento> etc.
  • The target of each level is to select specific elements from the scene, using CSS Selectors
  • To solve the level, you need to write the correct selector inside the CSS Editor in the line dedicated to that.
  • Once you have finished writing the answer, click on the enter button to check if your answer is correct. If it is, you will move on to the next level.
  • Your goal is to finish all 32 levels
ENJOY!

EXERCISE - Selectors

  • Create a new project and download the index.html file.
  • Add a selectors.css file to your project.
  • Add a <link> tag to the html file to link it to the CSS file you have created

Steps

Style the HTML elements according to the following instructions.

DO NOT ALTER THE EXISTING HTML TO DO THIS.  WRITE ONLY CSS!
  1. Give the <body> element a background of #bdc3c7
  2. Make the <h1> element #9b59b6
  3. Make all <h2> elements orange
  4. Make all <li> elements blue (pick your own hexadecimal blue)
  5. Change the background on every paragraph to be yellow
  6. Make all inputs have a 3px red border
  7. Give everything with the class hello a white background
  8. Give the element with id special a 2px solid blue border (pick your own rgb blue)
  9. Make all the <p>'s that are nested inside of divs 25px font (font-size: 25px)
  10. Make only inputs with type text have a gray background
  11. Give both <p>'s inside the 3rd <div> a pink background
  12. Give the 2nd <p> inside the 3rd <div> a 5px white border
  13. Make the <em> in the 3rd <div> element white and 20px font (font-size:20px)

Advanced Exercises:

You may need to research some other selectors and properties
  1. Make all checked checkboxes have a left margin of 50px (margin-left: 50px)
  2. Make the <label> elements all UPPERCASE without changing the HTML(definitely look this one up)
  3. Make the first letter of the element with id special green and 100px font size (font-size: 100)
  4. Make the <h1> element's color change to blue when hovered over
  5. Make the <a> element's that have been visited gray
  6. Surround all elements with the class quoted with double quotes before and after the text. Make the quotes have 36px font and red color.