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.
20. Which of
the following styles is not valid for an image?
Answers:
• img {
float= left }
• img {
float: left here }
• img {
background: «black» }
• img {
border-width: 10 }
• All of the above
21. Suppose
that a <tr> tag has 10 <td> tags. In this case which statement is
correct given the following?
td:nth-child(3n+0){
background-color:
orange;
}
Answers:
• It returns
a syntax error.
• The
background color of the fourth td will be orange.
• The background
color of the third td will be orange.
• The background color of every third td will be orange.
22. What is
the best method to select all elements except for the last one in an unordered
list?
Answers:
• Adding a
class to each <li> element but last
• Using li:not(:last-child) css selector
• Using
li:last-child selector
• None of
the above
23. Which of
the following will decrease 50px from a DIV element whose width is 100%?
Answers:
• width: calc(100% — 50px);
• width:
reduce(100% — 50px);
• width:
decrease(100% — 50px);
• width:
100% — 50px;
24. Which of
the following properties specifies the minimum number of lines of a paragraph
that must be left at the bottom of a page?
Answers:
• orphans
• widows
• bottom
• overflow
• None of
these
25. What is
the maximum value that can be given to the voice-volume property?
Answers:
• 10
• 100
• 500
• None of
the above
26. What is
the default value of the animation-direction property?
Answers:
• none
• normal
• alternate
• inherited
27. Is it
possible to combine a background image and CSS3 gradients?
Answers:
• It is
possible only when two separate styles are used, «background-image» and
«gradient», on an HTML tag.
• It is possible only when «background-image» is used.
• It is possible
only when layered HTML tags are used, «background-image» and «gradient».
• It is not
possible to combine a background image and CSS3 gradients.
28. What
will happen if the pause property is used as follows?
h2 { pause:
40s 60s }
Answers:
• pause-before will be set to 40 seconds and pause-after will
be set to 60 seconds.
•
pause-after will be set to 40 seconds and pause-before will be set to 60
seconds.
•
pause-after and pause-before will be set to 40 seconds.
•
pause-after and pause-before will be set to 60 seconds.
29. Which of
the following properties allow percentages in their value fields?
Answers:
• font-size
•
font-variant
•
font-weight
•
line-height
30. Which of
the following is not a valid value for the font-stretch property?
Answers:
• condensed
• normal
• semi-narrower
• expanded
•
semi-expanded
31. What is
the initial value of the font-size property?
Answers:
• small
• medium
• large
• default
32. Is there
a way to create a pure CSS3 text color gradient?
Answers:
• Yes, using
the text-gradient property.
• Yes, but
only for headings.
• There is
no way to do a text color gradient with CSS3.
• None of the above.
33. Consider
the following code:
border-opacity:0.7;
Given a div
element that needs to have a transparent red border, which of the following
code samples will work in conjunction with the code above to accomplish the
requirement?
Answers:
• border: 1px solid rgba(255, 0, 0, 0.7);
• border:
1px solid rgb(255, 0, 0, 0.7);
• border:
1px solid rgba(255, 255, 0, 0.7);
• border:
1px solid red; opacity: 0.7;
34. For the
clear property, which of the following value is not valid?
Answers:
• none
• left
• right
• top
35. Read the
following:
@page
rotated {size: landscape}
TABLE {page:
rotated; page-break-before: right}
What will
this code do?
Answers:
• It will put all tables on a right-hand side landscape page.
• It will
rotate the page if the table is positioned at the right side.
• It will
keep the table in the landscape position and rotate the page.
• None of
the above
36. What is
the initial value of the animation-iteration-count property?
Answers:
• 1
• 5
• None
37. What
will happen if the cursor property value is set to none?
Answers:
• The
default cursor will be displayed.
• No cursor
will be displayed.
• A pointer cursor will be displayed.
• A text
cursor will be displayed.
38. What
will be the outcome of given code?
div[class^=»stronger»]
{ }
{
…
}
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.
39. To apply
style on every input element except text, which of the following selectors
should be used?
Answers:
•
input:([!type=’text’])
• input:not([type=»text»])
•
input:not([type!=»text»])
•
input:([type!=’text’])
40. Is it
possible to use transition animations with a gradient background?
Answers:
• Yes
• No
No comments:
Post a Comment