CSS Element Position: Quiz
Quiz
1) What does this CSS rule do?
p:first-child{
font-family: cursive;
}
Answer: Applies cursive font to the first p tag of its parent element
2) Complete this sentence: "Selectors with the display property `none` will..."
Answer: ...not be visible on the webpage
3) Which property is the "edge" of the div elements?
p {
border: 2px solid blue;
margin: 50px;
padding: 50px;
display: inline-block;
}
Answer: border
4) Which of the following best describes the `static` value of the CSS `position` property?
Answer: Where the element would normally go
5) Which of the following best describes the effect of CSS' `float` property?
Answer: Positions elements within the flow of the webpage
6) Because of its `clear` property, this `footer` div will:
#footer {
border: 1px solid blue;
height: 50px;
clear: both;
}
Answer: Move below all floating elements on the webpage
7) Which of the following would decrease space between the "above" div and the p below it?
<div id="above"></div>
<p>Meaningful paragraph content</p>
Answer: A negative value for the "above" div's margin-bottom property
8) How will divs be arranged according to this code?
div {
height: 50px;
width: 100px;
display: inline-block;
}
9) Complete this sentence: "Margin is..."
Answer: ...the space around an HTML element
10) By default, div elements do which of the following?
Answer: Take up the full width of the webpage
11) Because of its position property, the header div:
#header {
height: 200px;
border: 2px solid black;
background-color: #45ADA8;
width: 100%;
position: fixed;
}
Answer: Will not move as you scroll up or down the webpage
12) By default, HTML elements have a ____ value for the `position` property.
Answer: static
13) Which property could be used here to move divs 100px to the right?
div {
height: 50px;
width:50px;
border: 1px solid black;
background-color: yellow;
____-___: 100px;
}
Answer: margin-left
14) If an p element's padding is 20px, which of the following is true ?
Answer: There are 20px between the p text and its border
15) What is true about these CSS rules?
a:link {
color:#008B45;
text-decoration: none;
} a:hover {
color:#00FF00;
} a:visited {
color:#EE9A00;
}
Answer: All of these are correct (They deal with how to style a tags, They utilize pseudo-class selectors, They use selectors that aren't part of the document tree )