HTML
CSS
Box Model
Display/Float
Misc
100
What does HTML stand for?
Hypertext Markup Language
100
What does CSS stand for?
Cascading Style Sheets
100
Everything in a website is a _____
A box!
100
Name two different display property values
block, inline, inline-block
100
How many brothers do I have? Bonus if you remember what number I am.
3. I'm the youngest.
200
What is the difference between the head and the body tags?
head is for meta-information about the webpage
body is for the content that you see
200
In the example below, what is the term for "p" and what is the term for "color: white;"?
p { color: white; }
p is a selector
color:white; is a property
200
What is the box-model property that adds space inside the border?
Padding
200
Imagine two divs with display: block. How will they appear?
Stacked on top of each other.
200
What is the tag used to connect an HTML file with a CSS file? Bonus points if you can write out the syntax.
The link element.
<head>
<link rel="stylesheet" href="styles.css">
</head>
300
What is the syntax for selecting an element with a class of "red"?
.red {}
300
Draw and label the box model
300
Suppose you wanted to make a navigation bar with buttons in a row. What display property would you use?
inline-block
300
When structuring a website, we should be thinking in terms of _____ and _____ .
Rows and Columns
400
What is the syntax for creating a paragraph with the text "hello world" and a class of "red"?
`<p class='red'>hello world</p>`
400
The default text color of a document is black.
Imagine you have a div with a paragraph inside. The div has the `color: white;` property set.
What will the color of the paragraph be and why?
Also white because it inherits the color from its parent.
400
How do you center a div within a container?
Set a width and add margin: auto.
400
Imagine you have a row that is 700px wide and it has two inline-block elements that are each 400px wide. What will happen?
Bonus: How do you ensure two elements in a row ALWAYS fit?
The second element will go onto its own line.
Bonus: You can use percent units that equal 100%
400
What direction will a box with the following properties be move?
And what is its position relative to: relative to the body, relative to its parent, or relative to its original position?
.box { position: relative; top: 100px; left: -100px }
The box will move down and to the left. It will be relative to its original position.
500
Label the diagram using semantic tags
Header, main, footer, aside
500
What will be the resulting background color of the element assuming that all of the selectors apply?
.box { background: red; }
div { background: blue; }
div.box { background: purple; }
Purple! The div.box selector is the most specific.
500
What is the difference between box-sizing: content-box and box-sizing: border-box?
(It's okay if you don't remember which is which)
box-sizing: content-box is the default. It calculates the total size of an element by adding width, height, padding, and border.
box-sizing: border-box calculates the total size of an element to equal the width/height properties. Padding and border push the content inward.
500
Inline-block elements will have a tiny space between them. If we want to create a row of elements that are right next to each other, what can we do?
We can wrap the elements in a container and use float.
500
What is the difference between `em` and `rem` units?
ems are based on the parent font size
rems are based on the root (html) font size