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