CSS3 Questions & Answers | Guaranteed Good Score

It has been a major issue, now a days, to avail a good score in different freelancing sites exams regarding different skill sets. The excellent feedback of my last post regarding exam preparation has induced me to come up with this one regarding CSS3 skill test solution for Elance. Hope the feedback won't be any different from the previous post on Academic Writing Questions & Answers | 100% Guaranteed Good Score! Your support and feedback will be highly appreciated!

If the answers helps you then please leave a positive comment so that someone else is also helped through your comment. Look forward to your feedback. Thanks in advance.

Question No. 1

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

Only if the parent does not establish a local stacking context

Only if the parent establishes a local stacking context

Yes

Question No. 2

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

cover

repeat

contain

fill

Question No. 3

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

True

False

Question No. 4

What does the font-size-adjust property do?

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 the font-size relative to the parent element

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

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

It specifies the font-size relative to the root element

Question No. 5

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

boxer-box

margin-box

padding-box and margin-box

padding-box

Question No. 6

How would you repeat a gradient in CSS3?

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

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

Question No. 7

Can you use CSS3 with older version of HTML?

Yes

Question No. 8

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

alt

text

title

hover

Question No. 9

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

background-clip

background-size

background-shadow

background-origin

Question No. 10

To use a fading link transition use:

Ease-in

Fade-in

Duration

Slow-fade

Question No. 11

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

:not

:only-of-type

:nth-child

:target

:includes

Question No. 12

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 verdana 1.2;

font: bold 18px/1.2 verdana;

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

Not possible

Question No. 13

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

9.0, 4.0

10.0, 4.0

11.0, 4.0

8.0, 3.0

Question No. 14

What are two of the four sizes with radial gradients?

farthest-corner, farthest-angle

closest-angle, farthest-angle

closest-side, farthest-corner

closest-angle, farthest-side

Question No. 15

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

li span

li span p

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

li span.bullet

Question No. 16

To set the clipping region of an element use:

Overflow: hidden

Display: clip

Clipping

Clip

Question No. 17

In CSS, > is called a:

operator

combinator

carat

less than symbol

Question No. 18

Which of these properties does not exist?

border-image

transparency

They all exist.

background-size

transition

Question No. 19

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

Cross-browser Degradation

Graceful Degradation

Degrading Enhancements

Progressive Enhancement

Question No. 20

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

Animation or Speed

Transition or Speed

Speed or Duration

Duration or Transition

Question No. 21

Which of these is NOT a valid css3 pseudo class?

:empty

:only-child

:not(s)

:root

:blank

Question No. 22

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

False

True

Question No. 23

How wide is the following div? div { box-sizing:border-box; width: 200px; padding:

20px; border:1px solid #000; }

202px

240px

242px

200px

Question No. 24

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

condensed

extra-condensed

macro-expanded

micro-condensed

semi-expanded

Question No. 25

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

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

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

You can't do that with CSS

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

Question No. 26

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

color: blue; }

False

True

Question No. 27

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

text-wrap: break-word;

word-wrap: auto;

word-wrap: break-word;

text-wrap:normal;

Question No. 28

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);

Question No. 29

Which of the following is NOT new in CSS3?

Multiple box models (switchable)

Multi-column

Media Queries

Question No. 30

rgba differs from the opacity declaration in that:

rgba is the deprecated predecessor to opacity

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

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

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

Question No. 31

Portrait and Landscape specific stylings are used for:

Both of these

Mobile devices (phones, tablets)

Internet TV

Question No. 32

Which of these is not a valid CSS3 color value?

hsb(177, 65, 62)

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

hsl(120, 100%, 50%)

transparent

gba(255, 0, 0, 0.4)

Question No. 33

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

Selects any ul elements that follow a p element.

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

Selects any p elements that follow a ul.

Selects both ul elements and p elements in the DOM.

Question No. 34

All properties must have a:

Element

Value

Attribute

None of these

Question No. 35

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

7.0

9.0

10.0

8.0

Question No. 36

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

.center{text-align:center;}

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

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

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

.center{float:center;}

Question No. 37

Pick the INCORRECT selector

element[att*=val]

element[att^=val]

element[att$=val]

element[att+=val]

Question No. 38

Which of the following transitions follows the correct format?

transition: 1s 2s width linear

transition: 1s linear width 2s;

width 1s linear 2s:transition;

transition: width 1s linear 2s;

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

Question No. 39

Which property is used to specify typefaces?

Font-face

Font-name

Font-type

Font-family

Question No. 40

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

Yes

Question No. 41

Which of these properties does not exist in CSS3?

text-opacity

box-sizing

word-wrap

border-image

background-size

Question No. 42

True or False? Round corners were supported before CSS3

True

False

Question No. 43

Complete this styling. text-shadow:

2px 2px 2px 2px #666

2px 2px 2px #666

2px #666 2px #666

#666 2px

Question No. 44

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

[att/=val]

[att~=val]

[att^=val]

[att*=val]

[att>=val]

Question No. 45

Generated Content is added in CSS by which syntax pattern?

content:element { "foo"; }

element:content { before: "foo"; }

element:before { content: "foo"; }

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

Question No. 46

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

This wouldn't do anything

Capitalize the first letter of every word

Capitalize all letters

Question No. 47

The two primary stylesheet languages are CSS and:

VMA

SVG

EHT

XSL

Question No. 48

Consider the following code: <div style="height: 40px; width: 40px;background:black;margin: 20px 30px 50px;"></div> what would be the margin of the 'div'?

top margin 20px, right margin 50px and left margin 30px

None of these are correct

top and bottom margin 20px, left margin 30px, right margin 50px

top margin 20px, left and right margin 30px, bottom margin 50px

top margin 20px, right margin 30px and left margin 50px

Question No. 49

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

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

...within the border-box area.

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

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

Question No. 50

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

None of these

li:nth-child(n%2)

li:nth-child(4n)

li:even-child

li:nth-child(even)

Question No. 51

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?

Red

Blue

Default color, i.e. no color is set

Green

Question No. 52

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

#extend

#stretch

#expand

#round

Question No. 53

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

Link tag

Active tag

Focus state

Dynamic pseudo-class

Question No. 54

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

True

Only with browser-specific prefixes

False

Question No. 55

In order to animate you must use the property.

Automation

All of these

Ease-in

Transition

Question No. 56

What does the: empty pseudo class target?

Elements that have no parents.

Elements that have no CSS associated with them.

Elements that are invisible.

Elements that have no children.

Question No. 57

Which CSS property would you use to make text italicized?

font-style

font-decoration

text-style

text-decoration

Question No. 58

What does the translate() method do?

moves the element from its current position, depending on the parameters given for the left (X-axis) and the top (Y-axis) position

it is used to translate one language to another

resizes the element depending on the parameters given

it is used only to animate element

the translate() method does not support in any browser

Question No. 59

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

they will cancel each other out

only the latter will apply

both stylings will apply

only the former will apply

Question No. 60

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

-webkit-border-radius: { }

-ie-border-radius: { }

-o-linear-gradient: { }

-moz-border-radius: { }

Question No. 61

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

False

True

Question No. 62

Pseudo-classes are used to represent

Static Events

Dynamic Events

Related Events

Casual Events

Question No. 63

How would you add three columns to a page using CSS3

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

div { column-counter:3; }

Question No. 64

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

Model

Syntax

Element

Property

Question No. 65

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

set the transition property

set the display

set the timing function

give it an attribute

Question No. 66

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

Inline style attribute

Question No. 67

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:

Create the button using CSS

Slice the buttons and use an href

Cut and paste the button onto the page

Add the button img to the background using CSS

Question No. 68

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

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

Question No. 69

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

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

...in pixels or percentages.

Question No. 70

Which is correct use of border-radius?

any of these

5px 5px 5px 5px;

2px 3px;

2px;

Question No. 71

Which of the following is NOT a feature of CSS3:

It allows to animate multiple properties on one element.

It allows multiple border styles on one element.

It allows multiple backgrounds on one element.

It allows multiple text shadows on one element.

All of these are features of CSS3.

Question No. 72

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

Semicolon

Dot

Period

Colon

Question No. 73

True or False: CSS3 allows you to animate divs.

True

False

Question No. 74

Using CSS3 you can create multi-colored:

squares

triangles

circles

all of these

Question No. 75

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

True

False

Question No. 76

Can you make text seem hollow with CSS3?

Yes

Question No. 77

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

False

True

Question No. 78

Which color will show this css value: #000000;

green

white

red

black

blue

Question No. 79

Before you can use CSS3 you must first add a:

Add-on

Plugin

Jquery script

None of these

Question No. 80

CSS2 and CSS3 styles can be combined.

True

False

Question No. 81

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

All of these

Embedded

Imported

Linked

Inline

Question No. 82

To remove the underline from a href use:

display:none

visibility:none

text: line-none

text-decoration: none

Question No. 83

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.

Question No. 84

How do you add a comment in CSS?

/* Comment */

// Comment

<? Comment ?>

# Comment

Question No. 85

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

False

True

Question No. 86

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

Yes

Question No. 87

To style a section element, you may use:

section {color: red;}

section [section] {color: red;}

section {[section] color: red;}

Question No. 88

Which color will show this css value: #ffffff;

White

Green

Black

Red

Blue

Question No. 89

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

False

True

Question No. 90

In some instances CSS3 has replaced the need for:

Flash movies

Layout images

Animated GIFs

All of the these

Question No. 91

You can use HTML attributes to define styles inline.

False

True

Question No. 92

Transitions are best supported in:

Internet Explorer 8 and higher

WebKit browsers

Netscape Navigator

Internet Explorer 7 and higher

Question No. 93

CSS specifications are maintained by:

W3C

Open Source Developers

SVG

Mozilla

Question No. 94

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

False

True

Question No. 95

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

Curvy corners

Jquery

Border-radius

CSS box model

Question No. 96

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?

Infinite

100

500

Question No. 97

CSS can be used to style...

XML

SVG

XHTML

All of these

Question No. 98

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

positioning

plugin

addon

hover state

Question No. 99

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

Focus on building in a compatible browser .

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

All of these.

Let the user know the pages browser preference.

Question No. 100

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

#image{color:50%}

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

#image{opacity:0.5;}

Question No. 101

Which browser dos NOT support all properties of 3D-Transforms?

Internet Explorer 11

Internet Explorer 10

Chrome 36

Question No. 102

What is the syntax of opacity in CSS3?

filter:alpha(opacity=0.4)

-ie-filter:alpha(opacity=40)

opacity:0.4;

filter:alpha(opacity=40)

-ms-filter:alpha(opacity=40)

Question No. 103

What browser is transform-style not supported in

Internet Explorer

Opera

Firefox

Safari

Question No. 104

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

False

True

Question No. 105

In CSS, * is called a:

comment

universal selector

None of these

id tag

Question No. 106

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

Yes, rotate

Yes, turn

Yes, spin

Yes, position

Question No. 107

To get li tags to sit side by side use:

Display: side

Display: inline

Display: left

Display: right

Question No. 108

margin-top:30px; Here:

both are values

both are properties

margin-top is value and 30px is property

margin-top is property and 30px is value

Question No. 109

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

<style>

<css>

Question No. 110

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

Yes

Question No. 111

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

div { color: blue; }

div { background-color: blue; }

div# { background-color: blue; }

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

Question No. 112

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

CSS Box Model

Width

Dimensions

Height

Question No. 113

Which one is correct way to give margin to an element?

margin:30px, 20px, 10px, 20px;

margin:30px 20px 10px 20px;

Question No. 114

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

font-family: accept;

font-family: inherit;

font: inherit;

parent: inherit

Question No. 115

What property is used when creating custom fonts?

Font[custom font]

Custom-font

@font

@font-face

Question No. 116

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

Color:#000(50%)

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

Background:rgb(#000 -30%)

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

Question No. 117

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

p tag

pseudo-class

iteration

none of these

Question No. 118

CSS elements specified in a stylesheet should always end with .

a comma ( , )

a colon ( : )

a curly bracket ( } )

a parenthesis ( ) )

Question No. 119

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

True

False

Question No. 120

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

max-borders

media queries

resolution finders

screen shots

Question No. 121

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

Question No. 122

Opacity can cause an image to appear:

to glow

luminescent

faded

tilted

Question No. 123

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

False

True

Question No. 124

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

Yes

Question No. 125

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

list-style: none;

li: none;

list-type: none;

display: none;

Question No. 126

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

-moz, -wap, -xv, -epub

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

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

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

-ie, -fox, -apples, -oprah

Question No. 127

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

body

html

* (Ans)

Question No. 128

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

Mixed

Yes

Question No. 129

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

links this stylesheet to the html page

import style rules from other style sheets

overrides all other stylesheet

makes this stylesheet most important

Question No. 130

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

Yes

Question No. 131

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

200

bold

italic

900

Question No. 132

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

inline

outset

stroke

inset

Question No. 133

To create more space within a CSS3 button use:

cell-padding

margin

cell-spacing

padding

Question No. 134

Is ::first-line a pseudo-element?

True

False

Question No. 135

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

Question No. 136

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

letter-spacing

align-right

word spacing

padding

Question No. 137

Whether or not a browser accepts a styling is called:

browser sniffing

browser support

deprecated code

hack

Question No. 138

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

change the background color for each even numbered li tag

combine two li tags on one line

change the background color for each odd numbered li tag

make the background color red

Question No. 139

What would a:link be an example of?

none of these

pseudo-class

p tag

iteration

Question No. 140

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

display:block

display:table

display:column

display:row

Question No. 141

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

Question No. 142

Webkit has it’s own prefix and works in:

Safari

Webkit browsers only

All the browsers

Question No. 143

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

Cannot be done with CSS3

input:hidden

input:disabled

input:not('active')

input:readonly

Question No. 144

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;)

Question No. 145

What is the vendor prefix for internet explorer?

-mz-

-ie-

-moz-

-ms-

Question No. 146

Is @keyframes an method of animations in CSS3?

Yes

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

Question No. 147

With the emergence of CSS3, CSS2 has become:

useless

destandarized

none of these

defunct

Question No. 148

How would you set a background image to not repeat?

div { background-image: no-repeat; }

div { background-repeat: no-repeat; }

Question No. 149

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

fade

blur

sharp

fadeout

Question No. 150

To specify the character encoding in an external stylesheet use:

@charset

@media

!Important

@import

Question No. 151

To turn text into all uppercase, use:

uppercase:

text-transform:

capitalize:

any of these

shout:

Question No. 152

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

print only

all browsers as well as print

all media devices except print

none of these

Question No. 153

What is the shorthand version of the CSS3 property transition?

trans: property length effect speed

transition-effect: attribute time swing count

transition: attribute length effect speed

transition: property duration timing-function delay

Question No. 154

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

shifted downward

overlapping

hidden

shifted upward

Question No. 155

__________ positioned boxes are taken out of the normal flow.

Relative

Static

Absolute

Normal

Question No. 156

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

Both answers are correct.

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

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

Question No. 157

We write single __________ before the pseudo-class property.

colon

dot

hash

semi-colon

Question No. 158

Which is a recognized media type?

All of these

screen

handheld

speech

Question No. 159

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

All except Safari

Yes

All except Internet Explorer

Question No. 160

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 3D transforms (for 2D with Z axis set to 0)

Use CSS Animations (exclusively)

Use display:hw-accelerated

Question No. 161

Which CSS3 attribute is not correct

scale()

matrix()

slide()

all are right

translate()

Question No. 162

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

True

False

Question No. 163

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

@media_query {alt:?}

img:not([alt])

find{alt}

Question No. 164

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

Button file

Hover state

Tag name

URL

Question No. 165

Which is new css3 property?

background-repeat

background-size

background-position

background-image

background-color

Question No. 166

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

Capitalize all letters

This wouldn't do anything

Capitalize the first letter of every word

Question No. 167

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

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

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

You can't do that with CSS

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

Question No. 168

What is Responsive Web Design (RWD) with relation to CSS3?

Responsive web design is to create web sites that look good on all devices.

Responsive web design is not for mobile devices.

Responsive web design is a JavaScript program.

Thanks for going through the post. If it was helpful then please like, tweet and share the post among the social media sites to appreciate my effort and induce me to write more of such post.

Shahriar Kabir

Viral Pulse

Search This Blog

CSS3 Questions & Answers | Guaranteed Good Score