Grid Displays
Media Queries
CSS Selectors
Riddles
100
Fill in the blank. How can we make the class "gridContainer" have a grid display?
.gridContainer{
display: ______;
}
What is grid
100
Fill in the blank. What media query will make all paragraphs purple if the screen has a width greater than 1000px?
@media (min-width: _______) {
p{ color: purple;}
}
What is 1000px
100
This selector will select all paragraphs.
What is:
p
100
I'm light as a feather, but not even the strongest person can hold me for more than five minutes.
What is breath
200
The number of columns in this grid.
What is 3.
200
(True or False)
This media query will run when the width of the screen is 900px.
What is true
200
This CSS selector will select the element with the ID "myElement"
What is:
#myElement
200
I start with an "e", end with an "e", and contain one letter.
What is an envelope?
300
The largest column in this grid.
What is #3?
300
True or false - the text size will be quite large for paragraphs. Our screen is 1000x500px. 
What is false?
300
This CSS selector will select all elements with the class "period6"
What is:
.period6
300
You see a boat filled with people, yet there isn’t a single person on board. How is that possible?
What is all the people are married?
400
The row will myClass by displayed in.
What is row #3?
400
(True or false)
This media query will apply the styles inside with a screen width of 1000px.
What is false?
400
This CSS selector will select ALL descendants of an element with the class "selectMyDescendants"
What is:
.selectMyDescendants *
400
I have branches, but no fruit, trunk or leaves.
What is a bank?
500
The number of rows in this grid.
Impossible to tell.
500
Fill in the blanks. We want to remove images from the screen if the width is 500px or smaller.
What is max-width: 500px and display: none
500
This CSS selector will select all images that are a direct children of the class "bob".
What is:
.bob > img
500
Forward I am heavy, but backward I am not.
What is a ton?