oDesk CSS Test Answers

Odesk Css Test Solution

Question: 1

Which of the following is true for a class selector?

a. It uses a hash as the separator symbol

b. It applies the style to only the first element defined with that style

c. It applies the style to only the last element defined with that style

d. It applies the style to all the elements defined with that style (Answer)

Question: 2

Which of the following does not apply to external styles?

a. Clean separation of design & content

b. Minimal code duplication

c. Highest priority (Answer)

d. Reduces page download time

Question: 3

Read the following Code:

BODY {

Background: white url(“bar.gif”);

Background-repeat: repeat-y;

Background-position: center;

}

What will be the output of this code?

a. Image bar.gif will be tiled vertically in the background in the center of the page. (Answer)

b. Image bar.gif will be tiled horizontally in the background in the center of the page

c. Image bar.gif will be displayed in the center of the page

d. Image bar.gif will be stretched in the center of the page

Question: 4

Which of the following is not a valid text-decoration option?

a. Text-decoration :line-through

b. Text-decoration :in-line (Answer)

c. Text-decoration :overline

d. Text-decoration :underline

e. Text-decoration :none

Question: 5

You defined some links as follows:

A:link{color:green}

A:visited{color:blue}

A:hover{color:red)

A:active{color:black}

What will be the color, when the mouse goes over a link?

a. Green

b. Blue (Answer)

c. Red

d. Black

Question: 6

The following is a style definition:

Td#aln

{text-align:center;

color:blue}

How will you refer to this style in your web page?

 A. by using the class attribute in a td cell

 B. by using the id Attribute in a td cell (Answer)

C. by using the class attributes in any html element which supports the class attribute

D. by using the id attributes in any html element which support the id attribute

Question: 7

Which of the following is not a valid property of an aural style sheet?

a. Cue

b. Voice-family

c. Load (Answer)

d. Speak

Question: 8

Your website displays some articles on java programming. The articles contain blocks of java code as well. If you want to leave ‘1 cm’ space above and below the code blocks, you would use:

a. Code{margin:1cm}

b. Code{margin-top:1cm; margin-bottom:1cm} (Answer)

c. P{margin:1cm}

d. P{margin-top:1cm; margin-bottom:1cm}

Question: 9

 Text text text text

 A      Text text

 Sentence text text

  Inside text text

  A         text ext

  Text     text text

  Text text

  Text text text text

You have and article of 100 lines. If for instance, you want to describe the theme with a few lines inside the text highlighted separately as show in the image which of the following property will you use?

a. Outline

b. Display

c. Float

d. Merge

Question: 10

You are fetching customer names from a database. The names in the database are mostly in lowercase. What is the name of the text property which will facilitate capitalization of these names?

a. Text-mode

b. Text-transform (Answer)

c. Text-decoration

d. Text-shadow

e. Text-case

Question: 11

Here is one of the styles defined in your webpage:

.redborder

{

border-color:#ff0000;

border-width:thin thick

}

What type of border will be displayed if one of the paragraphs defined in the webpage uses this style?

a. This will display a red border with thin top and bottom

b. This will display a red border with thick top and bottom

c. This will display a red border with thick left and right

d. This will not display any border

Question: 12

Which of the following are correct values of the overflow property?

a. Visible (Answer)

b. Hidden (Answer)

c. Scroll (Answer)

d. Auto (Answer)

Question: 13

Which of the following is correct?

a. Blockquote{text-padding:2em 4em 5em}

b. Blockquote{padding-x:2em 4em 5em}

c. Blockquote{padding-y:2em 4em 5em}

d. Blockquote{padding:2em 4em 5em}

Question: 14

Which element property is required to define internal styles?

a. Class

b. Style (Answer)

c. span

d. link

Question: 15

Which style property can be used to display only some part of an image?

a. Snap

b. Clip

c. Scroll

d. Visible

Question: 16

Which of the following is not true for a style sheet?

a. A style sheet defines how an html element will be displayed (Answer)

b. Internal and external style sheets can not be used together

c. Multiple style definitions will cascade into one

d. The same style sheet can be used by many html pages

Question: 17

Which of the following font properties deals with aspect value?

a. Font-weight

b. Font-variant

c.  Font-size-adjust

d. Font-size

Question: 18

Consider this style definition:

P i{color:red}

What do you understand about the contextual selector used above?

a. All the text within a paragraph will be italicized

b. All the italic text in the page will have red color

c. All the page text under tag and tag will be red

d. All the italic text with in a paragraph will be red

Question: 19

Background-position sets the position of the background image what happens if its value is 0% 0%?

a. Image will have zero width and height so it will be hidden.

b. Image will be positioned at the upper left corner.

c. Image will be positioned at the lower right corner

d. None of the above

Question: 20

You want to increase the space between the lines in all you paragraphs. What will you use?

a. P{width:1cm}

b. P{height: 1cm}

c. P{line-height:1cm} (Answer)

d. P{line-width:1cm}

Question: 21

The default value for the overflow property is:

a. Scroll

b. Visible

c. Hidden (Answer)

d. Auto

Question: 22

Which of the following will set the page size to 8.5 inches x 11 inches with 2cm margin al all sides?

a. @page {width:8.5in;Height:11in; margin:2cm}

b. @page {width:8.5in x 11in; margin:2cm}

c. @page {size:8.5in 11in; margin:2cm}

d.  @page {size:8.5in 11in; margin:2cm}

Question: 23

Which of the following is not a valid list property?

a. List-style-type

b. List-style-position

c. List-style-image

d. List-style-align

Question: 24

Which of the following is not a pseudo class?

  a. Link

  b. Active

  c.  Lang

  d.  Ins

Question: 25

Which of the following Statement is correct?

a. When using css, positioning can be absolute, relative or dynamic

b. The float Property for text/images can be left, right or center

c. The values of visibility can be true or False

d. The display Property sets how an element is displayed

Question: 26

The Font “Times New Roman” has an aspect value of 0.46 .What do you understand from this?

a. When font size is set to 46px. The height of the letter ‘x’ will be 100px

b. When font size is set to 100px. The height of the letter ‘x’ will be 46px

Question: 27

The font-family property is used to specify a:

a. Family name

b. Generic Family

c. Family name and /or generic Family

Question: 28

Paged media differ from continuous media in that the content of the document is divided into one or more pages. When you set the dimensions, which of the following will be applied?

a. The dimensions of the page area are the dimensions of the page box minus the margin area

b. The dimensions of the page area are the dimensions of the page box plus the margin area

c. The dimensions of the page area are the dimensions of the page box and margin area does not affect it.

d. None of the above

Question: 29

Which of the following is not a correct keyword value for the display property?

  a. Expended

  b. Inline-table

  c. Table-row

   d. Table-column-group

Question: 30

Which of the following properties specifies the minimum number of lines of a paragraph that must be left at the bottom of a page?

a. Orphans

b. Widows

c. Bottom

d. Overflow

e. None of the above

Question: 31

Which of the following is correct with regard to comments in a style sheet?

a. Comments can appear outside the style definition only

b. Comments start with//

c. Comments end with */

d. Comments are not permitted in a style sheet

Question: 32

Which of the following border styles is not correct?

a. Border-style: ridge

b. Border-style : outset

c. Border-style : dotted

d. Border – style : matted

Question: 33

How will you display text as a superscript?

a. Vertical-align: super

b. Vertical-align: superscript

c.  Vertical-align : top

Question: 34

The following is a style definition:

#styl2

{

Color: red;

}

How will you refer to this style in you web pages?

a. By using the class attribute in a td cell

b. By using the id attribute in a td cell

c. By using the class attribute in any html element which supports the class attribute

d. By using the id attribute in any html element which supports the id attribute.

Question: 35

Which of the following is true for an ID selector?

a. It uses a dot as the separator symbol

b. It applies the style to only the first element defined with that selector

c. It applies the style to only the last elements defined with that selector

d. It applies the style to all the elements defined with that selector

Question: 36

Which of the following values are correct for Font-style?

a. Normal, wider, narrower

b. Normal , italic, oblique

c. Normal, bold, lighter

d. Small , medium , large

Question: 37

Can a percentage value be given in a ruby-align property?

b) No (Answer)

Question: 38

Consider the following code snippet:

<div id=”sectors”>
<div id=”A” class=”A”></div>
<div id=”B” class=”B”></div>
<div id=”C” class=”C”></div>
<div id=”D” class=”D”></div>
<div id=”E” class=”E”></div>
</div>
With these style rules:
<style>
#sectors > div {
float: left;
position: relative;
width: 80px;
height: 80px;
margin: 16px;
background-color:red; color: white;
text-align: center;
}
#sectors > div::after {
content: attr(id) ‘-Block';
}
#sectors > div.changecolor {
background-color: blue;
}
</style>

Which of the following code snippets when inserted into CSS will change the A and B div’s color from red to blue ?

a) In style rule add this code “#sectors > div:not(.C):not(.D):not(.E) {background-color: blue;}” (Answer)

Question: 39

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?

a) border: 1px solid rgba(255, 0, 0, 0.7); (Answer)

Question: 40

Consider the following code:

div[class^=”stronger”] { }
{em
…
}

Which of the following statements is true?

a) It applies the rule only on divs who belong to a class that begins with “stronger”. (Answer)

Question: 41

Consider the following font definition:

font-weight:normal

What is the other way of getting the same result?

c) font-weight:400 (Answer)

Question: 42

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?

c) input[type=”radio”]:checked+label{ font-weight: bold; } (Answer)

Question: 43

For the clear property, which of the following value is not valid?

d) top (Answer)

Question: 44

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

a) On active state the element is displayed. (Answer)

Question: 45

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?

a) border-bottom:5px solid #ffffff;
-webkit-box-shadow: 0px 5px #000000;
-moz-box-shadow: 0px 5px #000000;
box-shadow: 0px 5px #000000;

b) -webkit-box-shadow: 0 4px 4px -2px #000000;
-moz-box-shadow: 0 4px 4px -2px #000000;
box-shadow: 0 4px 4px -2px #000000; (Answer)

Question: 46

Is it possible to combine a background image and CSS3 gradients?

b) It is possible only when “background-image” is used. (Answer)

Question: 47

Is it possible to use transition animations with a gradient background?

b) No (Answer)

Question: 48

Is there a way to create a pure CSS3 text color gradient?

c) There is no way to do a text color gradient with CSS3. (Answer)

uestion: 49

Read the following:

@page rotated {size: landscape}
TABLE {page: rotated; page-break-before: right}

What will this code do?

a) It will put all tables on a right-hand side landscape page. (Answer)

Question: 50

State whether the following statement is true or false.

If a parent element display property is set to none, its children too will not be rendered.

a) True (Answer)

Question: 51
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;
}

d) The background color of every third td will be orange. (Answer)

Question: 52

The min-width property cannot be applied to the following element:

c) table row (Answer)

Question: 53

There are various types of input fields in a HTML page. Choose the appropriate CSS3 code which will have an
effect on all inputs, except checkbox and radio.

b) input:not([type=”radio”]):not([type=”checkbox”]) {
} (Answer)

Question: 54

To apply style on every input element except text, which of the following selectors should be used?

b) input:not([type=”text”]) (Answer)

Question: 55

Using height on transitions is not possible with:

a) height:auto (Answer)

Question: 56

What is the best method to select all elements except for the last one in an unordered list?

b) Using li:not(:last-child) css selector (Answer)

Question: 57

What is the default value of the animation-direction property?

b) normal (Answer)

Question: 58

What is the default value of the transform-style property?

b) flat (Answer)

Question: 59

What is the difference between float:left; vs display:inline-block; ?

b) display:inline-block; adds whitespace between the elements.

c) float:left; collapses the parent element on itself. (Answer)

Question: 60

What is the initial value of the animation-iteration-count property?

a) 1 (Answer)

Question: 61

What is the initial value of the font-size property?

b) medium (Answer)

Question: 62

What is the initial value of the marquee-speed property?

b) normal (Answer)

Question: 63

What is the initial value of the opacity property?

a) 1 (Answer)

Question: 64

What is the maximum value that can be given to the voice-volume property?

b) 100 (Answer)

Question: 65

What is the range of values (in decimal notation) that can be specified in the RGB color model?

b) 0 to 255 (Answer)

Question: 66

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</div>

c. The border of div element will be colored black-red. (Answer)

Question: 67

What will be the output of the following rule?

em { color: rgba(0,0,255,1) }

d) Opacity 1 with solid blue color (Answer)

Question: 68

What will happen if the cursor property value is set to none?

b) No cursor will be displayed. (Answer)

Question: 69

Which of the following are not valid values for the target-new property?

d) parent (Answer)
e) current (Answer)

Question: 70

Which of the following can be used to add a shadow around the div element below?
<div>Lorem ipsum</div>

a) box-shadow: 0 0 8px 2px #888; (Answer)

Question: 71

Which of the following filters does SVG support?

b) SVG supports CSS filters as well as ‘filter’ property of SVG (Answer)

Question: 72

Which of the following is not a valid page break?

b) page-break-outside (Answer)

Question: 73

Which of the following is not a valid value for the font-smooth property?

d) normal (Answer)

Question: 74

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

c) semi-narrower (Answer)

Question: 75

Which of the following is the initial value for the column-fill property?

b) balance (Answer)

Question: 76

Which of the following option does not exist in media groups available in CSS3?

d) braille or screen (Answer)

Question: 77

Which of the following properties allow percentages in their value fields?

a) font-size (Answer)

Question: 78

Which of the following statements is true with regard to CSS3 transitions?

d) None of these (Answer)

Question: 79

Which of the following styles is not valid for an image?

e) All of the above (Answer)

Question: 80

Which of the following styles is valid?

e) None of these (Answer)

Question: 81

Which of the following will apply a black inner glow with 25% opacity to a page element?

a) box-shadow: 0 0 8px rgba(255,255,255, 0.25); (Answer)
b) box-shadow: inset 0 0 8px rgba(0,0,0, 0.25); (Answer)

Question: 82

Which of the following will apply a gradient transition to #DemoGradient using CSS3?

b) #DemoGradient{
background: -webkit-linear-gradient(#C7D3DC,#5B798E);
background: -moz-linear-gradient(#C7D3DC,#5B798E);
background: -o-linear-gradient(#C7D3DC,#5B798E);
background: linear-gradient(#C7D3DC,#5B798E);

-webkit-transition: background 1s ease-out;
-moz-transition: background 1s ease-out;
-o-transition: background 1s ease-out;
transition: background 1s ease-out;

background-size:1px 200px;
border-radius: 10px;
border: 1px solid #839DB0;
cursor:pointer;
width: 150px;
height: 100px;
}
#DemoGradient:Hover{
background-position:100px;
}

Question: 83

Which of the following will create a triangle effect using pure CSS3 on a white background, without making use
of background images?

b) border-color: #a0c7ff #ffffff #ffffff #ffffff;
border-style: solid;
border-width: 20px;
width: 0px;
height: 0px; (Answer)

Question: 84

Which of the following will decrease 50px from a DIV element whose width is 100%?

a) width: calc(100% – 50px); (Answer)

Question: 85

Which of the given options is/are equivalent to the following rule?

DIV { line-height: 1.2; font-size: 10pt }

a) DIV { line-height: 1.2em; font-size: 10pt } (Answer)

c) DIV { line-height: 120%; font-size: 10pt } (Answer)

Question: 86

Which one of the following is appropriate to mirror/flip text by using CSS3?

a) .mirror_text{
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: “FlipH”;
} (Answer)

Question: 87

Which statement is correct given the following?
box-shadow:30px 20px 10px 5px black;

c) 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. (Answer)

Question: 88

While rendering the following code, what is the role of “src” propery?

@font-face {
font-family: “calibriforh1″;
src: local(“calibri”), url(calibri.woff);
}
h1 { font-family: “calibriforh1″, arial, sans-serif; }

a) It’s for searching the user’s system for a “calibri” font, and if it does not exist, it will load the font from the server instead. (Answer)