QuizCSS(a)
advertisement
QUIZ CSS
NAME: ___________________________________ ID: ____________
PART I (17 X 1 mark= 17 marks)
1. ________ are declared in each individual XHTML element using the style attribute.
a) Cascading style sheets
b) Inline styles
c) External styles
d) User style sheets
2. The proper format for an inline style is:
a) <p style = “font-size = 20pt”>
b) <p font-style = “20pt”>
c) <p style = “font-size = 20pt”>
d) <p style = “font-size: 20pt”>
3. In the body of a style sheet, CSS rule properties are followed by a ________.
a) dot
b) CSS operator
c) colon
d) semicolon
4. Multiple CSS rule properties in style sheets are separated by a ________.
a) dot
b) CSS operator
c) colon
d) semicolon
5. Which of the following selections is the proper way to apply this CSS rule:
.blue { color: blue }
a) <p color = "blue">
b) <p class = "blue">
c) <p color = .blue>
d) <p class = .blue>
6. How will the following CSS rule alter the Web page if it is applied in a style sheet?
h1 { font-family: Arial, sans-serif }
a) All text in h1 elements will have the Arial font, while text in other elements will use a sans-serif
font.
b) All text in h1 elements will have use a sans-serif font, while text in other elements will use Arial.
c) All text in h1 elements will have the Arial font if sans-serif is not supported by the system.
d) All text in h1 elements will use a sans-serif font if Arial is not supported by the system.
7. The hover pseudo-class gives the author access to text styling under which situation?
a) When the mouse is over an element
b) When the mouse moves off of an element
c) When the mouse is to the left of an element
d) None of the above
8. To which text does the following CSS rule apply:
li em { color: red;
font-weight: bold }
a) <li><em>text</em></li>
b) <li>text</li> and <em>text</em>
c) both a and b
d) neither a nor b
9. To which text does the following CSS rule apply:
li, em { color: red;
font-weight: bold }
a) <li><em>text</em></li>
b) <li>text</li>
c) <em>text</em>
d) all of the above
10. External style sheets are saved with the ________ extension.
a) .html
b) .txt
c) .css
d) .txtcss
11. Which of the following settings for a background image can be modified to create a "watermark"
effect where scrolling will not move the image from its set position.
a) background-image
b) background-position
c) background-repeat
d) background-attachment
12. Which is not a valid value for the background-position property?
a) left
b) ontop
c) right
d) center
13. When using the width, height and overflow properties of an element, position can be ________.
a) absolute
b) relative
c) both a and b
d) none of the above
14. In order for elements to be floated, position must be ________.
a) absolute
b) relative
c) specified explicitly
d) shared
15. Which of the following is not a border property?
a) width
b) style
c) shape
d) color
16. The CSS specification gives precedence to ________.
a) author styles over user styles
b) user styles over author styles
c) neither author styles nor user styles
d) both author styles and user styles
17. What does the following CSS rule do?
.note { font-size: 1.5em }
a) It calls the method note for all objects with the argument of 1.5 pixels.
b) It multiplies all text object font sizes with the value 1.5.
c) It multiplies all text object font sizes within <style> tags by 1.5.
d) It multiplies all text object font sizes with class = "note" by 1.5.
PART II (3 X 2 marks= 6 marks)
Question 18 – 20 have 3 options only to consider.
18. Which one of the following codes changes the color of all elements containing attribute
class=”greenMove” to green and shifts them down 25 pixels and right 15 pixels.
a) <html><head>
<style type=“text/css”>
.greenMove{ color: green; position: relative; top: 25 px; left: 15 px;}
</style>
</head>
<body>
<h1> Normal text
<span class=“greenMove”>Text with class greenMove</span>
</h1>
</body></html>
b) <html><head>
<style type=“text/css”>
span.greenMove{ color: green; position: relative; top: 25 px; left: 15 px;}
</style>
</head>
<body>
<h1> Normal text
<span name=“greenMove”>Text with class greenMove</span>
</h1>
</body></html>
c) <html><head>
<style type=“text/css”>
h1.greenMove{ color: green; position: relative; top: 25 px; left: 15 px;}
</style>
</head>
<body>
<h1> Normal text
<h1 class=“greenMove”>Text with class greenMove</span>
</h1>
</body></html>
19. Which one of the following codes write a CSS rules that gives all h1 and h2 elements a padding of
0.5 ems, a grooved border style and margin of 0.5 em.
a) <html><head>
<style type=“text/css”>
h1,h2{ padding: 0.5em; border-style: groove; margin: 0.5em;}
</style>
</head>
<body>
<h1 class=“h1”> This is an H1 header </h1>
<h2 class=“h2”> This is an H2 header </h2>
</body></html>
b) <html><head>
<style type=“text/css”>
h1,h2{ padding: 0.5em; border-style: groove; margin: 0.5em;}
</style>
</head>
<body>
<h1> This is an H1 header </h1>
<h2> This is an H2 header </h2>
</body></html>
c) <html><head>
<style type=“text/css”>
h1,h2{ padding: 0.5em; border-style: groove; margin: 0.5em;}
</style>
</head>
<body>
<span> This is an H1 header </span>
<span> This is an H2 header </span>
</body></html>
20. Which one is the output of the following codes?
Note: This question tests how you resolve the CSS conflicts.
<html><body>
<style> P { text-decoration: underline } </style>
<style> .navtext { text-decoration: underline } </style>
<p class="navtext" STYLE= "text-decoration: line-through">Link 1</p>
<p class="navtext">Link 2</p>
<p class="navtext" STYLE= "font-weight: bold">Link 3</p>
</body></html>
a) Link 1
Link 2
Link 3
b) Link 1
Link 2
Link 3
c) Link 1
Link 2
Link 3
ANSWERS:
1
6
11
16
2
7
12
17
3
8
13
18
4
9
14
19
5
10
15
20
