1. Consider
the following code snippet:
<div
id=»sectors»>
<div
id=»A» class=»A»></div>
<div
id=»B» class=»B»></div>
<div
id=»C» class=»C»></div>
<div
id=»D» class=»D»></div>
<div
id=»E» class=»E»></div>
</div>
With these
style rules:
<style>
#sectors
> div {
float: left;
position:
relative;
width: 80px;
height:
80px;
margin:
16px;
background-color:red;
color: white;
text-align:
center;
}
#sectors
> div::after {
content:
attr(id) ‘-Block’;
}
#sectors
> div.changecolor {
background-color:
blue;
}
</style>
Which of the
following code snippets when inserted into CSS will change the A and B div’s
color from red to blue?
Answers:
• In style rule add this code “#sectors >
div:not(.C):not(.D):not(.E) {background-color: blue;}”
• In style
rule add this code “#sectors > div:not(.C, .D, .E) {background-color:
blue;}”
• Both A and
B
• None of
the above
2. Which of
the following will create a triangle effect using pure CSS3 on a white
background, without making use of background images?
Answers:
• It is not
possible to do so.
• border-color: #a0c7ff #ffffff #ffffff #ffffff;
border-style: solid; border-width: 20px; width: 0px; height: 0px;
•
background-color: #a0c7ff #ffffff #ffffff #ffffff; border-style: solid;
border-width: 20px; width: 0px; height: 0px;
•
background-color: #a0c7ff #ffffff #ffffff #ffffff; border-style: solid;
border-width: 1px; width: 10px; height: 10px;
3. Consider
the following font definition:
font-weight:normal
What is the
other way of getting the same result?
Answers:
•
font-weight:100
•
font-weight:900
• font-weight:400
•
font-weight:700
4. Can a
percentage value be given in a ruby-align property?
Answers:
• Yes
• No
5. Which of
the following is not a valid page break?
Answers:
•
page-break-inside
• page-break-outside
•
page-break-before
•
page-break-after
• None of
these
6. Which
statement is correct given the following?
box-shadow:30px
20px 10px 5px black;
Answers:
• The shadow
will be spread out to 30px top, 20px right, 10px bottom, 5px left.
• The position of the horizontal black shadow is 30px and the
position of the vertical black shadow is 20px and blur distance is 10px and
size of shadow is 5px.
• The
position of the vertical black shadow is 30px and the position of the
horizontal black shadow is 20px and size of shadow is 10px and blur distance is
5px.
• The shadow
will be spread out to 30px top and bottom, 20px left and right with 10px blur
distance, 5px shadow size.
7. Consider
the following code:
div[class^=»stronger»]
{ }
{em
…
}
Which of the
following statements is true?
Answers:
• It applies the rule only on divs who belong to a class that
begins with «stronger».
• It applies
the rule only on divs of class «stronger».
• It applies
the rule only on divs who belong to a class which end with «stronger».
• It applies
the rule only on divs who belong to a class which does not contain «stronger»
in its name.
8. For the
clear property, which of the following values is not valid?
Answers:
• none
• left
• right
• top
9. The
min-width property cannot be applied to the following element:
Answers:
• button
• span
• table row
10. Given
the following problem:
A drop
shadow needs to appear only at the bottom, and no images should be used.
Consider the
following code:
-moz-box-shadow:
0px 4px 4px #000;
-webkit-box-shadow:
0px 4px 4px #000;
box-shadow-bottom:
5px #000;
However,
this produces shadows on the rest of the element.
Which of the
following code snippets will correct the issue?
Answers:
•
border-bottom:5px solid #ffffff; -webkit-box-shadow: 0px 5px #000000;
-moz-box-shadow: 0px 5px #000000; box-shadow: 0px 5px #000000;
• -webkit-box-shadow: 0 4px 4px -2px #000000; -moz-box-shadow:
0 4px 4px -2px #000000; box-shadow: 0 4px 4px -2px #000000;
•
-webkit-box-shadow: 0 4px 4px -2px inside #000000; -moz-box-shadow: 0 4px 4px
-2px inside #000000; box-shadow: 0 4px 4px -2px inside #000000;
• None of
these.
11. What will be the output of the following
code?
<style>
.foo {
width:100px;
height:50px;
border-width:3px;
-webkit-border-image:
-webkit-gradient(linear,
0 0, 0 100%, from(black), to(red)) 1 100%;
-webkit-border-image:
-webkit-linear-gradient(black,
red) 1 100%;
-o-border-image:
-o-linear-gradient(black,
red)) 1 100%;
-moz-border-image:
-moz-linear-gradient(black,
red) 1 100%;
}
</style>
<div
class=»foo»>Lorem</div>
Answers:
• The text
«Lorem» will be colored black-red.
• The div
element will be colored black-red.
• The border of div element will be colored black-red.
• None of
these.
12. Which of
the following is not a valid value for the font-smooth property?
Answers:
• auto
• never
• always
• normal
• length
13. Which of
the following option does not exist in media groups available in CSS3?
Answers:
• continuous
or paged
• visual or
tactile
• grid or
bitmap
• braille or screen
14. Consider
the following code:
body {
text-replace: «a» «b» «b» «c» }
What will be
the output of the following string if the text-replace style is implemented?
andy lives
behind cafe
Answers:
• ndy lives
behind cbfe
• cndy lives cehind ccfe
• andy lives
behind cafe
• andy lives
cehind bafe
15. What is
the default value of the transform-style property?
Answers:
•
preserve-3d
• flat
• none
• preserve
16. Which of
the following will apply a black inner glow with 25% opacity to a page element?
Answers:
•
box-shadow: 0 0 8px rgba(255,255,255, 0.25);
• box-shadow: inset 0 0 8px rgba(0,0,0, 0.25);
•
box-shadow: 0 0 8px rgba(255,255,255, 25%);
•
box-shadow: inset 0 0 8px rgba(0,0,0, 25%);
17. Which of
the following is the initial value for the column-fill property?
Answers:
• auto
• balance
• none
18. Which of
the following can be used to add a shadow around the div element below?
<div>Lorem
ipsum</div>
Answers:
• box-shadow: 0 0 8px 2px #888;
•
border-shadow: 0 0 8px 2px #888;
•
div-shadow: 8px 2px 0 0 #888;
• None of
these
19. What
will be the output of the following code?
…
<style>
.foo {
width:100px;
height:50px;
border-width:3px;
-webkit-border-image:
-webkit-gradient(linear,
0 0, 0 100%, from(black), to(red)) 1 100%;
-webkit-border-image:
-webkit-linear-gradient(black,
red) 1 100%;
-o-border-image:
-o-linear-gradient(black,
red)) 1 100%;
-moz-border-image:
-moz-linear-gradient(black,
red) 1 100%;
}
</style>
…
<div
class=»foo»>Lorem</div>
Answers:
• The text
«Lorem» will be colored black-red.
• The div
element will be colored black-red.
• The border of div element will be colored black-red.
• None of
these.
