Q.
Can a percentage value be given in a ruby-align property?
Ans. b) No
Q. Consider the following code snippet:
With these style rules:
Which of the following code snippets when inserted into CSS will
change the A and B div’s color from red to blue ?
Ans. a) In style rule add this code “#sectors >
div:not(.C):not(.D):not(.E) {background-color: blue;}”
Q. 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?
conjunction with the code above to accomplish the requirement?
Ans. a) border: 1px solid rgba(255, 0, 0, 0.7);
Q. Consider the following code:
div[class^=”stronger”] { }
{em
…
}
{em
…
}
Which of the following statements is true?
Ans. a) It applies the rule only on divs who belong to a class
that begins with “stronger”.
Q. Consider the following font definition:
font-weight:normal
What is the other way of getting the same result?
Ans. c) font-weight:400
Q. Consider the following problem:
When trying to apply a CSS3 style to a label of a checked radio button like this:
….
….
When trying to apply a CSS3 style to a label of a checked radio button like this:
….
….
This does not produce the desired effect.
Which of the following snippets will correct issue?
Which of the following snippets will correct issue?
Ans. c) input[type=”radio”]:checked+label{ font-weight: bold; }
Q. For the clear property, which of the following value is not
valid?
Ans.
d) top
Q. For the clear property, which of the following values is not
valid?
Ans. d) top
Q. 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?
output of the following code?
div {
display: none;
-webkit-transition: opacity 1s ease-out;
opacity: 0;
}
display: none;
-webkit-transition: opacity 1s ease-out;
opacity: 0;
}
div.active {
opacity: 1;
display: block;
}
opacity: 1;
display: block;
}
Ans. a) On active state the element is displayed.
Q. Given the following problem:
A drop shadow needs to appear only at the bottom, and no images
should be used.
Consider the following code:
Consider the following code:
-moz-box-shadow: 0px 4px 4px #000;
-webkit-box-shadow: 0px 4px 4px #000;
box-shadow-bottom: 5px #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?
Ans. a) 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: 0px 5px #000000;
-moz-box-shadow: 0px 5px #000000;
box-shadow: 0px 5px #000000;
b)
-webkit-box-shadow: 0 4px 4px -2px #000000;
-moz-box-shadow: 0 4px 4px -2px #000000;
box-shadow: 0 4px 4px -2px #000000;
-moz-box-shadow: 0 4px 4px -2px #000000;
box-shadow: 0 4px 4px -2px #000000;
Q. Is it possible to combine a background image and CSS3
gradients?
Ans. b) It is possible only when “background-image” is used.
Q. Is it possible to use transition animations with a gradient
background?
Ans. b) No
Q. Is there a way to create a pure CSS3 text color gradient?
Ans. c) There is no way to do a text color gradient with CSS3.
Q. Read the following:
@page rotated {size: landscape}
TABLE {page: rotated; page-break-before: right}
TABLE {page: rotated; page-break-before: right}
What will this code do?
Ans. a) It will put all tables on a right-hand side landscape
page.
Q. 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.
Ans. a) True
Q. Suppose that a
tag has 10
tags. In this case which statement is correct given the following?
td:nth-child(3n+0){
background-color: orange;
}
tags. In this case which statement is correct given the following?
td:nth-child(3n+0){
background-color: orange;
}
Ans. d) The background color of
every third td will be orange.
Q. The min-width property cannot be applied to the following
element:
Ans. c) table row
Q. 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.
effect on all inputs, except checkbox and radio.
Ans. b) input:not([type=”radio”]):not([type=”checkbox”]) {
}
}
Q. To apply style on every input element except text, which of
the following selectors should be used?
Ans. b) input:not([type=”text”])
Q. Using height on transitions is not possible with:
Ans. a) height:auto
Q. What is the best method to select all elements except for the
last one in an unordered list?
Ans. b) Using li:not(:last-child) css selector
Q. What is the default value of the animation-direction
property?
Ans. b) normal
Q. What is the default value of the transform-style property?
Ans. b) flat
Q. What is the difference between float:left; vs
display:inline-block; ?
Ans. b) display:inline-block; adds whitespace between the
elements.
c) float:left;
collapses the parent element on itself.
Q. What is the initial value of the animation-iteration-count
property?
Ans. a) 1
Q. What is the initial value of the font-size property?
Ans. b) medium
Q. What is the initial value of the marquee-speed property?
Ans. b) normal
Q. What is the initial value of the opacity property?
Ans. a) 1
Q. What is the maximum value that can be given to the
voice-volume property?
Ans. b) 100
Q. What is the range of values (in decimal notation) that can be
specified in the RGB color model?
Ans. b) 0 to 255
Q. What will be the outcome of given code?
div[class^=”stronger”] { }
{
…
}
div[class^=”stronger”] { }
{
…
}
Ans. a) It applies the rule only on divs who belong to a class
that begins with “stronger”.
Q. What will be the output of the following code?
…
…
…
Lorem
Ans. c. The border of div element will be colored black-red.
Q. What will be the output of the following code?
Lorem
Ans. c) The border of div element will be colored black-red.
Q. What will be the output of the following code?
Lorem
Ans. c) The border of div element will be colored black-red.
Q. What will be the output of the following rule?
em { color: rgba(0,0,255,1) }
Ans. d) Opacity 1 with solid blue color
Q.What will happen if the cursor property value is set to none?
Ans. b) No cursor will be displayed.
Q. What will happen if the pause property is used as follows?
h2 { pause: 40s 60s }
Ans. a) pause-before will be set to 40 seconds and pause-after
will be set to 60 seconds.
Q. Which of the following are not valid values for the
target-new property?
Ans. d) parent
e) current
e) current
Q. Which of the following can be used to add a shadow around the
div element below?
Lorem ipsum
Ans. a) box-shadow: 0 0 8px 2px #888;
Q. Which of the following filters does SVG support?
Ans. b) SVG supports CSS filters as well as ‘filter’ property of
SVG
Q. Which of the following is not a valid page break?
Ans. b) page-break-outside
Q.Which of the following is not a valid value for the
font-smooth property?
Ans. d) normal
Q. Which of the following is not a valid value for the
font-stretch property?
Ans. c) semi-narrower
Q. Which of the following is the initial value for the
column-fill property?
Ans. b) balance
Q. Which of the following option does not exist in media groups
available in CSS3?
Ans. d) braille or screen
Q.Which of the following properties allow percentages in their
value fields?
Ans. a) font-size
Q. Which of the following properties specifies the minimum
number of lines of a paragraph that must be left at the
bottom of a page?
bottom of a page?
Ans. a) orphans
Q.Which of the following statements is true with regard to CSS3
transitions?
Ans. d) None of these
Q. Which of the following styles is not valid for an image?
Ans. e) All of the above
Q. Which of the following styles is valid?
Ans. e) None of these
Q. Which of the following will apply a black inner glow with 25%
opacity to a page element?
Ans. a) box-shadow: 0 0 8px rgba(255,255,255, 0.25);
b) box-shadow: inset 0 0 8px rgba(0,0,0, 0.25);
b) box-shadow: inset 0 0 8px rgba(0,0,0, 0.25);
Q. Which of the following will apply a gradient transition to
#DemoGradient using CSS3?
Ans. b) #DemoGradient{
background: -webkit-linear-gradient(#C7D3DC,#5B798E);
background: -moz-linear-gradient(#C7D3DC,#5B798E);
background: -o-linear-gradient(#C7D3DC,#5B798E);
background: linear-gradient(#C7D3DC,#5B798E);
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;
-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;
}
border-radius: 10px;
border: 1px solid #839DB0;
cursor:pointer;
width: 150px;
height: 100px;
}
#DemoGradient:Hover{
background-position:100px;
}
Q. Which of the following will create a triangle effect using pure
CSS3 on a white background, without making use
of background images?
of background images?
Ans. b) border-color: #a0c7ff #ffffff #ffffff #ffffff;
border-style: solid;
border-width: 20px;
width: 0px;
height: 0px;
border-style: solid;
border-width: 20px;
width: 0px;
height: 0px;
Q. Which of the following will decrease 50px from a DIV element
whose width is 100%?
Ans. a) width: calc(100% – 50px);
Q. Which of the given options is/are equivalent to the following
rule?
DIV { line-height: 1.2; font-size: 10pt }
Ans. a) DIV { line-height: 1.2em; font-size: 10pt }
c) DIV {
line-height: 120%; font-size: 10pt }
Q. Which one of the following is appropriate to mirror/flip text
by using CSS3?
Ans. a) .mirror_text{
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: “FlipH”;
}
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: “FlipH”;
}
Q. Which statement is correct given the following?
box-shadow:30px 20px 10px 5px black;
box-shadow:30px 20px 10px 5px black;
Ans. c) 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.
Q. 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; }
font-family: “calibriforh1″;
src: local(“calibri”), url(calibri.woff);
}
h1 { font-family: “calibriforh1″, arial, sans-serif; }
Ans. a) 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.
