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

