Elance CSS3 Test Answers 2015

What do you need to change in order to visually modify a button on mouseover?

Hover state

Button file

URL

Tag name

To specify the character encoding in an external stylesheet use:

@charset

@import

@media

!Important

Portrait and Landscape specific stylings are used for:

Both of these

Internet TV

Mobile devices (phones, tablets)

Which of these is NOT a valid css3 pseudo class?

:only-child

:blank

:not(s)

:root

:empty

Which of these is not a valid CSS3 color value?

hsl(120, 100%, 50%)

transparent

hsb(177, 65, 62)

rgba(255, 0, 0, 0.4)

hsla(240, 100%, 50%, 0.4)

What does this selector do? ul ~ p { color: red; }

Only selects the first p element that is immediately preceded by a ul element

Selects any p elements that follow a ul.

Selects any ul elements that follow a p element.

Selects both ul elements and p elements in the DOM.

Which is a recognized media type?

screen

speech

handheld

All of these

Pick the INCORRECT selector

element[att+=val]

element[att*=val]

element[att$=val]

element[att^=val]

Is this code written correctly?: span[hello="Cleveland"],[goodbye="Columbus"] { color: blue; }

False

True

Which of the following transitions follows the correct format?

transition: width 1s linear 2s;

transition: 1s linear width 2s;

transition: 1s 2s width linear

transition: (linear 1s) (width 2s)

width 1s linear 2s:transition;

Which of the following is NOT new in CSS3?

Media queries

Fluent animations

Multiple box models (switchable)

Multi-column

3D

How wide is the following div? div { box-sizing:border-box; width: 200px; padding: 20px; border:1px solid #000; }

202px

240px

200px

242px

True or False: CSS3 selectors are different from CSS1 and CSS2 selectors.

False

True

How would you use CSS3's new selectors to match the last 2 elements of a particular type?

:last-of-type(-n+2)

:last-child[type=element_type](-n+2)

You can't do that with CSS

:nth-last-child(-n+2)

In CSS, > is called a:

combinator

carat

less than symbol

operator

All properties must have a:

Element

None of these

Attribute

Value

What would the standard syntax to use a gradient in CSS3?

background: linear-gradient:bottom right, orange, blue);

background: linear-gradient(to bottom right, orange, blue);

background: linear-gradient(bottom right: orange, blue);

rgba differs from the opacity declaration in that:

rgba controls only the element it references, while opacity controls itself and all child elements

rgba is the deprecated predecessor to opacity

rgba works on all media types, whereas opacity is text-only

rgba controls itself and all child elements, while opacity controls only the element it references

Have all of the CSS3 properties been implemented in the modern browsers?

All except Internet Explorer.

No

All except Safari

Yes

What would the following CSS do? text-transform: capitalize;

Capitalize all letters

Capitalize the first letter of every word

This wouldn't do anything

The background-origin property specifies the positioning area of background images, which can be placed...

...within the border-box area.

...within the content-box or padding-box area.

...within the content-box, padding-box, or border-box area.

...within the context-box or border-box area.

In HTML5, how can you visually center this <div class="center">hi</div>?

.center{position:relative; left:50%;}

.center{position:absolute; left:50%;}

.center{margin:0 auto; width:250px; }

.center{text-align:center;}

.center{float:center;}

True or False? Round corners were supported before CSS3

True

False

What is the shorthand version of the CSS3 property transition?

transition: attribute length effect speed

trans: property length effect speed

transition-effect: attribute time swing count

transition: property duration timing-function delay

The CSS3 specification will allow for the use of generated gradients as background images.

Only with browser-specific prefixes

False

True

Given the following HTML snippet: <h1 class="title header">Hello</h1> And the following CSS: h1 { color: blue; } .title.header { color: red; } .title { color: green; } What color will the text "Hello" have?

Default color, ie no color is set

Red

Green

Blue

What is the method to stretch an image as a border in CSS3?

#round

#expand

#extend

#stretch

Which one of the following selector checks if the attribute begins with "val"?

[att/=val]

[att*=val]

[att~=val]

[att>=val]

[att^=val]

The correct way to select <li> elements which are "even" in terms of their placement (ie. 2nd, 4th, 6th, etc) would be?

li:nth-child(n%2)

None of these

li:nth-child(even)

li:even-child

li:nth-child(4n)

What does the :empty pseudo class target?

Elements that are invisible.

Elements that have no children.

Elements that have no CSS associated with them.

Elements that have no parents.

We write single ______ before the pseudo-class property.

hash

colon

semi colon

dot

If there is not enough room for a float on a line it is:

overlapping

hidden

shifted downward

shifted upward

In order to animate you must use the _____ property.

Ease-in

Automation

Transition

All of these

How can you apply a "bounce" effect to an element?

Move it using "cubic-bezier", with greater values than normal.

Both answers are correct.

Create an animation which moves the element to a position transitionally, followed by another faster but shorter move, in the opposite diretion.

With the emergence of CSS3, CSS2 has become:

destandarized

useless

defunct

none of these

_____ positioned boxes are taken out of the normal flow.

Absolute

Normal

Relative

Static

This code will affect: @media print {h1#first { position: static }

all browsers as well as print

all media devices except print

print only

none of these

Do "left", "top", "right" and "bottom" properties apply to all positioned elements?

No, they are valid only for relatively positioned elements

Yes

No, they are valid only for absolutely positioned elements

If the same property is styled at the beginning and at the end of a stylesheet...

both stylings will apply

they will cancel each other out

only the former will apply

only the latter will apply

Which CSS property would you use to make text italicized?

font-style

text-style

text-decoration

font-decoration

To turn text into all uppercase, use:

capitalize:

shout:

uppercase:

text-transform:

any of these

Is @keyframes an method of animations in CSS3?

No

This is not a method at all of any CSS and only in Flash.

Yes

Pseudo-classes are used to represent ___________________.

Related Events

Casual Events

Dynamic Events

Static Events

What line of HTML would you use to reference an external style sheet?

<a href="example.css" type="stylesheet">

<link rel="stylesheet" type="text/css" href="example.css">

<link src="example.css" rel="stylesheet">

<link rel="text/css" type="stylesheet" href="example.css">

True or False: With the implementation of CSS3, CSS1 and CSS2 are no longer needed.

False

True

To have a box-shadow inside of the div use:

inline

stroke

outset

inset

Which of the following is NOT a proper CSS browser prefix?

-webkit-border-radius: { }

-moz-border-radius: { }

-o-linear-gradiant: { }

-ie-border-radius: { }

li:nth-child(2n+1) { background-color: rgba(225, 0, 30, 0.8); } This code will:

combine two li tags on one line

change the background color for each even numbered li tag

change the background color for each odd numbered li tag

make the background color red

Which of the following options below has the correct CSS syntax?

p {color:red; text-align:center;}

p {color:red; text-align:center}

p {color:red; text-align:center};

p (color:red;text-align:center;)

Webkit has it's own prefix and works in:

Webkit browsers only

Safari

All browsers

IE

How would you add three columns to a page using CSS3

div { column-counter:3; }

div { -webkit-column-count: 3 /* Chrome, Safari, Opera*/ -moz-column-count: 3 /* Firefox */ column-count:3; }

Before using CSS3 declarations it is important to:

be aware of the browser support

turn off all other existing styles

turn on CSS3 styling in the header

run a CSS3 JavaScript

In webkit, in order to set the transition duration you must first:

give it an attribute

set the transition property

set the display

set the timing function

When style in different locations conflict, which will take precedence?

External style sheet referenced in a LINK element

<style> block included in the HEAD element

Inline style attribute

The correct way to select only inputs which are "disabled" is?

input:disabled

input:not('active')

Cannot be done with CSS3

input:readonly

input:hidden

If a layout is created in a PSD with blue buttons in the nav, then it would be best for the speed of the page to:

Cut and paste the button onto the page

Slice the buttons and use an href

Create the button using CSS

Add the button img to the background using CSS

To change the state of a selector you must change its:

Element

Syntax

Property

Model

Which one of these is not a font-weight descriptor in CSS3?

200

italic

900

bold

What do you need to change in order to visually modify a button on mouseover?

Tag name

Hover state

URL

Button file

What would a:link be an example of?

pseudo-class

p tag

iteration

none of these

To create more space within a CSS3 button use:

cell-padding

padding

margin

cell-spacing

Which selector can be used to target every element on a page?

$

body

*

html

Does CSS3 totally take over CSS2 or can the two be mixed?

Yes

mixed

No

Is ::first-line a pseudo-element?

False

True

Use _____ to spread out the letters of each word in a sentence.

word spacing

padding

align-right

letter-spacing

Which is correct use of border-radius?

2px;

2px 3px;

5px 5px 5px 5px;

any of these

True or False: The borders of an element can vary only up to 2 sides.

True

False

To give the effect of using tables without actually using tables in the HTML use:

display:row

display:block

display:table

display:column

What does this code do? @import url("mystyle.css");

import style rules from other style sheets

makes this shylesheet most important

overrides all other stylesheet

links this stylesheet to the html page

Is the following valid? "box-shadow: -5px -5px -5px #ccc;"

Yes

No

Opacity can cause an image to appear:

luminescent

tilted

faded

to glow

When making an animation in CSS3, can the image change color as it moves or does it have to wait till it makes destination?

No

Yes

Whether or not a browser accepts a styling is called:

deprecated code

hack

browser sniffing

browser support

Is it true that the z-index property only applies to positioned elements?

Yes

No

What property is used when creating custom fonts?

@font

Custom-font

@font-face

Font[custom font]

Which of the following is NOT a feature of CSS3:

It allows multiple text shadows on one element.

All of these are features of CSS3.

It allows to animate multiple properties on one element.

It allows multiple backgrounds on one element.

It allows multiple border styles on one element.

What are the 4 current vendor prefixes for css3 properties? (5 major desktop browsers, not mobile or tv)

-moz-, -webkit-, -o, -ms,

-ie, -fox, -apples, -oprah

-moz-, -web-kit-, -opera-, -micro-

-ff, -ch, -sf, -op, -ie

-moz, -wap, -xv, -epub

To set opacity of the background of an element, use:

Color:#000(50%)

Background-color:rgba(0,0,0,0.5)

Background:rgb(#000 -30%)

Color:rgb(0,0,0,0.5)

When styling for devices with 3-3.5 inch screen sizes it's best to use:

resolution finders

screen shots

max-borders

media queries

In this order, content, padding, border, margin, these best represent _____

Width

Height

Dimensions

CSS Box Model

Using li:nth-child(odd) will:

affect li tags with a class of nth-child

add margin to every other li tag

cause a border to occur

affect only the odd numbered li tags

In an unordered list, to turn off the bullets on the li tags use:

li: none;

display: none;

list-style: none;

list-type: none;

How would you make the background color of all the divs on a page blue?

div { background-color: blue; }

div { style: "background-color: blue" }

div# { background-color: blue; }

div { color: blue; }

True or False: Due to CSS box model you cannot create a circle using CSS3.

True

False

What would 'p:first-child' be an example of?

p tag

pseudo-class

none of these

iteration

After assigning a value to a property you should end the statement with a:

Semi-colon

Dot

Colon

Period

CSS elements specified in a stylesheet should always end with ___________.

a curly bracket ( } )

a comma ( , )

a colon ( : )

a parenthesis ( ) )

Can you rotate images in CSS3 and if you can what is the right method to do so?

No

Yes, spin

Yes, position

Yes, rotate

Yes, turn

What tag would you use to make an internal style sheet on your HTML document?

<css>

<style>

<stylesheet>

<script>

To get li tags to sit side by side use:

Display: side

Display: inline

Display: left

Display: right

In CSS3 it is possible to specify the size of the background image...

...in pixels only.

...in percentages only.

... in neither: the size is determined by the actual image size.

...in pixels or percentages.

You can use HTML attributes to define styles inline.

False

True

What is the syntax of opacity in CSS3?

opacity:0.4;

-ms-filter:alpha(opacity=40)

-ie-filter:alpha(opacity=40)

filter:alpha(opacity=40)

filter:alpha(opacity=0.4)

In CSS, * is called a:

id tag

universal selector

comment

None of these

When using HTML5 canvas it's good to...

Focus on building in a compatible browser .

All of the these.

Create a browser compatibility warning before the user enters the page.

Let the user know the pages browser preference.

To use CSS to make the corners of an element round without the use of scripting use:

Curvy corners

Jquery

CSS box model

Border-radius

When using multiple images on a background you must also set the _____ for both.

addon

plugin

hover state

positioning

What browser is transform-style not supported in

Opera

Safari

Firefox

Internet Explorer

How would you cause an element to acquire the font-family of its parent element?

parent: inherit

font-family: accept;

font: inherit;

font-family: inherit;

How do you set the opacity at 50% for this image for an image of id="image"?

#image{opacity:0.5;}

#image{color:50%}

#image{background:rgb(0,0,0,0 -50%)

Transitions are best supported in:

Netscape Navigator

Internet Explorer 7 and higher

Internet Explorer 8 and higher

WebKit browsers

CSS specifications are maintained by:

SVG

Mozilla

W3C

Open Source Developers

To style a section element, you may use:

section {[section] color: red;}

section {color: red;}

section [section] {color: red;}

True or False: In CSS3, one can add multiple background images.

False

True

In some instances CSS3 has replaced the need for:

Animated GIFs

All of the these

Layout images

Flash movies

True or False: CSS3 can be used to create images and animation.

True

False

Which color will show this css value : #ffffff;

White

Blue

Red

Black

Green

CSS can be used to style...

XML

XHTML

all of these

SVG

Can you expand the width of an element with a hover action in transitions in CSS3 or only other elements?

Yes

No, only other elements like color and opacity.

What is the limit assigned to using the :nth-child(-n+X) pseudo-selector where "X" represents the number of matches you wish to include?

100

500

Infinite

10

20

Can you use negative values for box-shadow in CSS3?

No

Yes

True or False: A roll-over effect can be acheived using CSS.

True

False

What are different ways to apply styles to a Web page?

All of these

Imported

Linked

Inline

Embedded

Can you make text seem hollow with CSS3?

Yes

No

Before you can use CSS3 you must first add a:

Jquery script

None of these

Add-on

Plugin

The ':before' and ':after' pseudo-elements can be used to insert generated content before or after an element's content.

True

False

To remove the underline from an href use:

text-decoration: none;

text: line-none

display: none

visibility: none

CSS2 and CSS3 styles can be combined.

False

True

How do you add a comment in CSS?

/* Comment */

# Comment

<? Comment ?>

// Comment

Which color will show this css value : #000000;

blue

green

white

red

Black

True or False: CSS3 allows you to animate divs.

True

False

True or False: You can create a full navigation bar including background color, buttons, horizontal or vertical alignment using all CSS!

True

False

Using CSS3 you can create multi-colored:

triangles

squares

circles

all of these

You can specify the horizontal shadow, vertical shadow and the ______ distance in text-shadow.

blur

sharpe

fade

fadeout

The two primary stylesheet languages are CSS and:

VMA

XSL

SVG

EHT

How would you set a background image to not repeat?

div { background-image: no-repeat; }

div { image: no repeat; }

div { background-repeat: no-repeat; }

CSS3 allows us to specify an inset text-shadow, similar to box-shadow.

False

True

To debug for Section 508 compliance you may want to check that all images contain alt tags. To do this you use:

find{alt}

img:not([alt])

@media_query {alt:?}

Which of these properties does NOT exist in CSS3?

box-sizing

border-image

text-opacity

word-wrap

background-size

What would 'a:focus:hover' be an example of?

Link tag

Focus state

Active tag

Dynamic pseudo-class

What is the earliest version of Internet Explorer that supports border-radius?

10.0

7.0

9.0

8.0

Which property is used to specify type faces ?

Font-type

Font-face

Font-family

Font-name

Complete this styling. text-shadow:

#666 2px

2px 2px 2px 2px #666

2px 2px 2px #666

2px #666 2px #666

Generated Content is added in CSS by which syntax pattern?

element:content { before: "foo"; }

before::element { content: "foo"; }

content:element { "foo"; }

element:before { content: "foo"; }

Do you have to use -webkit- for border images in CSS3?

No

Yes

Which of the following represents correct CSS shorthand for setting font family, font size, line-height and font weight for an element?

font: bold 18px verdana;

font: bold 18px/1.2 verdana;

Not possible

font: bold 18px verdana; line-height: 1.2;

font: bold 18px verdana 1.2;

What is the correct syntax of wrapping of the word in CSS3?

text-wrap:normal;

text-wrap: break-word;

word-wrap: break-word;

word-wrap: auto;

How can we call different bullets without using classes to the particular <li>?

li span p

li span

li /line break/ li+li /line break/ li+li+li /line break/

li span.bullet

The concept of designing a site which retains its meaning and functionality, even when certain (usually older) browsers cause display faults, is called...

Degrading Enhancements

Graceful Degradation

Cross-browser Degradation

Progressive Enhancement

Which of these properties does not exist?

transparency

background-size

border-image

transition

They all exist.

What is the common CSS3 trick used to trigger hardware acceleration on mobile devices?

Use media queries

Use 2D transforms (3D are not accelerated)

Use CSS Animations (exclusively)

Use 3D transforms (for 2D with Z axis set to 0)

Use display:hw-accelerated

Which of the following is not a correct keyword value for the font-stretch property?

semi-expanded

condensed

extra-condensed

macro-expanded

micro-condensed

To use a fading link transition use:

Duration

Ease-in

Fade-in

Slow-fade

To set the clipping region of an element use:

Clip

Display: clip

Overflow: hidden

Clipping

Which of the following is NOT a new CSS3 pseudo selector?

:nth-child

:not

:only-of-type

:target

:includes

To make an element move fast or slow what property must you change?

Speed or Duration

Duration or Transition

Animation or Speed

Transition or Speed

What is the earliest Internet Explorer and Chrome that supports multiple columns?

9.0, 4.0

11.0, 4.0

8.0, 3.0

10.0, 4.0

How would you repeat a gradient in CSS3?

background: repeating-linear-gradient(red, blue 10%, green 20%);

background-repeat: linear-gradient(red, blue 10%, green 20%);

What are two of the four sizes with radial gradients?

farthest-corner, farthest-angle

closest-side, farthest-corner

closest-angle, farthest-angle

closest-angle, farthest-side

Which of the following is not a new background property in CSS3?

background-size

background-clip

background-origin

background-shadow

When using background-clip, values can be added to:

padding-box

boxer-box

margin-box

padding-box and margin-box

Can you use CSS3 with older version of HTML?

No

Yes

What does the font-size-adjust property do?

It specifies an aspect value for an element that will effectively preserve the y-width of the first choice font

It specifies an aspect value for an element that will effectively preserve the x-height and y-width of the first choice font

It specifies an aspect value for an element that will effectively preserve the x-height of the first choice font

It specifies the font-size relative to the root element

It specifies the font-size relative to the parent element

What CSS3 attribute is not correct

scale()

matrix()

translate()

slide()

all are right

To make text appear on a page just by hovering over any portion of a page use:

text

hover

title

alt

True or False? The word-wrap and overflow-wrap properties have the same effects.

True

False

CMYK color model can be used with CSS in modern browsers?

True

False

What CSS value scales the background image to the largest size contained within the element?

fill

cover

repeat

contain

Does z-index: -1 place the element behind its parent?

Only if the parent establishes a local stacking context

Only if the parent does not establish a local stacking context

No

Yes

What do you need to change in order to visually modify a button on mouseover?

Hover state

Button file

URL

Tag name

To specify the character encoding in an external stylesheet use:

@charset

@import

@media

!Important

Portrait and Landscape specific stylings are used for:

Both of these

Internet TV

Mobile devices (phones, tablets)

Which of these is NOT a valid css3 pseudo class?

:only-child

:blank

:not(s)

:root

:empty

Which of these is not a valid CSS3 color value?

hsl(120, 100%, 50%)

transparent

hsb(177, 65, 62)

rgba(255, 0, 0, 0.4)

hsla(240, 100%, 50%, 0.4)

What does this selector do? ul ~ p { color: red; }

Only selects the first p element that is immediately preceded by a ul element

Selects any p elements that follow a ul.

Selects any ul elements that follow a p element.

Selects both ul elements and p elements in the DOM.

Which is a recognized media type?

screen

speech

handheld

All of these

Pick the INCORRECT selector

element[att+=val]

element[att*=val]

element[att$=val]

element[att^=val]

Is this code written correctly?: span[hello="Cleveland"],[goodbye="Columbus"] { color: blue; }

False

True

Which of the following transitions follows the correct format?

transition: width 1s linear 2s;

transition: 1s linear width 2s;

transition: 1s 2s width linear

transition: (linear 1s) (width 2s)

width 1s linear 2s:transition;

Which of the following is NOT new in CSS3?

Media queries

Fluent animations

Multiple box models (switchable)

Multi-column

3D

How wide is the following div? div { box-sizing:border-box; width: 200px; padding: 20px; border:1px solid #000; }

202px

240px

200px

242px

True or False: CSS3 selectors are different from CSS1 and CSS2 selectors.

False

True

How would you use CSS3's new selectors to match the last 2 elements of a particular type?

:last-of-type(-n+2)

:last-child[type=element_type](-n+2)

You can't do that with CSS

:nth-last-child(-n+2)

In CSS, > is called a:

combinator

carat

less than symbol

operator

All properties must have a:

Element

None of these

Attribute

Value

What would the standard syntax to use a gradient in CSS3?

background: linear-gradient:bottom right, orange, blue);

background: linear-gradient(to bottom right, orange, blue);

background: linear-gradient(bottom right: orange, blue);

rgba differs from the opacity declaration in that:

rgba controls only the element it references, while opacity controls itself and all child elements

rgba is the deprecated predecessor to opacity

rgba works on all media types, whereas opacity is text-only

rgba controls itself and all child elements, while opacity controls only the element it references

Have all of the CSS3 properties been implemented in the modern browsers?

All except Internet Explorer.

No

All except Safari

Yes

What would the following CSS do? text-transform: capitalize;

Capitalize all letters

Capitalize the first letter of every word

This wouldn't do anything

The background-origin property specifies the positioning area of background images, which can be placed...

...within the border-box area.

...within the content-box or padding-box area.

...within the content-box, padding-box, or border-box area.

...within the context-box or border-box area.

In HTML5, how can you visually center this <div class="center">hi</div>?

.center{position:relative; left:50%;}

.center{position:absolute; left:50%;}

.center{margin:0 auto; width:250px; }

.center{text-align:center;}

.center{float:center;}

True or False? Round corners were supported before CSS3

True

False

What is the shorthand version of the CSS3 property transition?

transition: attribute length effect speed

trans: property length effect speed

transition-effect: attribute time swing count

transition: property duration timing-function delay

The CSS3 specification will allow for the use of generated gradients as background images.

Only with browser-specific prefixes

False

True

Given the following HTML snippet: <h1 class="title header">Hello</h1> And the following CSS: h1 { color: blue; } .title.header { color: red; } .title { color: green; } What color will the text "Hello" have?

Default color, ie no color is set

Red

Green

Blue

What is the method to stretch an image as a border in CSS3?

#round

#expand

#extend

#stretch

Which one of the following selector checks if the attribute begins with "val"?

[att/=val]

[att*=val]

[att~=val]

[att>=val]

[att^=val]

The correct way to select <li> elements which are "even" in terms of their placement (ie. 2nd, 4th, 6th, etc) would be?

li:nth-child(n%2)

None of these

li:nth-child(even)

li:even-child

li:nth-child(4n)

What does the :empty pseudo class target?

Elements that are invisible.

Elements that have no children.

Elements that have no CSS associated with them.

Elements that have no parents.

We write single ______ before the pseudo-class property.

hash

colon

semi colon

dot