Hi oDesk Freelancer, Today I am sharing with you ODesk CSS Test Answers. Get update ODesk CSS Test Answers 2014 from this website.So, Friends enjoy this post. If you have another information about this test answer. Please post a comment and share your experience with us.
1. Can a percentage value be given in a ruby-align property?
Answer: No
__________________________________________________________________________
2. Consider the following code snippet:
<div id=”sectors”>Which of the following code snippets when inserted into CSS will change the A and B div’s color from red to blue ?
<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>
Answer: In style rule add this code “#sectors > div:not(.C):not(.D):not(.E) {background-color: blue;}”
__________________________________________________________________________
3. 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?
Answer: border: 1px solid rgba(255, 0, 0, 0.7);
__________________________________________________________________________
4. Consider the following code:
div[class^="stronger"] { }Which of the following statements is true?
{em
…
}
Answer: It applies the rule only on divs who belong to a class that begins with “stronger”.
__________________________________________________________________________
5. Consider the following font definition:
font-weight:normalWhat is the other way of getting the same result?
Answers: font-weight:400
__________________________________________________________________________
6. 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?
Answer: input[type="radio"]:checked+label{ font-weight: bold; }
__________________________________________________________________________
7. For the clear property, which of the following value is not valid?
Answer: top
__________________________________________________________________________
8. For the clear property, which of the following values is not valid?
Answer: top
__________________________________________________________________________
9. 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 {Answer: On active state the element is displayed.
display: none;
-webkit-transition: opacity 1s ease-out;
opacity: 0;
}
div.active {
opacity: 1;
display: block;
}
__________________________________________________________________________
10. 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;However, this produces shadows on the rest of the element.
-webkit-box-shadow: 0px 4px 4px #000;
box-shadow-bottom: 5px #000;
Which of the following code snippets will correct the issue?
Answer: -webkit-box-shadow: 0 4px 4px -2px #000000;
-moz-box-shadow: 0 4px 4px -2px #000000;
box-shadow: 0 4px 4px -2px #000000;
__________________________________________________________________________
11. Is it possible to combine a background image and CSS3 gradients?
Answer: It is possible only when “background-image” is used.
__________________________________________________________________________
12. Is it possible to use transition animations with a gradient background?
Answer: No
__________________________________________________________________________
13. Is there a way to create a pure CSS3 text color gradient?
Answer: There is no way to do a text color gradient with CSS3.
__________________________________________________________________________
14. Read the following:
@page rotated {size: landscape}What will this code do?
TABLE {page: rotated; page-break-before: right}
Answer: It will put all tables on a right-hand side landscape page.
__________________________________________________________________________
15. 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.
Answer: True
__________________________________________________________________________
16.
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;
}
Answer: The background color of every third td will be orange.
__________________________________________________________________________
17. The min-width property cannot be applied to the following element:
Answer: table row
__________________________________________________________________________
18. 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.
Answer: input:not([type="radio"]):not([type="checkbox"]) {
}
__________________________________________________________________________
19. To apply style on every input element except text, which of the following selectors should be used?
Answer: input:not([type="text"])
__________________________________________________________________________
20. Using height on transitions is not possible with:
Answer: height:auto
__________________________________________________________________________
21. What is the best method to select all elements except for the last one in an unordered list?
Answer: Using li:not(:last-child) css selector
__________________________________________________________________________
22. What is the default value of the animation-direction property?
Answer: normal
__________________________________________________________________________
23. What is the default value of the transform-style property?
Answer: flat
__________________________________________________________________________
24. What is the difference between float:left; vs display:inline-block; ?
Answer: float:left; collapses the parent element on itself.
Answer: display:inline-block; adds whitespace between the elements.
__________________________________________________________________________
25. What is the initial value of the animation-iteration-count property?
Answer: 1
__________________________________________________________________________
26. What is the initial value of the font-size property?
Answer: medium
__________________________________________________________________________
27. What is the initial value of the marquee-speed property?
Answer: normal
__________________________________________________________________________
28. What is the initial value of the opacity property?
Answer: 1
__________________________________________________________________________
29. What is the maximum value that can be given to the voice-volume property?
Answer: 100
__________________________________________________________________________
30. What is the range of values (in decimal notation) that can be specified in the RGB color model?
Answer: 0 to 255
__________________________________________________________________________
31. What will be the outcome of given code?
div[class^="stronger"] { }
{
…
}
Answer: It applies the rule only on divs who belong to a class that begins with “stronger”.
__________________________________________________________________________
32. What will be the output of the following code?
…Answer:The border of div element will be colored black-red.
<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>
__________________________________________________________________________
33. 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>
Answer: The border of div element will be colored black-red.
__________________________________________________________________________
34. 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>
Answer: The border of div element will be colored black-red.
__________________________________________________________________________
35. What will be the output of the following rule?
em { color: rgba(0,0,255,1) }Answer: Opacity 1 with solid blue color
__________________________________________________________________________
36.What will happen if the cursor property value is set to none?
Answer: No cursor will be displayed.
__________________________________________________________________________
37. What will happen if the pause property is used as follows?
h2 { pause: 40s 60s }Answer: pause-before will be set to 40 seconds and pause-after will be set to 60 seconds.
__________________________________________________________________________
38. Which of the following are not valid values for the target-new property?
Answer: d) parent
e) current
__________________________________________________________________________
39.Which of the following can be used to add a shadow around the div element below?
<div>Lorem ipsum</div>
Answer: box-shadow: 0 0 8px 2px #888;
__________________________________________________________________________
40. Which of the following filters does SVG support?
Answer: b) SVG supports CSS filters as well as ‘filter’ property of SVG
__________________________________________________________________________
41. Which of the following is not a valid page break?
Answer: b) page-break-outside
__________________________________________________________________________
42.Which of the following is not a valid value for the font-smooth property?
Answer: d) normal
__________________________________________________________________________
43.Which of the following is not a valid value for the font-stretch property?
Answer: c) semi-narrower
__________________________________________________________________________
44.Which of the following is the initial value for the column-fill property?
Answer: b) balance
__________________________________________________________________________
45.Which of the following option does not exist in media groups available in CSS3?
Answer: d) braille or screen
__________________________________________________________________________
46.Which of the following properties allow percentages in their value fields?
Answer: a) font-size
__________________________________________________________________________
47.Which of the following properties specifies the minimum number of lines of a paragraph that must be left at the bottom of a page?
Answer: a) orphans
__________________________________________________________________________
48.Which of the following statements is true with regard to CSS3 transitions?
Answer: d) None of these
__________________________________________________________________________
49. Which of the following styles is not valid for an image?
Answer: e) All of the above
__________________________________________________________________________
50. Which of the following styles is valid?
Answer: e) None of these
__________________________________________________________________________
51. Which of the following will apply a black inner glow with 25% opacity to a page element?
Answer: a) box-shadow: 0 0 8px rgba(255,255,255, 0.25);
b) box-shadow: inset 0 0 8px rgba(0,0,0, 0.25);
__________________________________________________________________________
52. Which of the following will apply a gradient transition to #DemoGradient using CSS3?
Answer: 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;
}
__________________________________________________________________________
53. Which of the following will create a triangle effect using pure CSS3 on a white background, without making use of background images?
Answer: b) border-color: #a0c7ff #ffffff #ffffff #ffffff;
border-style: solid;
border-width: 20px;
width: 0px;
height: 0px;
__________________________________________________________________________
54. Which of the following will decrease 50px from a DIV element whose width is 100%?
Answer: a) width: calc(100% – 50px);
__________________________________________________________________________
55. Which of the given options is/are equivalent to the following rule?
DIV { line-height: 1.2; font-size: 10pt }Answer: a) DIV { line-height: 1.2em; font-size: 10pt }
c) DIV { line-height: 120%; font-size: 10pt }
__________________________________________________________________________
56. Which one of the following is appropriate to mirror/flip text by using CSS3?
Answer: a) .mirror_text{
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: “FlipH”;
}
__________________________________________________________________________
57. Which statement is correct given the following?
box-shadow:30px 20px 10px 5px black;
Answer: 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.
__________________________________________________________________________
58. While rendering the following code, what is the role of “src” propery?
@font-face {Answer: 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.
font-family: “calibriforh1″;
src: local(“calibri”), url(calibri.woff);
}
h1 { font-family: “calibriforh1″, arial, sans-serif; }
____________
0 comments:
Post a Comment