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

b)  < > - HTML

c)  body { - CSS

d)  <body> - HTML

 

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

F à HTML

3.  Fill in the blank

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

 

4.  List all that is wrong with the following:

#boxb {

            width: 100px;

            heigt: 100px à Misspelled, needs “;” after “px

            border: 1px solid black;

            float: left;

            clear: both;  No float w/ clear

- needs close (})

 

 

#footer: {

            with: 100px; à misspelled

            height: 100px à needs “;”

            border: 1px solid black;

            clear: both;

}

 

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

-clear

 

-

-

-

-

-

-

 

 

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”

FALSE- NEVER do that.

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 Quiz #5

 

 

1)  Describe the difference between the effects of padding and margin in CSS

Padding  - adds space inside of box.. makes box bigger, but text has margins

 

Margin – ensures clear space around box

 

 

 

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

 

 

--In class--

 

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

            clear: both;

move boxes under floats

 

 

 

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

 

 

 

 

 

<html>

<body>

body{

#text{

width: 90px;

height: 40px;

border: 1px solid black;

padding: 5px;

}

}

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

</body>

</html>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Painless Quiz #6

Same ol' drill

 

                           I.      Files to copy

                                             I.      copy #6

                                           II.      paste into painless quiz doc

 Web1-site

               I.      See files to copy for web1-site folder

             II.      Copy/paste locally

Goals:

  • Get familiar with structure
  • Personalize all titles
  • Personalize self description
  • Make sure to add <p> tags!
  • Add your schedule
  • Research and add favorite links??

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

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

b)  .text-emphasis CSS

c)  body { CSS

d)  <body> HTML

 

2. T or F- “Always float and clear the same box F – NEVER do that.

 

3.  Fill in the blanks

 Use margin-left: auto; and margin-right: auto; to center a box on the page

 

4.  List all that is wrong with the following:

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

id = “box-r”

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

                                    <div #="box-w”>white blox</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?

Float