Painless Quiz:
a.) < > HTML (Tag)
b.) # CSS (Color Code) (ID)
c.) . CSS (Class)
d.) { } CSS (Block)
Answer: True
__ should be created in the HTML
Answer: Content
How much can you
remember?? Answer as best you can in a
word document
Save as: last-first_day2-quiz
1. Write “CSS”
or “HTML”, whichever applies best for each that follows:
a) { }
css
b) < > html
c) body { css
d) <body> html
2. T or F- “Content on a web page should be controlled by the CSS”
true
3. Fill
in the blank
Use ______ to make boxes “pile” horizontally
across the page
float
4. List all
that is wrong with the following:
#boxb {
width:
100px;
heigt: 100px
border:
1px solid black;
float:
left;
clear:
both;
Answer: no ; afrer
100px, you cant floar and clear the same box
#footer:
with:
100px;
height:
100px
border:
1px solid black;
clear:
both;
}
Answer: no ; after 100px
5. What CSS
property allows you to move divs below floated
boxes?
How much can you
remember?? Answer as best you can in a word
document
Copy/paste this quiz into
your “painless-quizzes.doc” document
Insert a page break so
this quiz is on its own page
1. Write “CSS”
or “HTML”, whichever applies best for each that follows:
a) id=” html
b) .text-emphasis css
c) body { css
d) <body> html
2. T or F- “Always float and clear the same box” - false. never.
3. Fill
in the blanks
Use __________ and ___________ to center a box
on the page
-Margin right auto and margin left auto
4. List all
that is wrong with the following:
a. <div id=box-r>red
box<div/>
-id= ‘’box-r’’
b. <div
id="inner-wrapper">
<div #="box-w>white
box/div>
<div
id="box-b">blue box/div>
</div> <--closes
inner-wrapper-->
-no # sign.
No quote for ‘’white’’. And no < for </div>. no indent. <!—closes-->
5. What CSS property allows you to push boxes away from one another?
Margins
How much can you
remember?? Answer as best you can in a
word document
1. Write “CSS”
or “HTML”, whichever applies best for each that follows:
a) { }
CSS
b) < > HTML
c) body { CSS
d) <body> HTML
2. T or F- “Content on a web page should be controlled by the CSS”
Answer: False
3. Fill
in the blank
Use ______ to make boxes “pile” horizontally
across the page
Answer: Float
4. List all
that is wrong with the following:
#box-b {
width:
100px;
heigt: 100px
border:
1px solid black;
float:
left;
clear:
both;
height
is spelled wrong, no ‘;’ after 100px, you don’t do clear and float on the same
box, no } at the end.
#footer:
with:
100px;
height:
100px
border:
1px solid black;
clear:
both;
}
Answer: width is spelled wrong, no ; after
100px, no { at the beginning.
4.
What CSS property allows you to move divs below floated boxes?
Answer: Clear.
Copy/paste the 4 questions below into your painless-quiz.doc file
Make sure all 5 quizzes are in one document
1) Describe the difference between the effects of padding and margin in CSS
Padding: they push boxes away from the text inside the box.
Margin: that Is how far the boxes are away from eachother.
2) Draw a picture that helps explain your answer to #1
Done
in class.
3) Describe what this CSS code does when applied correctly:
clear: both;
makes it so that the boxes below float are the ones that move.
4) Write the CSS and HTML that will achieve the following result:
· Creates
a
· Has a green border of 5px
· When text is entered in the box, there’s 5px between any word and any border
#box-g {
Width: 80px;
Height: 30px;
Border: 5px solid green;
Padding: 5px;
}
<div id=”box-g”> box </div>