CSS Test Upwork
In Descendant Selector , style is applied to element based on ____ .
A. whether element have sub element or not.
B. whether element have only 2 sub elements or not
C. whether element is of particular type or not
D. None of These
Which of the following are valid properties for flex-container? Check all that apply.
Note: There may be more than one right answer.
flex-wrap
flex-flow
align-items
justify
Which of the following is used to represent unvisited hyperlink.
A. :link
B. :nonvisited
C. :unvisited
D. :fresh
What does transform: matrix(2, 3, 0, 1, 0, 0); does?
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
How many type faces inside property "font-family" ?
A. 1
B. Maximum 2
C. No Limit
D. Maximum 3
What happens if animation-duration is not specified for an animation in CSS3?
Animation will have continuous effect
Animation will have no effect
Animation effect will occur once and stop
Animation effect will toggle
What is right way to transform text to uppercase?
text-transform: capitalize;
text-transform: upcase;
text-transform: uppercase;
Which of the following are valid font descriptors? Check all that apply.
Note: There may be more than one right answer.
unicode
font-family
font-stretch
font-style
Which of the following code snippets when inserted into CSS will change the A and B div’s color from red to blue?
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
Custom fonts are defined by which of the following CSS3 rules?
@font
@font-face
@new-font
@custom-font
Which statement is correct given the following?
box-shadow:30px 20px 10px 5px black;
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.
Which of the following are valid font descriptors? Check all that apply.
Note: There may be more than one right answer.
unicode
font-family
font-stretch
font-style
Which of the following styles is not valid for an image?
img { float= left }
img { float: left here }
img { background: "black" }
img { border-width: 10 }
All of the above
How to resize a background image using CSS3?
background-size: 80px 60px;
bg-dimensions: 80px 60px;
background-proportion: 80px 60px;
alpha-effect: bg-resize 80px 60px;
How can you create rounded corners using CSS3?
border[round]: 30px;
corner-effect: round;
border-radius: 30px;
alpha-effect: round-corner;
What is the right way to defined custom font?
@font-family {
font-family: Custom-Form;
src: url(custom_font.woff);
}
@font-face {
font-family: Custom-Form;
src: url(custom_font.woff);
}
@font-define {
font-family: Custom-Form;
src: url(custom_font.woff);
}
@font-custom {
font-family: Custom-Form;
src: url(custom_font.woff);
Which of the following will decrease 50px from a DIV element whose width is 100%?
width: calc(100% - 50px);
width: reduce(100% - 50px);
width: decrease(100% - 50px);
width: 100% - 50px;
Which of the following are valid selectors? Check all that apply.
Note: There may be more than one right answer.
a[href^="https"]
p:empty
input:file
p:last-of-type
Which of the following properties specifies the minimum number of lines of a paragraph that must be left at the bottom of a page?
orphans
widows
bottom
overflow
None of these
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;
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;
What will happen if the cursor property value is set to none?
The default cursor will be displayed.
No cursor will be displayed
A pointer cursor will be displayed.
A text cursor will be displayed.
Pseudo-classes can be used to
Style an element when a user mouses over it
Style visited and unvisited links differently
Style an element when it gets focus
All
Which of the following is NOT a valid media type for media query?
All
Print
Screen
Small
Speech
Which pair of CSS transforms results in same output?
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);
For the clear property, which of the following values is not valid?
none
left
right
top
Which of the following are the newly introduced background properties in CSS3?
background-origin
background-clip
background-size
All of the above
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>
Yellow
Red
Which of the following filters does SVG support?
Note: There may be more than one right answer.
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
What is the size of matrix used in 3D transformation?
3 x 3
4 x 4
3 x 2
2 x 3
Is this statement right?
“Pixel is a static measurement, while percent and EM are relative measurements.”
Yes
No
Which of the following styles is valid?
order: "none";
order= "none";
order: none;
order= none;
None of these.
Which of these properties is not exists in CSS3?
translate
rotate
scale
matrix
All of these properties are exists
Which one of the following is appropriate to mirror/flip text by using CSS3?
.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); }
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>
This does not produce the desired effect.
Which of the following snippets will correct issue?
It is not possible to style.
<label "rad"="">A Label
input[type="radio"]:checked+label{ font-weight: bold; }
input[type="radio"]:checked@label{ font-weight: bold; }
Which of the following css will divide the text in the div element into 3 columns?
div {-webkit-column-count: 3; }
div {-moz-column-count: 3; }
div {column-count: 3; }
All of the above
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;
}
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.
Which of the following will create a triangle effect using pure CSS3 on a white background, without making use of background images?
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;
Can a percentage value be given in a ruby-align property?
Yes
No
What does the following css code indicate?
columns: 2 auto;
column-width: auto;
column-count: 2
Both 1 and 2
None
Consider the following font definition:
font-weight:normal
What is the other way of getting the same result?
font-weight:100
font-weight:900
font-weight:400
font-weight:700
How to select which placed immediately after
div > p
div + p
div ~ p
p:after(div)
Consider the following code:
div[class^="stronger"] { }
{em
...
}
Which of the following statements is true?
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.
Which of the following is NOT a valid pseudo-class?
:active
:hover
:text
:out-of-range
Which of the following statement is right?
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
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
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.
Which of the following is not a valid value for the font-smooth property?
auto
never
always
normal
length
How many types of gradients are defined in CSS3?
2
3
1
4
Which of the following option does not exist in media groups available in CSS3?
continuous or paged
visual or tactile
grid or bitmap
braille or screen
Which of the following are transition related properties in CSS3? Check all that apply.
Note: There may be more than one right answer.
transition
transition-delay
transition-duration
transition-timing-function
transition-property
Which of the following is not a valid page break?
page-break-inside
page-break-outside
page-break-before
page-break-after
None of these
Which of these selectors has the largest “weight”?
.your div.awesome
.your div#awesome
#your div.awesome
#your div#awesome
The min-width property cannot be applied to the following element:
button
span
table row
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?
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.
Which of these statements are true?
Note: There may be more than one right answer.
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.
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
ndy lives behind cbfe
cndy lives cehind ccfe
andy lives behind cafe
andy lives cehind bafe
Which of the following is NOT a valid choice for property text-overflow?
ellipsis
clip
inherit
overflow
What is the default value of the transform-style property?
preserve-3d
flat
none
preserve
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;}
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.
What does the A stand for in RGBA?
Alpha
Aqua
About
Approximate
Which of the following will apply a black inner glow with 25% opacity to a page element?
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%);
Which of these values are not valid for clear property?
inherit
none
both
any
Which of the following is the initial value for the column-fill property?
auto
balance
none
Which of the following selector matches a particular element only when it lies inside a particular element?
The Type Selector
The Universal Selector
The Descendant Selector
The Class Selector
Which of the following can be used to add a shadow around the div element below?
<div>Lorem ipsum</div>
box-shadow: 0 0 8px 2px #888;
border-shadow: 0 0 8px 2px #888;
div-shadow: 8px 2px 0 0 #888;
None of these
Which of these values are not valid for position property?
absolute
fixed
relative
static
All of these values are valid
What is the maximum value that can be given to the voice-volume property?
10
100
500
None of the above
What is the initial value of the font-size property?
small
medium
large
default
Which of these color definition is wrong?
color: rgb(0, 191, 255);
color: #00bfff;
color: DeepSkyBlue
color: hsl(195, 100%, 50%);
None of these
Is there a way to create a pure CSS3 text color gradient?
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.
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?
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;
What is the right way to skew text horizontal in left direction on 30 degrees?
transform: skewX(-30deg);
transform: skewX(30deg);
transform: skewY(-30deg);
transform: skewY(30deg);
What is the initial value of the animation-iteration-count property?
1
5
None
What is the default value of the animation-direction property?
none
normal
alternate
inherited
CSS Test Answers part 2CSS Test Answers part 3
CSS Test Upwork 2019