HTML/CSS Quiz #5

back to my site

 

1)  Describe the difference between the effects

of padding and margin in CSS

Padding pushes the box away from content

blank space between content and border

margin pushes boxes away from each other

spacing between boxes

 

2)  Draw a picture that helps explain your answer to #1

 

 

 

3)  Describe what this CSS code does when applied correctly:

            clear: both;

 

moves boxes below any floated boxes

 

 

4)  Write the CSS and HTML that will achieve the following result:

· Creates a box 100px wide and 50px tall

· 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 dotted green;

            padding:5px;

}

 

 

<div id=”box”>text</div>

 


HTML/CSS Quiz 1

How much can you remember??  Answer as best you can in a word document

Save as: last-first_day1-quiz

 

1.  Write “CSS” or “HTML”, whichever applies best for each that follows:

a)  <  >

b)  #

c)  .

d)  {   }

 

2. T or F- “Formatting on a web page should be controlled by the CSS”

 

3.  Fill in the blank

 __ should be created in the HTML


 

4a.  List all that is wrong with the following:

#wrapper {

width: 400px

height: 400px;

 

 

#boxr { etc.

 

4b.  List all that is wrong with the following:

<div id=boxr>red box

<div id=boxw>white box

 

5.  What CSS property allows you to align boxes across the page horizontally?


HTML/CSS Quiz 4

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)  {  }

b)  < >

c)  body {

d)  <body>

 

2. T or F- “Content on a web page should be controlled by the CSS”

 

3.  Fill in the blank

 Use ______ to make boxes “pile” horizontally across the page


 

4.  List all that is wrong with the following:

#boxb {

            width: 100px;

            heigt: 100px

            border: 1px solid black;

            float: left;

            clear: both;

 

 

#footer:

            with: 100px;

            height: 100px

            border: 1px solid black;

            clear: both;

}

 

5.  What CSS property allows you to move divs below floated boxes?

 

 


HTML/CSS Quiz 3

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=”

b)  .text-emphasis

c)  body {

d)  <body>

 

2. T or F- “Always float and clear the same box”

 

3.  Fill in the blanks

 Use ___________ and ___________ to center a box on the page

 

4.  List all that is wrong with the following:

a. <div id=box-r>red box<div/>

 

b. <div id="inner-wrapper">

                                    <div #="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?

 

 

 


HTML/CSS Quiz 2

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)  {  }

b)  < >

c)  body {

d)  <body>

 

2. T or F- “Content on a web page should be controlled by the CSS”

 

3.  Fill in the blank

 Use ______ to make boxes “pile” horizontally across the page


 

4.  List all that is wrong with the following:

#boxb {

            width: 100px;

            heigt: 100px

            border: 1px solid black;

            float: left;

            clear: both;

 

 

#footer:

            with: 100px;

            height: 100px

            border: 1px solid black;

            clear: both;

}

 

5.  What CSS property allows you to move divs below floated boxes?