Saturday, December 3, 2022
HomeFiverrFiverr CSS 3 Test Answer 2022

Fiverr CSS 3 Test Answer 2022

CSS 3 Test

Test Syllabus

  • Fundamentals
  • Basic styles
  • Basic user interface
  • Colour styles
  • Text and style attribute syntax
  • Selectors
  • Page media
  • Speech and ruby
  • 2d, 3d and animation
  • Font styles
  • Miscellaneous

Duration

  • 40 minutes

Questions

  • 40 multiple-choice questions.

Instructions

  • Each question has between 2 and 8 options; one or more may be correct.
  • There is no penalty for guessing if you don’t know the answer; therefore, make sure you attempt all of the questions.
  • To pass, you will need to answer at least 60% of the questions correctly.
  • The clock timing of your test is located at the top of the test window.
  • This test is best viewed using Internet Explorer version 11.0 or higher or Mozilla Firefox 45.0 or higher or Google Chrome 48 or higher.
  • Questions will be displayed one at a time. A next button is provided at the bottom of the test page for navigating to the next question. Do not press the next button if you have not answered the question.
  • Once you have answered a question, you cannot go back and change your answer.
  • Do not use the shortcut menu options (mouse right-click) or the keyboard for navigating backwards or forwards within the test.
  • There is a 1 day waiting period between test retakes. You can only take a test twice in a three months time window.

1. 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 colour from red to blue?

  1. In style rule add this code “#sectors > div:not(.C):not(.D):not(.E) {background-color: blue;}”
  2. In style rule add this code “#sectors > div:not(.C, .D, .E) {background-color: blue;}”
  3. Both A and B
  4. None of the above

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

  1. It is not possible to do so.
  2. border-color: #a0c7ff #ffffff #ffffff #ffffff; border-style: solid; border-width: 20px; width: 0px; height: 0px;
  3. background-color: #a0c7ff #ffffff #ffffff #ffffff; border-style: solid; border-width: 20px; width: 0px; height: 0px;
  4. background-color: #a0c7ff #ffffff #ffffff #ffffff; border-style: solid; border-width: 1px; width: 10px; height: 10px;

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

  1. Yes
  2. No

4. Consider the following font definition:

font-weight:normal

What is the other way of getting the same result?

  1. font-weight:100
  2. font-weight:900
  3. font-weight:400
  4. font-weight:700

5. Consider the following code:

div[class^=”stronger”] { }

{em

}

Which of the following statements is true?

  1. It applies the rule only to divs who belong to a class that begins with “stronger”.
  2. It applies the rule only on divs of class “stronger”.
  3. It applies the rule only to divs who belong to a class which ends with “stronger”.
  4. It applies the rule only to divs who belong to a class which does not contain “stronger” in its name.

6. For the clear property, which of the following values is not valid?

  1. none
  2. left
  3. right
  4. top

7. 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>

  1. The text “Lorem” will be coloured black-red.
  2. The div element will be coloured black-red.
  3. The border of the div element will be coloured black-red.
  4. None of these.

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

  1. auto
  2. never
  3. always
  4. normal
  5. length

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

  1. continuous or paged
  2. visual or tactile
  3. grid or bitmap
  4. braille or screen

10. Which of the following is not a valid page break?

  1. page-break-inside
  2. page-break-outside
  3. page-break-before
  4. page-break-after
  5. None of these

11. Which statement is correct given the following?

box-shadow:30px 20px 10px 5px black;

  1. The shadow will be spread out to 30px top, 20px right, 10px bottom, 5px left.
  2. 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 the size of the shadow is 5px.
  3. The position of the vertical black shadow is 30px and the position of the horizontal black shadow is 20px and size of the shadow is 10px and the blur distance is 5px.
  4. The shadow will be spread out to 30px top and bottom, 20px left and right with 10px blur distance, 5px shadow size.

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

  1. button
  2. span
  3. table row

13. 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?

  1. border-bottom:5px solid #ffffff; -WebKit-box-shadow: 0px 5px #000000; -Moz-box-shadow: 0px 5px #000000; box-shadow: 0px 5px #000000;
  2. -WebKit-box-shadow: 0 4px 4px -2px #000000; -Moz-box-shadow: 0 4px 4px -2px #000000; box-shadow: 0 4px 4px -2px #000000;
  3. -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;
  4. None of these.

14. 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 a cafe

  1. Cindy lives behind cafe
  2. candy lives behind cafe
  3. andy lives behind a cafe
  4. andy lives behind bafe

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

  1. preserve-3d
  2. flat
  3. none
  4. preserve

16. 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>

  1. The text “Lorem” will be coloured black-red.
  2. The div element will be coloured black-red.
  3. The border of the div element will be coloured black-red.
  4. None of these.

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

  1. img { float= left }
  2. img { float: left here }
  3. img { background: “black” }
  4. img { border-width: 10 }
  5. All of the above

18. 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;

}

  1. It returns a syntax error.
  2. The background colour of the fourth will be orange.
  3. The background colour of the third td will be orange.
  4. The background colour of every third td will be orange.

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

  1. Adding a class to each <li> element but last
  2. Using li:not(:last-child) CSS selector
  3. Using li:last-child selector
  4. None of the above

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

  1. box-shadow: 0 0 8px rgba(255,255,255, 0.25);
  2. box-shadow: inset 0 0 8px rgba(0,0,0, 0.25);
  3. box-shadow: 0 0 8px rgba(255,255,255, 25%);
  4. box-shadow: inset 0 0 8px rgba(0,0,0, 25%);

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

  1. auto
  2. balance
  3. none

22. Which of the following can be used to add a shadow around the div element below?

<div>Lorem ipsum</div>

  1. box-shadow: 0 0 8px 2px #888;
  2. border-shadow: 0 0 8px 2px #888;
  3. div-shadow: 8px 2px 0 0 #888;
  4. None of these

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

  1. width: calc(100% – 50px);
  2. width: reduce(100% – 50px);
  3. width: decrease(100% – 50px);
  4. width: 100% – 50px;

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

  1. orphans
  2. widows
  3. bottom
  4. overflow
  5. None of these

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

  1. 10
  2. 100
  3. 500
  4. None of the above

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

  1. small
  2. medium
  3. large
  4. default

27. Is there a way to create a pure CSS3 text colour gradient?

  1. Yes, using the text-gradient property.
  2. Yes, but only for headings.
  3. There is no way to do a text colour gradient with CSS3.
  4. None of the above.

28. 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?

  1. border: 1px solid rgba(255, 0, 0, 0.7);
  2. border: 1px solid rgb(255, 0, 0, 0.7);
  3. border: 1px solid rgba(255, 255, 0, 0.7);
  4. border: 1px solid red; opacity: 0.7;

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

  1. 1
  2. 5
  3. None

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

  1. none
  2. normal
  3. alternate
  4. inherited

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

  1. It is possible only when two separate styles are used, “background-image” and “gradient”, on an HTML tag.
  2. It is possible only when “background-image” is used.
  3. It is possible only when layered HTML tags are used, “background-image” and “gradient”.
  4. It is not possible to combine a background image and CSS3 gradients.

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

  1. The default cursor will be displayed.
  2. No cursor will be displayed.
  3. A pointer cursor will be displayed.
  4. A text cursor will be displayed.

33. What will be the outcome of the given code?

div[class^=”stronger”] { }

{

}

  1. It applies the rule only to divs who belong to a class that begins with “stronger”.
  2. It applies the rule only on divs of class “stronger”.
  3. It applies the rule only to divs who belong to a class which ends with “stronger”.
  4. It applies the rule only to divs who belong to a class which does not contain “stronger” in its name.

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

  1. input:([!type=’text’])
  2. input:not([type=”text”])
  3. input:not([type!=”text”])
  4. input:([type!=’text’])

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

  1. none
  2. left
  3. right
  4. top

36. Read the following:

@page rotated {size: landscape}

TABLE {page: rotated; page-break-before: right}

What will this code do?

  1. It will put all tables on a right-hand side landscape page.
  2. It will rotate the page if the table is positioned on the right side.
  3. It will keep the table in the landscape position and rotate the page.
  4. None of the above

37. What is the initial value of the opacity property?

  1. 1
  2. normal
  3. none

38. 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.

  1. True
  2. False

39. Which of the following filters does SVG support?

  1. SVG supports only CSS filters.
  2. SVG supports CSS filters as well as the ‘filter’ property of SVG
  3. SVG supports only the ‘filter’ property of SVG
  4. SVG does not support any filters

40. What will happen if the pause property is used as follows?

h2 { pause: 40s 60s }

  1. pause-before will be set to 40 seconds and pause-after will be set to 60 seconds.
  2. pause-after will be set to 40 seconds and pause-before will be set to 60 seconds.
  3. pause-after and pause-before will be set to 40 seconds.
  4. pause-after and pause-before will be set to 60 seconds.
RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments