HTML/CSS Quiz 1
How much can you remember?? Answer as best you can in a word document.
Save as:
last-first_day1-quiz
Write “CSS” or “HTML”, whichever applies best for each that follows:
a)
“< >” à
HTML à Tags
b)
“#” à CSS à Hex
Color Code / ID
c)
“.” à CSS à Class
d)
“{ }” à
CSS à Begin / End
2) T or F –
“Formatting on a web page should be controlled by the CSS”
TRUE
3) Fill in the blank
________ should be created in the
HTML
Content
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 à Begin / End
b) < > à HTML à Tags
c) body { à
CSS à Body “begin”
d) <body> à HTML à Body “tag”
2. T or F- “Content on a web
page should be controlled by the CSS”
FALSE à
HTML controls the content of the page and the CSS controls that formatting of
the page
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 { à #box-b {
width:
100px;
heigt: 100px à height: 100px;
border:
1px solid black;
float:
left;
clear:
both; à Delete
the line. You never float and clear the same element
à }
#footer: à
“:” changes to a “{“
with:
100px; à width: 100px;
height:
100px à height: 100px;
border:
1px solid black;
clear:
both;
}
5. What CSS
property allows you to move divs below floated
boxes?
Clear
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, you never float and clear the same element
3. Fill
in the blanks
Use ___________ and ___________ to center a
box on the page
Margin-left: auto;
margin-right: auto;
4. List all
that is wrong with the following:
a. <div id=”box-r”>red
box</div>
b. <div
id="inner-wrapper">
<div id="box-w”>white
box</div>
<div
id="box-b">blue box</div>
</div> <--!closes
inner-wrapper-->
5. What CSS property allows you to push boxes away from one another?
Margins in
general
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”
FALSE!!! HTML is used to control the content of a page, while
the CSS is use purely for the formatting of the webpage.
3. Fill
in the blank
Use ______ to make boxes “pile” horizontally
across the page
Float
4. List all
that is wrong with the following:
#box-b {
width:
100px;
height:
100px;
border:
1px solid black;
float:
left;
clear:
both; Never float and clear the element. Delete this
line.
}
#footer {
width:
100px;
height:
100px;
border:
1px solid black;
clear:
both;
}
1.
What CSS property allows you to move divs below floated boxes?
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
Margin is used to push a box away from the edge of the webpage and padding enlarges a box to allow a space with a box for text to have the typical space away from the direct edge within the box and allows for text to be read easier.
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;
Clear is used to move a box below another row of floated boxes and allows for better formatting and view of the webpage or to add logical order to the boxes within the webpage.
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 {
Width: 80px;
Height: 30px;
Border: 5px
solid green;
Padding:
5px;
}
<div id=”box”> Box </div>
The text below has no formatting
The user will have trouble understanding the info
Add:
· Headings
· Bullet/numbered lists and
· Bolding to assist the user for easy understanding
1) Files to copy
2) copy #6
3) paste into painless quiz doc
1) Get familiar with structure
2) Personalize all titles
3) Personalize self description
o Make sure to add <p> tags!
4) Add your schedule
5) Research and add favorite links??