Scribd
Upload
144 views3 pages

According To The Book ? 1. Positioning 2. Box Model 3. Floats

This document contains a quiz on web design concepts. It asks 10 multiple choice and free response questions about key CSS concepts like the box model, floats and positioning; common causes of CSS bugs like cross-browser inconsistencies; specificity and using classes versus ids; fixing margin collapse issues; steps for debugging like validating code and creating minimal test cases; and differences in layout engines between browsers like IE and Firefox.

Uploaded by

jonkyjonkerson
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
144 views3 pages

According To The Book ? 1. Positioning 2. Box Model 3. Floats

This document contains a quiz on web design concepts. It asks 10 multiple choice and free response questions about key CSS concepts like the box model, floats and positioning; common causes of CSS bugs like cross-browser inconsistencies; specificity and using classes versus ids; fixing margin collapse issues; steps for debugging like validating code and creating minimal test cases; and differences in layout engines between browsers like IE and Firefox.

Uploaded by

jonkyjonkerson
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 3

MM2213 (Intermediate Web Design) Quiz Week 7

Winter 2011

Name:

1. According to the book CSS Mastery: Advanced Web Standards Solutions, Second Edition
by Andy Budd, what three most important concepts are key to understanding CSS ?

1. positioning

2. box model

3. floats

2. The most common cause of CSS bugs in a website design are ___________:

a. coding errors To fix you use a validator and it will tell you if you have a syntax error.
b. browser rendering errors
c. different Internet Explorer versions
d inconsistencies between browsers

3. What color is the first paragraph in the div whose class is "content"?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Example website</title>

<style>
.content p {
background-color: white;
}

.intro {
background-color: orange;
}
</style>

</head>

<body>
<div class="content">
<p class="intro">This is the first paragraph</p>
<p>This is the second paragraph</p>
<p>This is the third paragraph</p>
<p>This is the fourth paragraph</p>
<p>This is the fifth paragraph</p>
</div>
</body>
</html>

WHITE – because of specificity.


1000pts – Inline // 100 – Id // 10 – Class // 1 – Selector
To fix you need to make .intro more specific. Right now .content p has value of 11 and
.intro has value of 10
MM2213 (Intermediate Web Design) Quiz Week 7
Winter 2011

4.Explain how you would fix the following margin-collapse problem given the following
HTML/CSS markup:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-
8" />
<title>Example website</title>

<style>
#box {
margin: 10px;
background-color:#d5d5d5;
}
p {
margin: 20px;
background-color:#6699FF;
}
</style>

</head>

<body>
<div id="box">
<p>This paragraph has a 20px margin.</p>
</div>
</body>
</html>

Add a small amount of padding or a thin border the same color as the object.

5. What is the first step in hunting down HTML and CSS bugs?

Validate your code


MM2213 (Intermediate Web Design) Quiz Week 7
Winter 2011

6. It is best to develop your code in one specific browser until the work is complete then
test your pages on less-capable browsers and devise workarounds for any display
problems you find.
 True
 False
False, its better to do as you go along. Because it could be hard to track down later something you
set up early on in the project.

7. A lot of rendering bugs are caused by overly complicated HTML or CSS.


 True
 False

8. In order to isolate a rendering problem, you applied borders to the relevant elements
to see how they interact. To your surprise, the browser problem disappeared after you
did this. What is the most likely reason why your page now renders correctly?

Margin collapse

Same as previous question (4)

9. By creating a minimal test case, you help cut out some of the variables and make the
problem as simple as possible.
 True
 False

10. What is layout? How is it different in IE versus a browser like Firefox?

hasLayout

http://www.satzansatz.de/cssd/onhavinglayout

You might also like