CSS 3 Test
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.
If a parent element display property is set to none, its children too will not be rendered.
a. True
b. False
Which of the
following declarations can be used to cover the whole background?
a. body{
background: red url("test.gif"); background-repeat: repeat-y;
background-attachment: fixed;}
b. body{ background: red
url("test.gif"); background-repeat: repeat-x; background-attachment:
fixed;}
c. body{ background: red
url("test.gif"); background-repeat: no-repeat; background-attachment: fixed;}
d. body{
background: red url("test.gif"); background-repeat: repeat;
background-attachment: fixed;}
e. body{
background-image: url("test.gif"); background-repeat: space;}
The sans-serif
generic font-family is characterized by:
a. finish strokes, flared or tapering
ends, or actual serifed endings.
b. stroke
endings that are plain without any flaring, cross stroke, or other
ornamentation.
c. either
join strokes or other cursive characteristics beyond those of italic typefaces.
d. primarily
decorate the characters while still containing their representations.
Which of the
following is not a user interface element fragment selector?
a. value
b. choices
c. default
d. repeat-item
e.
repeat-index
What will happen if
the cursor property value is set to none?
a. The
default cursor will be displayed.
b. No cursor will be displayed.
c. A pointer
cursor will be displayed.
d. A text
cursor will be displayed.
Read the following:
@page rotated {size: landscape}
TABLE {page: rotated; page-break-before: right}
What will this code do?
@page rotated {size: landscape}
TABLE {page: rotated; page-break-before: right}
What will this code do?
a. It will put all tables on a
right-hand side landscape page.
b. It will
rotate the page if the table is positioned at the right side.
c. It will
keep the table in the landscape position and rotate the page.
d. None of
the above
Which of the
following is not a valid value for the font-stretch property?
a. condensed
b. normal
c. semi-narrower
d. expanded
e.
semi-expanded
Which of the
following does not apply to external styles?
a. Clean
separation of design and content
b. Minimal
code duplication
c. Highest priority
d. Reduced
page download time
Consider the
following code:
<style>
.name::after { content: leader(solid) }
</style>
<div class="entry">
<span class="name">Shane Mathew</span>
<span class="number">9843423232</span>
</div>
What will be the output if the name and the number end up on different lines?
<style>
.name::after { content: leader(solid) }
</style>
<div class="entry">
<span class="name">Shane Mathew</span>
<span class="number">9843423232</span>
</div>
What will be the output if the name and the number end up on different lines?
a. Shane
Mathew....
...9843423232
...9843423232
b. Shane
Mathew____
___9843423232
___9843423232
c. Shane Mathew
9843423232
9843423232
d. Shane Mathew---
---9843423232
---9843423232
A/An___________ is
defined with 'grid-columns', 'grid-rows' properties.
a. Explicit grid
b. Natural
grid
c. Default
grid
d. None of
the above
Can a percentage
value be given in a ruby-align property?
a. Yes
b. No
What will happen if
the following style declaration is used in the given HTML code?
<style
type="text/css">
div.container
{
width:38em;
border:1em solid black;
}
div.split
{
box-sizing:border-box;
width:50%;
border:1em silver ridge;
float:left;
}
HTML code:
<div class="container">
<div class="split">Box 1.</div>
<div class="split">Box 2.</div>
</div>
div.container
{
width:38em;
border:1em solid black;
}
div.split
{
box-sizing:border-box;
width:50%;
border:1em silver ridge;
float:left;
}
HTML code:
<div class="container">
<div class="split">Box 1.</div>
<div class="split">Box 2.</div>
</div>
a. Two boxes will be stacked one on
another.
b. Box 1 will
be on the left hand side and Box
2 will be on the right hand side horizontally.
c. Box 2 will
be on the left hand side and Box
1 will be on the right hand side horizontally.
d. Both boxes
will overlap each other.
What will be the
output of the following rule?
em { color: rgba(0,0,255,1) }
em { color: rgba(0,0,255,1) }
a. Opacity 1
with solid red color
b. Opacity 0
with solid blue color
c. Opacity 0
with solid red color
d. Opacity 1 with solid blue color
e. None of
the above
Consider the
following code:
body { text-replace: "a" "b" "b" "c" }
What will be the output of the following string if you implement the text-replace style?
andy lives behind cafรฉ
body { text-replace: "a" "b" "b" "c" }
What will be the output of the following string if you implement the text-replace style?
andy lives behind cafรฉ
a. bndy lives
behind cbfe
b. cndy lives
cehind ccfe
c. andy lives behind cafe
d. andy lives
cehind bafe
What is the initial
value of the font-size property?
a. small
b. medium
c. large
d. default
What is the range of
values (in decimal notation) that can be specified in the RGB color model?
a. 0 to 256
b. 0 to 255
c. -250 to
250
d. -255 to
255
If the nav-index
property of textbox1 is set to 10, that of textbox2 to 5 and that of textbox3
to 8, what will be the navigation order?
a. textbox1,
textbox2 ,textbox3
b. textbox2, textbox3 ,textbox1
c. textbox3,
textbox2 ,textbox1
d. textbox1,
textbox3 ,textbox2
ruby-text (in
XHTML: rt)
Which of the following display values assign ruby semantics to an arbitrary element as given above?
Which of the following display values assign ruby semantics to an arbitrary element as given above?
a. It
specifies that an element defines a ruby base.
b. It
specifies that an element contains one or more ruby bases.
c. It specifies that an element
defines a ruby text.
d. It
specifies that an element contains one or more ruby texts.
e. It
specifies that an element defines a ruby structure.
What is the initial
value of the opacity property?
a. 0
b. 1
c. normal
d. none
To which of the
following elements can the min-width property not be applied?
a. button
b. span
c. table row
You want to set the
image resolution to 300dpi irrespective of the resolution of the image. Which
of the following codes will be used?
a. img {
image-resolution: auto }
b. img {
image-resolution: auto, 300dpi }
c. img { image-resolution: 300dpi }
d. None of
the above
If you are using the
white-space-collapse property with value collapse, what will be the output of
the following string?
John leads his team to the victory, but fails to reach the finals.
John leads his team to the victory, but fails to reach the finals.
a. Johnleadshisteamtothevictory,butfailstoreachthefinals.
b. John leads his team to the victory,
but fails to reach the finals.
c. John leads
his team to the victory, but
fails to reach the finals.
d. John leads
his team to thevictory, but fails to reach thefinals.
The color in three
digit RGB notation is #fb0. What will be its equivalent six digit color code?
a. #fb0fb0
b. #ffbb00
c. #fbfb00
d. None of
the above
Which of the
following is not a valid value for the font-smooth property?
a. auto
b. never
c. always
d. normal
e. length
What is the default
value of the transform property in CSS3?
a. 50% 50%
b. 0% 0%
c. 100% 100%
d. none
What is the initial
value of the text-align property?
a. start
b. end
c. left
d. right
e. center
f. justify
Which of the
following value of the white-space property will set the value of
white-space-collapse to "preserve" and value of the text-wrap to
"none"?
a. normal
b. pre
c. nowrap
d. pre-wrap
e. pre-line
Which of the
following styles is not valid for an image?
a. img {
float= left }
b. img {
float: left here }
c. img {
background: "black" }
d. img {
border-width: 10 }
e. All of the above
You want to float an
image to the top of the next-page. Which of the following styles will help you
to achieve the desired result?
a. img { float:
next-page; }
b. img {
float: top-corner next-page; }
c. img {
float: next-page top; }
d. b and c
backface-visibility:hidden;
will this property hide the back side of a transformed div element?
a. Yes
b. No
Which of the
following is not a valid page break?
a.
page-break-inside
b. page-break-outside
c.
page-break-before
d.
page-break-after
e. None of
the above
Which of the
following properties allow percentages in their value fields?
a. font-size
b.
font-variant
c.
font-weight
d. line-height
What is the maximum
value that can be given to the voice-volume property?
a. 0
b. 10
c. 100
d. 500
e. None of
the above
Which of the
following styles is valid?
a. border:
"none";
b. border=
"none";
c. border: none;
d. border=
none;
e. None of
the above
Which of the
following are not valid values for the target-new property?
a. window
b. tab
c. none
d. parent
e. current
What will happen if
the following declaration is used?
body
{
background-image: url("test.png");
background-attachment: fixed;
background-position: 100% 100%;
background-repeat: no-repeat;
}
body
{
background-image: url("test.png");
background-attachment: fixed;
background-position: 100% 100%;
background-repeat: no-repeat;
}
a. The image will be shown in the
background at the bottom left corner.
b. The image
will be shown in the background at the bottom right corner.
c. The image
will be shown in the background at the top left corner.
d. The image
will be shown in the background at the top right corner.
e. The image
will be shown in the center of the page.
Which of the
following rules is equivalent to the em { color: rgb(255,0,0) } style?
a. em {
color: rgb(300,0,0) }
b. em {
color: rgb(255,-10,0) }
c. em {
color: rgb(110%, 0%, 0%) }
d. em {
color: rgb(100%, 0%, 0%) }
e. All of the above
What will happen if
the value of the transform-style property is set to flat and the element has
children?
a. The
element will be shown with 3D effect but the children will be rendered
flattened into the 2D plane.
b. The element will be shown with 2D
effect but the children will be rendered into the 3D plane.
c. Both the
element and its children elements will be rendered in 3D effect.
d. Both the
element and its children elements will be rendered in 2D effect.
Which of the
following is the initial value for the column-fill property?
a. auto
b. balance
c. none
Which of the given
options is/are equivalent to the following rule?
DIV { line-height: 1.2; font-size: 10pt }
DIV { line-height: 1.2; font-size: 10pt }
a. DIV { line-height: 1.2em;
font-size: 10pt }
b. DIV {
line-height: 12em; font-size: 10pt }
c. DIV {
line-height: 120%; font-size: 10pt }
d. DIV {
line-height: 20%; font-size: 10pt }
e. DIV { line-height:
80%; font-size: 10pt }
Consider the
following code and say what will happen if you click on More?
@media print
{
.footnote
{
float: footnote;
content: target-move(attr(href, url)) }
.marker { display: none }
}
HTML code:
<p>John was a great writer<a class="footnote" href="#words"> [More]</a>.
...
<p id=words><span class="marker">[More]</span> Great poet too.
{
.footnote
{
float: footnote;
content: target-move(attr(href, url)) }
.marker { display: none }
}
HTML code:
<p>John was a great writer<a class="footnote" href="#words"> [More]</a>.
...
<p id=words><span class="marker">[More]</span> Great poet too.
a. The tool
tip will appear saying Great poet too.
b. A pop up
will appear saying Great poet too.
c. The page
will shift focus to the line Great poet too.
d. Nothing will happen.
Which of the
following property doesn't take up space?
a. outline
b. border
c. Both a and
b
Which of the
following properties specifies the minimum number of lines of a paragraph that
must be left at the bottom of a page?
a. orphans
b. widows
c. bottom
d. overflow
e. None of the above
What is the initial
value of the marquee-speed property?
a. slow
b. normal
c. fast
d. none
If the following rule
is used, what will be the output?
:focus,:active { outline-offset: 10px }
:focus,:active { outline-offset: 10px }
a. The focus outline will appear at a
distance of 10 pixels from the active element.
b. The width
of the focus outline will be 10 pixels.
c. No outline
will be shown.
What is the initial
value of the hyphens property?
a. none
b. manual
c. auto
d. default
Consider the
following font definition:
font-weight:normal
What is the other way of getting the same result?
font-weight:normal
What is the other way of getting the same result?
a.
font-weight:100
b.
font-weight:900
c. font-weight:400
d.
font-weight:700
What will happen if
the following style declaration is applied to an element?
p { margin: 3em 2em }
p { margin: 3em 2em }
a. The top and the bottom margins will
be 3em and the left and the right margins will be 2em.
b. The top
and the bottom margins will be 2em and the left and the right margins will be
3em.
c. The top
and the left margins will be 3em and the bottom and the right margins will be
2em.
d. The top
and the right margins will be 2em and the bottom and the left margins will be
3em.
Consider the
following code:
<style>
.name::after { content: leader(solid) }
</style>
<div class="entry">
<span class="name">Shane Mathew</span>
<span class="number">9843423232</span>
</div>
What will be the output if the name and the number end up on different lines?
<style>
.name::after { content: leader(solid) }
</style>
<div class="entry">
<span class="name">Shane Mathew</span>
<span class="number">9843423232</span>
</div>
What will be the output if the name and the number end up on different lines?
a. Shane
Mathew....
...9843423232
...9843423232
b. Shane
Mathew____
___9843423232
___9843423232
c. Shane Mathew
9843423232
9843423232
d. Shane
Mathew---
---9843423232
---9843423232
What will happen if
the pause property is used as follows?
h2 { pause: 40s 60s }
h2 { pause: 40s 60s }
a. pause-before will be set to 40
seconds and pause-after will be set to 60 seconds.
b. pause-after
will be set to 40 seconds and pause-before will be set to 60 seconds.
c.
pause-after and pause-before will be set to 40 seconds.
d.
pause-after and pause-before will be set to 60 seconds.
If you set the value
of the speak property to digits, how would 22 be spoken?
a. twenty two
b. two two
c. twenty and
two
d. four
State whether
following statement is true or false.
The RGB color model is hardware-specific while the HSL is symmetrical to lightness and darkness.
The RGB color model is hardware-specific while the HSL is symmetrical to lightness and darkness.
a. True
b. False
If you are using the
white-space-collapse property with value collapse, what will be the output of
the following string?
John leads his team to the victory, but fails to reach the finals.
John leads his team to the victory, but fails to reach the finals.
a.
Johnleadshisteamtothevictory,butfailstoreachthefinals.
b. John leads his team to the victory,
but fails to reach the finals.
c. John leads
his team to the victory, but
fails to reach the finals.
d. John leads
his team to thevictory, but fails to reach thefinals.
Which of the given
rules would result in an object being rendered as above?
a. div {
content: '1' }
div::before { content: '2'; }
div::before::before { content: '3'; }
div::before { content: '2'; }
div::before::before { content: '3'; }
b. div {
content: '3' }
div::before { content: '2'; }
div::before::before { content: '1'; }
div::before { content: '2'; }
div::before::before { content: '1'; }
c. div { content: '1' }
div::before { content: '2'; }
div::before(2) { content: '3'; }
div::before { content: '2'; }
div::before(2) { content: '3'; }
d. div {
content: '3' }
div::before { content: '2'; }
div::before(2) { content: '1'; }
div::before { content: '2'; }
div::before(2) { content: '1'; }
Which of the
following option does NOT exist in media groups available in CSS3?
a. continuous
or paged
b. visual or
tactile
c. grid or
bitmap
d. braille or screen
You want to float an
image to the top of the next-page. Which of the following styles will help you
to achieve the desired result?
a. img { float:
next-page; }
b. img {
float: top-corner next-page; }
c. img {
float: next-page top; }
d. b and c
What effect does the
following rule have?
div { grid-rows: 4em (0.25em 1em); }
div { grid-rows: 4em (0.25em 1em); }
a. It creates rows with 4em height.
b. It creates
a header row with 4em height and alternative rows with 0.25em width
and 1em heights.
c. It creates
a header row with 4em height and alternative rows with 0.25em and 1em heights.
d. It creates
a header row with 4em width and alternative rows with 0.25em width and 1em
heights.
For the clear
property, which of the following value is not valid?
a. none
b. left
c. right
d. top
What is the initial
value of the animation-iteration-count property?
a. 0
b. 1
c. 5
d. None
Consider the
following code:
<style>
.name::after { content: leader(solid) }
</style>
<div class="entry">
<span class="name">Shane Mathew</span>
<span class="number">9843423232</span>
</div>
What will be the output if the name and the number end up on different lines?
<style>
.name::after { content: leader(solid) }
</style>
<div class="entry">
<span class="name">Shane Mathew</span>
<span class="number">9843423232</span>
</div>
What will be the output if the name and the number end up on different lines?
a. Shane Mathew....
...9843423232
...9843423232
b. Shane
Mathew____
___9843423232
___9843423232
c. Shane Mathew
9843423232
9843423232
d. Shane
Mathew---
---9843423232
---9843423232
What is the problem
in the following style sheet?
@import "style.css";
@media print
{
@import "print-main.css";
BODY { font-size: 10pt }
}
h1 {color: red }
@import "style.css";
@media print
{
@import "print-main.css";
BODY { font-size: 10pt }
}
h1 {color: red }
a. Two style
sheets can't be included with @import.
b. The body
tag can't be included inside @media.
c. @import rule is invalid since it
occurs inside a @media block.
d. It is
valid.
What is the type of
the letter-spacing property?
a. length
b. number
c. percentage
d. integer
What is the default
value of the text-align property?
a. start
b. end
c. left
d. right
e. center
f. justify
Which of the
following properties doesn"t take up space?
a. outline
b. border
c. Both a and
b
Which of the given
rules would result in an object being rendered as above?
a. div {
content: '1' }
div::before { content: '2'; }
div::before::before { content: '3'; }
div::before { content: '2'; }
div::before::before { content: '3'; }
b. div {
content: '3' }
div::before { content: '2'; }
div::before::before { content: '1'; }
div::before { content: '2'; }
div::before::before { content: '1'; }
c. div {
content: '1' }
div::before { content: '2'; }
div::before(2) { content: '3'; }
div::before { content: '2'; }
div::before(2) { content: '3'; }
d. div {
content: '3' }
div::before { content: '2'; }
div::before(2) { content: '1'; }
div::before { content: '2'; }
div::before(2) { content: '1'; }
backface-visibility:hidden;
will this property hide the back side when an element is rotated?
a. Yes
b. No
0 comments:
Post a Comment