CSS / HTML

Study the following HTML page:

<!DOCTYPE html>
<html>
<head>
<style type=”text/css”>
.one { width: 300px; border: 10px solid red; }
#top { width: 500px; border: 10px solid blue; }
</style>
</head>
<body>
<div id=”top”>
<!– The size of x.png is 200×10 px –>
<span class=”one”><img src=”x.png” width=”200″ height=”10″ /></span>
<div class=”one”><img src=”x.png” width=”200″ height=”10″ /></div>
</div>
</body>
</html>

 

1. Based on the CSS2 box model, what is the box width of the span tag?

a. 180px b. 190px c. 200px d. 210px e. 220px

f. 280px g. 290px h. 300px i. 310px j. 320px k. Something else

 

2. And what is the box width of the div containing the image?

a. 180px b. 190px c. 200px d. 210px e. 220px

f. 280px g. 290px h. 300px i. 310px j. 320px k. Something else

If the CSS was changed to:

<style type=”text/css”>
.one { width: 300px; border: 10px solid red; float: left; }
#top { width: 500px; border: 10px solid blue; float: left; }
</style>

 

3. What would the box width of the span tag be?

a. 180px b. 190px c. 200px d. 210px e. 220px

f. 280px g. 290px h. 300px i. 310px j. 320px k. Something else

 

4. What would the box width of the div tag be?

a. 180px b. 190px c. 200px d. 210px e. 220px

f. 280px g. 290px h. 300px i. 310px j. 320px k. Something else

Below is a style sheet and an HTML fragment. Please study the CSS and the mark-up then answer the questions at the bottom of the page.

div { width: 20em; height: 20em; background-color: blue; font-size: large;}
#red div { background-color: orange; }
#red { background-color: gray; }
div div { background-color: pink; width: 50%; }
#red div .blue { background-color: green; }
.blue { background-color: black; }
.blue #red { background-color: purple; width: 200%; }

<body>
<div id=”red”>
<div class=”blue”>
5-6
</div>
</div>
</body>

 

5. What will be the background colour of div containing “5-6″?

a. blue b. orange c. gray d. pink

e. green f. black g. purple h. Something else

 

6. What is the width of this div in ems?

a. 0 b. 0.5em c. 5em d. 10em

e. 20em f. 40em g. 50em h. Depends on the font used by the browser

The same stylesheet is used for another HTML document:


<body>
<div id=”red”>
<div>
<div class=”blue”>
7-8
</div>
</div>
</div>
</body>

 

7. What will be the background colour of div containing “7-8″?

a. blue b. orange c. gray d. pink

e. green f. black g. purple h. Something else

 

8. What is the width of this div in ems?

a. 0 b. 0.5em c. 5em d. 10em

e. 20em f. 40em g. 50em h. Depends on the font used by the browser

Again, the same style sheet is used with another HTML page:

div { width: 20em; height: 20em; background-color: blue; font-size: large;}
#red div { background-color: orange; }
#red { background-color: gray; }
div div { background-color: pink; width: 50%; }
#red div .blue { background-color: green; }
.blue { background-color: black; }
.blue #red { background-color: purple; width: 200%; }

<body>
<div>
<div class=”blue”>
<div id=”red”>
9-10
</div>
</div>
</div>
</body>

 

9. What will be the background colour of div containing “9-10”?

a. blue b. orange c. gray d. pink

e. green f. black g. purple h. Something else

 

10. What is the width of this div in ems?

a. 0 b. 0.5em c. 5em d. 10em

e. 20em f. 40em g. 50em h. Depends on the font used by the browser