154 Test Questions:

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
41. What is the difference between float:left; vs display:inline-block; ?
Answers:
• There is no difference, both of them have the same results.
• display:inline-block; adds whitespace between the elements.
• float:left; collapses the parent element on itself.
• None of these.
42. What is the initial value of the opacity property?
Answers:
•1
• normal
• none
43. State whether the following statement is true or false.
If a parent element display property is set to none, its children too will
not be rendered.
Answers:
• True
• False
44. Which of the following filters does SVG support?
Answers:
• SVG supports only CSS filters.
• SVG supports CSS filters as well as ‘filter’ property of SVG
• SVG supports only ‘filter’ property of SVG
• SVG does not supports any filters
45. What will happen if the following style declaration is applied to an
element?
p { margin: 3em 2em }
Answers:
• The top and the bottom margins will be 3em and the left and the right margins will be
2em.
• The top and the bottom margins will be 2em and the left and the right margins will be
3em.
• The top and the left margins will be 3em and the bottom and the right margins will be
2em.
• The top and the right margins will be 2em and the bottom and the left margins will be
3em.
46. Which of the following styles is valid?
Answers:
• order: «none»;
• order= «none»;
• order: none;
• order= none;
• None of these.
47. Consider the following problem:
When trying to apply a CSS3 style to a label of a checked radio button
like this:
….
<style>
label:checked { font-weight: bold; }
</style>
….
<input type=»radio» id=»rad» name=»radio»/>
<label for=»rad»>A Label</label>
48. This does not produce the desired effect.
Which of the following snippets will correct issue?
Answers:
• It is not possible to style.
• <input id=»rad» type=»radio» name=»rad»><label «rad»>A Label</label>
• input[type=»radio»]:checked+label{ font-weight: bold; }
• input[type=»radio»]:checked@label{ font-weight: bold; }
49. There are various types of input fields in a HTML page. Choose the
appropriate CSS3 code which will have an effect on all inputs, except
checkbox and radio.
Answers:
• form input:not([type=»radio»], [type=»checkbox»]) { }
• input:not([type=»radio»]):not([type=»checkbox»]) { }
• input:not([type=»radio & checkbox»]) { }
• input:!([type=»radio»]) , input:!([type=»checkbox»]) { }
50. Which one of the following is appropriate to mirror/flip text by using
CSS3?
Answers:
• .mirror_text{ -moz-transform: scaleX(-1); -o-transform: scaleX(-1); -webkit-transform:
scaleX(-1); transform: scaleX(-1); filter: FlipH; -ms-filter: «FlipH»; }
• .mirror_text{ Box-reflect; 20px right; }
• .mirror_text{ Box-reflect; 20px left; }
• .mirror_text{ -moz-transform: rotate(-180deg); -webkit-transform: rotate(-180deg);
transform: rotate(-180deg); }
51. What is the initial value of the marquee-speed property?
Answers:
• slow
• normal
• fast
• none
52. Which of the following will apply a gradient transition to
#DemoGradient using CSS3?
Answers:
• @-webkit-keyframes pulse #DemoGradient { 0% { background: -webkit-gradient(linear,
left top, left bottom, color-stop(0, rgb(196,222,242)), color-stop(0.5, rgb(242,242,242)),
color-stop(1, rgb(240,240,240))); } 50% { background: -webkit-gradient(linear, left top, left
bottom, color-stop(0, rgb(222,252,255)), color-stop(0.5, rgb(242,242,242)), color-stop(1,
rgb(240,240,240))); } 100% { background: -webkit-gradient(linear, left top, left bottom,
color-stop(0, rgb(196,222,242)), color-stop(0.5, rgb(242,242,242)), color-stop(1,
rgb(240,240,240))); } }
• #DemoGradient{ background: -webkit-linear-gradient(#C7D3DC,#5B798E);
background: -moz-linear-gradient(#C7D3DC,#5B798E); background: -o-linear-
gradient(#C7D3DC,#5B798E); background: linear-gradient(#C7D3DC,#5B798E); -webkit-
transition: background 1s ease-out; -moz-transition: background 1s ease-out; -o-transition:
background 1s ease-out; transition: background 1s ease-out; background-size:1px 200px;
border-radius: 10px; border: 1px solid #839DB0; cursor:pointer; width: 150px; height:
100px; } #DemoGradient:Hover{ background-position:100px; }
• It is not possible to apply a gradient transition using only CSS3.
Using height on transitions is not possible with:
Answers:
• height:auto
• height:100%
• height:0
• max-height:100%
53. What is the range of values (in decimal notation) that can be specified
in the RGB color model?
Answers:
• 0 to 256
• 0 to 255
• -250 to 250
• -255 to 255
54. Which of the following are not valid values for the target-new
property?
Answers:
• window
• tab
• none
• parent
• current
55. Which of the given options is/are equivalent to the following rule?
DIV { line-height: 1.2; font-size: 10pt }
Answers:
• DIV { line-height: 1.2em; font-size: 10pt }
• DIV { line-height: 12em; font-size: 10pt }
• DIV { line-height: 120%; font-size: 10pt }
• DIV { line-height: 20%; font-size: 10pt }
• DIV { line-height: 80%; font-size: 10pt }
56. What will be the output of the following rule?
em { color: rgba(0,0,255,1) }
Answers:
• Opacity 1 with solid red color
• Opacity 0 with solid blue color
• Opacity 0 with solid red color
• Opacity 1 with solid blue color
• None of these
57. Given that one div element needs to be hidden and on active state
needs to be displayed, what will be the output of the following code?
div {
display: none;
-webkit-transition: opacity 1s ease-out;
opacity: 0;
}
div.active {
opacity: 1;
display: block;
}
Answers:
• On active state the element is displayed.
• On active state the element’s opacity is changed to 1.
• On active state the element’s opacity is changed to 0.
• Nothing will be shown.
58. While rendering the following code, what is the role of «src»
propery?
@font-face {
font-family: «calibriforh1»;
src: local(«calibri»), url(calibri.woff);
}
h1 { font-family: «calibriforh1», arial, sans-serif; }
Answers:
• It’s for searching the user’s system for a «calibri» font, and if it does not exist, it will load
the font from the server instead.
• It’s for searching the user’s system for a «calibri» font, and if it does not exist, it will load
user’s system’s default font instead.
• It’s for loading the user’s system’s default font.
• None of these.
59. Which of the following statements is true with regard to CSS3
transitions?
Answers:
• Using CSS transitions will slow down page upload and produce lag.
• The completion of a CSS transition generates a corresponding DOM event. An event is
fired for each property that undergoes a transition. This allows a content developer to
perform actions that synchronize with the completion of a transition.
• CSS transitions allow DOM events in CSS values to occur smoothly over a specified
duration.
• None of these.
60. Problem to solve:
Need to use attribute selector in css to change link on different color and
image.
The following code is not working correctly:
…
<style>
a{
display: block;
height: 25px;
padding-left: 25px;
color:#333;
font: bold 15px Tahoma;
text-decoration: none;
}
a[href=’.pdf’] { background: red; }
</style>
…..
<a href=»/manual.pdf»>A PDF File</a>
Which of the following code snippets will correct issue?
Answers:
• a[href$=’.pdf’] { /*css*/ }
• a[href#=’.pdf’] { /*css*/ }
• a[href@=’.pdf’] { /*css*/ }
• a{href$=’.pdf’} [/*css*/ ]
61. Suppose there are 16 <div> elements and a style needs to applied only
on every 4th element. Which of the following is correct?
Answers:
• div:nth-child(4), div:nth-child(8), div:nth-child(12), div:nth-child(16) { }
• div:nth-child(4n) { }
• div:nth-child(4n+4) { }
• div:nth-child(3n+4)
62. What is true about the background-clip property?
Answers:
• The background-clip property specifies the painting area of the background.
• The background-clip property is not supported in Internet Explorer 8 and earlier
versions.
• The background-clip property is supported in Internet Explorer 9+, Firefox, Opera,
Chrome, and Safari.
• All are correct.
63. To make childdiv vertically center of given code, what should the
«display» property of parentdiv and childdiv be?
#parentdiv
{
width: 200px;
height: 400px;
vertical-align: middle;
}
#childdiv
{
width: 100px;
height: 50px;
}
<div id=»parentdiv»>
<div id=»childdiv»>Vertical Center</div>
</div>
Answers:
• display:table-cell; for parentdiv and display:inline-block; for childdiv
• display:block; for parentdiv and display:inline-block; for childdiv
• display:inline-block; for parentdiv and display:table-cell; for childdiv
• display:inline-block; for parentdiv and display:inline-block; for childdiv
64. 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
65. Is it possible to format numbers with CSS?
Answers:
• No, CSS cannot be used for that purpose.
• Yes, it can be done using the number-format property.
• Yes, it can be done using the decimal property.
• None of these.
66. The sans-serif generic font-family is characterized by:
Answers:
• Finish strokes, flared or tapering ends, or actual serifed endings.
• Stroke endings that are plain without any flaring, cross stroke, or other ornamentation.
• Either join strokes or other cursive characteristics beyond those of italic typefaces.
• Primarily decorate the characters while still containing their representations.
67. Which of the following is the best implementation of a continuously
rotating animated image in CSS3?
Answers:
• @-webkit-keyframes rotate {
from {
-webkit-transform: rotate(180deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#rotating img
{
-webkit-animation-name: rotate;
-webkit-animation-duration: 0.5s;
-webkit-animation-iteration-count: infinite;
-webkit-transition-timing-function: linear;
}
• @-webkit-keyframes rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#rotating img
{
-webkit-animation-name: rotate;
-webkit-animation-duration: 0.5s;
-webkit-animation-iteration-count: infinite;
animation-timing-function: linear;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
}
• @-webkit-keyframes rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#rotating img
{
transition-timing-function: linear;
-webkit-transition-timing-function: linear;
-moz-transition-timing-function: linear;
}
68. Which of the following is the best way to center a div element?
Answers:
• Apply ‘float:none’ to the element you want to center.
• Apply ‘margin:0 auto’ to the element you want to center.
• Apply ‘text-align:center’ to the element you want to center.
• None of these.
69. Which of the following statements is true about z-index in CSS3?
Answers:
• Z-index only affects text elements.
• Z-index only used for pseudo-class elements.
• Z-index only affects positioned elements.
• Z-index only affects absolute positioned elements.
70. What will the following code produce?
@font-face {
font-family: «DejaVu Sans»;
src: url(«fonts/DejaVuSans.ttf»);
}
@font-face {
font-family: «DejaVu Sans»;
src: url(«fonts/DejaVuSans-Bold.ttf»);
font-weight: bold;
}
@font-face {
font-family: «DejaVu Sans»;
src: url(«fonts/DejaVuSans-Oblique.ttf»);
font-style: italic, oblique;
}
@font-face {
font-family: «DejaVu Sans»;
src: url(«fonts/DejaVuSans-BoldOblique.ttf»);
font-weight: bold;
font-style: italic, oblique;
}
Answers:
• Font style is set to italic, oblique.
• Font-weight is set to bold;
• Font-family is set to DejaVu Sans
• Multiple @font-face rules added.
71. Which of the following will add a border to a div element, without
adding to its size in pixels?
Answers:
• div{
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
width:100px;
height:100px;
border:20px solid red;
background:green;
margin:10px;
}
div + div{
border:10px solid red;
}
• div{
width:100px;
height:100px;
border:20px solid red;
background:green;
margin:-10px;
}
div + div{
border:10px solid red;
}
• div{
width:100px;
height:100px;
border:20px solid red;
background:green;
padding:-10px;
}
div + div{
border:10px solid red;
}
• None of these.
72. Which of the following is correct about the difference between «rem»
and «px» for font sizes?
Note: There may be more than one right answer.
Answers:
• «rem» is equal to «px».
• «rem» depends on the body’s font size.
• «rem» is independent from the body’s font size.
• «px» is the size of a pixel on a 96 DPI display, while «rem» is the size of a pixel at 72 DPI.
73. What is the default value of the transitions property?
Answers:
• all 0 ease 0
• all 0
• none
•0
74. CSS3’s border-radius property and border-collapse:collapse do not
mix. How can border-radius be used to create a collapsed table with
rounded corners?
Note: There may be more than one right answer.
Answers:
• By using border-collapse: collapse
• By using border-collapse: separate
• By removing border-collapse:
• None of above .
75. What is true about Not Equal(!=) selector in CSS3 ?
Answers:
• It’s cross-browser.
• It’s not cross-browser.
• It will work only for class selector.
• It’s not possible in css3.
76. Which of the following requirements must be met in order to add
noise to the background using CSS3?
Answers:
• A background image is needed.
• A background color is needed.
• Both a background image and a background color are needed.
• It not possible to add noise to a background using CSS3.
77. What should be the output of following code?
input[type=»radio»]:checked + label
{
background-color:#000;
}
Answers:
• Black background color apply on Radio button and label only if it is checked
• Black background color apply on Radio button and label
• Black background color apply on label only
• Black background color apply on checked label only
78. Consider the following HTML/CSS3 code:
HTML:
<div id=»nav»><a href=»#»>Test</a></div>
CSS:
#nav a {
background-color: #FF0;
}
#nav a:hover {
background-color: #AD310B;
-webkit-transition: background-color 1000ms linear;
-moz-transition: background-color 1000ms linear;
-o-transition: background-color 1000ms linear;
-ms-transition: background-color 1000ms linear;
transition: background-color 1000ms linear;
}
What will happen when the link is hovered?
Answers:
• The link background will fade out.
• The link color will change to #AD310B.
• The link background will fade in and change his color to #AD310B.
• None of the above.
79. Why is it not possible to unite webkit-border-radius and -moz-
border-radius?
Answers:
• -webkit- and -moz- are vendor-specific prefixes and are not standard CSS3 properties.
• -webkit- and -moz- are standard CSS3 properties and are vendor-specific.
• -webkit- and -moz- are not standard CSS3 properties and not vendor-specific.
• None of these.
80. Which of the following code is appropriate to flip any background
image?
Answers:
• div{
-webkit-transform: rotate(-180deg);
-moz-transform: rotate(-180deg);
}
• div{
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
}
• div:before {
content:» «;
float:left;
background:url(../../image.png) no-repeat 0 0;
display:block;
}
• div {
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: «FlipH»;
width: 32px;
height: 32px;
background:
url(http://www.gravatar.com/avatar/5cce99e9bf6154703d8ecdf474a750bd?s=32&d=identic
on&r=PG) no-repeat;
}
81. Which of these values are not valid for display property?
Answers:
• inline-list-item
• inline-block
• inline-flex
• inline-table
82. Pseudo-classes can be used to
Answers:
• Style an element when a user mouses over it
• Style visited and unvisited links differently
• Style an element when it gets focus
• All
83. Which of the following are the newly introduced background
properties in CSS3?
Answers:
• background-origin
• background-clip
• background-size
• All of the above
84. What is right way to set opacity of color to 50%?
Answers:
• color: rgb(0, 191, 255) 0.5;
• color: rgb(0, 191, 255) 50;
• color: rgba(0, 191, 255, 0.5);
• color: rgba(0, 191, 255, 50);
85. Is this statement right?
“Pixel is a static measurement, while percent and EM are relative
measurements.”
Answers:
• Yes
• No
86. Which pair of CSS transforms results in same output?
Answers:
• transform: scale(2, .5); and transform: scaleX(2);, transform: scaleY(.5);
• transform: rotate(20deg); and transform: rotateX(20deg);
• transform: skew(20deg); transform: skewY(20deg);
• transform: translate(20px, 50px); and transform: translateX(50px);, transform:
translateY(20px);
87. What color would have text “Hello, Freelancer!”?
<style type=»“text/css”»>
#notification p { color: yellow; }
p.important { color: red; }
</style>
<div id=»notification»>
<p class=»important»>Hello, Frelancer!</p>
</div>
Answers:
• Yellow
• Red
88. What is the size of matrix used in 3D transformation?
Answers:
•3x3
•4x4
•3x2
•2x3
89. Which of these statements are true?
Note: There may be more than one right answer.
Answers:
• Padding is the space between content and the border of element.
• Padding is the space between content and the other element.
• Margin is the space outside of border.
• Margin is the space inside of element.
90. Which of the following selector matches a particular element only
when it lies inside a particular element?
Answers:
• The Type Selector
• The Universal Selector
• The Descendant Selector
• The Class Selector
91. Which of these color definition is wrong?
Answers:
• color: rgb(0, 191, 255);
• color: #00bfff;
• color: DeepSkyBlue;
• color: hsl(195, 100%, 50%);
• None of these
92. Which of these selectors has the largest “weight”?
Answers:
• .your div.awesome
• .your div#awesome
• #your div.awesome
• #your div#awesome
93. Which of these properties is not exists in CSS3?
Answers:
• translate
• rotate
• scale
• matrix
• All of these properties are exists
94. Which of the following are valid media features supported in media
query? Check all that apply.
Note: There may be more than one right answer.
Answers:
• Max-width
• Aspect-ratio
• Background-color
• Orientation
• Color
95. Which of the following css will divide the text in the div element into
3 columns?
Answers:
• div {-webkit-column-count: 3; }
• div {-moz-column-count: 3; }
• div {column-count: 3; }
• All of the above
96. What does the following css code indicate?
columns: 2 auto;
Answers:
• column-width: auto;
• column-count: 2
• Both 1 and 2
• None
97. Which of these values are not valid for position property?
Answers:
• absolute
• fixed
• relative
• static
• All of these values are valid
98. How to select which placed immediately after
Answers:
• div > p
• div + p
• div ~ p
• p:after(div)
99. Which of the following is NOT a valid pseudo-class?
Answers:
• :active
• :hover
• :text
• :out-of-range
100. Which of the following statement is right?
Answers:
• Opacity sets the opacity value for an element and all of its children.
• RGBA sets the opacity value only for a single declaration.
• Both 1 and 2
• None of the above
101. Which of the following CSS works for “the gradient to start at the
bottom left corner and go to the top right corner”
Answers:
• .gradient {
background-image:
linear-gradient(
to bottom right,
red, #f06d06
);
}
• .gradient {
background-image:
linear-gradient(
to top left,
red, #f06d06
);
}
• .gradient {
background-image:
linear-gradient(
to right,
red, #f06d06
);
}
• .gradient {
background-image:
linear-gradient(
to top right,
red, #f06d06
);
}
102. How many types of gradients are defined in CSS3?
Answers:
•2
•3
•1
•4
103. Which of the following are transition related properties in CSS3?
Check all that apply.
Note: There may be more than one right answer.
Answers:
• transition
• transition-delay
• transition-duration
• transition-timing-function
• transition-property
104. Which of these selectors are right for this paragraph?
<p class=»“styled-red”»>Hello!</p>
Answers:
• p[class*=“styled”]
• p[class^=“styled”]
• p[class&=“styled”]
• p[class#=“styled”]
105. What is right way to transform text to uppercase?
Answers:
• text-transform: capitalize;
• text-transform: upcase;
• text-transform: uppercase;
106. How is possible to simplify this styles?
font-family: Georgia;
line-height: 1.4;
font-weight: normal;
font-stretch: normal;
font-variant: small-caps;
font-size: 16px;
Answers:
• font: small-caps normal normal 16px/1.4 Georgia;
• font: normal small-caps normal 16px/1.4 Georgia;
• font: 16px/1.4 Georgia normal small-caps normal;
• font: Georgia 16px/1.4 normal small-caps normal;
107. Which of the following are valid selectors? Check all that apply.
Note: There may be more than one right answer.
Answers:
• a[href^=»https»]
• p:empty
• input:file
• p:last-of-type
108. What does transform: matrix(2, 3, 0, 1, 0, 0); does?
Answers:
• Skews by 2 in x-direction and scales horizontally 3 times
• Scales horizontally 2 times and skews by 3 in x-direction
• Skews by 2 in y-direction and scales horizontally 3 times
• Scales horizontally 2 times and skews by 3 in y-direction
109. How to rotate element by 30deg in y-axis and z-axis?
Answers:
• transform: rotate3d(0, 30, 30)
• transform: rotate3d(0, 30, 1, 30)
• transform: rotate3d(0, 1, 1, 30)
• transform: rotate3d(1, 1, 1, 30)
110. In Descendant Selector , style is applied to element based on ____ .
Answers:
• whether element have sub element or not.
• whether element have only 2 sub elements or not
• whether element is of particular type or not
• None of These
111. The valid examples of ID selectors is/are
Answers:
• #black{color: #000000;}
• h1 #black{color: #000000;}
• #black h2{color: #000000;}
• All of the above
112. The CSS links properties are
Answers:
• :link, :visited, :hover, :active
• :link, :visit, :hover, :active
• :link, :visited, :over, :active
• :link, :visited, :hover, :active, :inactive
113. The different ways to associate styles with a HTML document is/are
Answers:
• Embedded CSS with <style> element
• Inline CSS with style attribute.
• External CSS with <link> element.
• All of the above
114. What is right way to select every 4th paragraph?
Answers:
• p:nth-of-each(4)
• p:nth-of-each(4n)
• p:nth-of-each(4n)
• p:nth-of-type(4n)
115. Which of these values are not valid for background-repeat
property?
Answers:
• repeat-x
• repeat-y
• repeat-xy
• no-repeat
116. Custom fonts are defined by which of the following CSS3 rules?
Answers:
• @font
• @font-face
• @new-font
• @custom-font
117. What does the CSS3 style grid-column-start: 2; does?
Answers:
• Generates grid with 2 columns
• Creates a grid item on second column
• Starts grid item from second column
• Creates a 2×2 grid
118. Following Style is applied to —
div.wrapper h2
font-size: 18px;
margin-top: 0;
Answers:
• Type 2 Heading inside Element div of class wrapper.
• Type 2 Heading inside Element div with id wrapper.
• Type 2 Heading inside Element div of any class
• None Of These
119. Which of the following code is invalid for Font Size?
Note: There may be more than one right answer.
Answers:
• p { font-size: 1 ex; }
• p { font-size: 0ex; }
• p { font-size: 1; }
• p { font-size: 1ex; }
• p { font-size: 0; }
120. The …………………. property allows you to control the shape or
style of bullet point in the case of unordered lists items, and the style of
numbering characters in ordered list items.
Answers:
• list-style-type
• list-style-layout
• list-type-style
• list-type
121. Which of the following is True about responsive design of Media
Queries?
Answers:
• @media (min-width: 800px) {
body { background: white; }
}
@media (min-width: 401px , max-width: 799px) {
body { background: black; }
}
@media (max-width: 400px) {
body { background: blue; }
}
• @media (min-width: 800px) {
body { background: white; }
}
@media (min-width: 401px max-width: 799px) {
body { background: black; }
}
@media (max-width: 400px) {
body { background: blue; }
}
• @media (min-width: 800px) {
body { background: white; }
}
@media (min-width: 401px) and (max-width: 799px) {
body { background: black; }
}
@media (max-width: 400px) {
body { background: blue; }
}
• @media (min-width: 800px) {
body { background: white; }
}
@media (min-width: 401px) (max-width: 799px) {
body { background: black; }
}
@media (max width: 400px) {
body { background: blue; }
}
122. Which of the following is/are the valid syntax for CSS pseudo
classes.
Answers:
• selector:pseudo-class{property: value}
• selector.class:pseudo-class{property:value}
• Both A and B
• None of the above
123. Which of the following are valid font descriptors? Check all that
apply.
Note: There may be more than one right answer.
Answers:
• unicode
• font-family
• font-stretch
• font-style
124. The …………… rule is used to make sure that the property always
be applied whether another property appears in CSS.
Answers:
• @important
• #important
• !important
• !first
125. The following syntax to set margin around a paragraph will make-
p{margin:10px 2%}
Answers:
• Top and bottom margin will be 10px and left and right margin will be 2% of the total
width.
• Left and right margin will be 10px and top and bottom margin will be 2% of the total
height
• Top margin will be 10px and other margins will be 2% of the total width
• Left margin will be 10px and other margins will be 2% of the total width
126. The ………………. property indicates whether a cell without any
content should have a border displayed.
Answers:
• blank-cells
• empty-cells
• nocontent-cells
• noborder-cells
127. The ………………… specifies whether a border should be solid,
dashed line, doted line, double line, groove etc.
Answers:
• border-layout
• border-decoration
• border-style
• border-weight
128. Which of the following statements is correct of Floating Elements?
Note: There may be more than one right answer.
Answers:
• Floating an element allows you to take that element out of normal flow and position it to
the far left or right of a containing box
• The Floated element becomes a block-level element around which other content can flow
• Floating an element allows you to add that element in of normal flow and position it to the
far left or right of a containing Div
• Floating and element in relation to the browser window, as opposed to the containing
element
129. Which of the following is multi-column properties?
Note: There may be more than one right answer.
Answers:
• column-rule
• column-rule-count
• column-width
• column-span
130. The …………………. property allows to specify how much space
appear between the content of an element and it’s border.
Answers:
• Spacing
• Marking
• Padding
• Content-border
131. How to resize a background image using CSS3?
Answers:
• background-size: 80px 60px;
• bg-dimensions: 80px 60px;
• background-proportion: 80px 60px;
• alpha-effect: bg-resize 80px 60px;
132. A CSS pseudo-class is a keyword added to selectors that specifies a
special state of the element to be?
Answers:
• selected
• div
• element
• property
133. The text-indent property allows you to indent the first ____ of text
within an element?
Answers:
• Letter
• Line
• Page
• All of the above
134. Which of the one code is correct about custom Fonts?
Answers:
• @font-face
{
font-family: MyFont;
src: url(myfont.ttf);
}
p { font-family: «MyFont», arial, sans-serif; }
• @font-face
{
font-family: MyFont;
src: url(myfont.ttf);
}
p { font-family: «MyFont» };
• @font-face
{
src: url(myfont.ttf);
}
p { font-family: «MyFont», arial, sans-serif; }
• @font-face
{
font-family: MyFont;
}
p { font-family: «MyFont», arial, sans-serif; }
135. Which of the following is 2D transformation methods?
Answers:
• rotateX()
• rotateY()
• rotateZ()
• None of the above
136. What are the Full-length Properties?
Answers:
• border-top-width: thin;
border-right-width: small;
border-left-width: medium;
• border-top-width: thin;
border-right-width: medium;
border-bottom-width: thin;
border-left-width: medium;
• border-right-width: medium;
border-bottom-width: thin;
border-left-width: high;
• border-top-width: thin;
border-right-height: medium;
border-bottom-height: thin;
border-left width: medium;
137. The ……………………. property allows to specify the distance
between the list and the text relating to the list.
Answers:
• list-spacing
• marker-spacing
• marker-offset
• list-offset
138. Screen Resolution refers to the number of dots a screen shows per?
Answers:
• Pixel
• Meter
• Inch
• Em
139. The different ways to associate styles with a HTML document is/are
Answers:
• Embedded CSS with <style> element
• Inline CSS with style attribute.
• External CSS with <link> element.
• All of the above
140. Pixels are relative to the resolution of the screen, so the same type
size will look larger when a screen has a resolution of __ than it would
when it is 1280×800?
Answers:
• 700×600
• 800×600
• 950×600
• 1020×600
141. Which of the following code is correct about Inset Border?
Answers:
• .border:hover
{
box-shadow: inset 0 0 0 25px #53a7ea;
}
• .border:hover
{
box-shadow: inset 0 0 0 25 #53a7ea;
}
• .border:hover
{
box-shadow: inset 0 0 0 color;
}
• .border:hover
{
box-shadow: inset 0 0 0 25px effect;
}
142. You can set border-box for all Elements using the following code?
Answers:
• html,body {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
• div {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
•*{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
•p{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
143. Which of the following code is incorrect about Gradients Syntax?
Answers:
• background: linear-gradient(direction, color-stop1, color-stop2, …);
• background: linear-gradient(angle, color-stop1, color-stop2);
• background: radial-gradient(shape size at position, start-color, …, last-color);
• None of the above
144. Internet Explorer uses ………………….. property to create
transparent images.
Answers:
• -moz-opacity:x
• filter: alpha(opacity=x)
• Both of the above
• None of the above
145. How can we use Multiple backgrounds using the following code?
Answers:
• background-image: url(bg1.png), url(bg2.png);
background-repeat: repeat, repeat-y;
background-attachment: fixed, fixed;
background-position: right bottom, top left;
• background-image: url(bg1.png), url(bg2.png);
background-repeat: no-repeat, repeat-y;
background-attachment: fixed, fixed;
background-position: right bottom, top left;
• background-image: url(bg1.png), url(bg2.png);
background-repeat: no-repeat;
background-attachment: fixed, fixed;
background-position: right bottom, top left;
• background-image: url(bg1.png), url(bg2.png);
background: no-repeat, repeat-y;
background-attachment: fixed, fixed;
background-position: right bottom, top left;
146. Which of the following is 3D transformation methods?
Answers:
• matrix()
• translate()
• scale()
• rotateX() , rotateY() , rotateZ()
147. Which of the following is used to represent Visited hyperlink.
Answers:
• :visited
• :clicked
• :focus
• :link
148. Fonts such as Times New Roman which have spaces in between
must be wrapped inside __
Answers:
• Quotation Mark
• Round Brackets
• Triangular Brackets
• Curly Braces
149. Liquid _____ designs stretch and contract as the user increases or
decreases the size of their browser window?
Answers:
• html
• layout
• css
• web
150. Fixed width layout designs do not change size as the user increases
or decreases the size of their _____ window?
Answers:
• page
• browser
• div
• All of the above
151. Which of these statements are true?
Note: There may be more than one right answer.
Answers:
• A block-level element always starts on a new line and takes up the full width available.
• An inline element does not start on a new line and only takes up as much width as
necessary.
• A block-level element always starts on a new line and only takes up as much width as
necessary.
• A block-level element can be placed into inline elements.
152. Using the following code you will remove margin from .float-
wrapper?
Answers:
• .float-wrapper { margin-bottom:0; }
• .float-wrapper { margin-bottom:none; }
• .float-wrapper { margin-bottom:1; }
• .float-wrapper { margin-bottom:5; }
153. What does the A stand for in RGBA?
Answers:
• Alpha
• Aqua
• About
• Approximate
154. Using the following code you will empty-cells of table?
Answers:
• empty-cells : show | hide
• empty-cells : inherit | show | remove
• empty-cells : inherit | show | hide
• empty-cells : inherit | show | none