> > CSS 3 MCQs > Basic CSS 3 MCQs

Basic CSS 3 MCQ

1. Can you add a dropdown menu inside a navigation bar using CSS 3 dropdowns?

Yes

Answer

Correct Answer: Yes

Note: This Question is unanswered, help us to find answer for this one

2. Choose True or False.

The CSS 3 box model permits you to add a border around elements and also to define space between the elements.

True

False

Answer

Correct Answer: True

Note: This Question is unanswered, help us to find answer for this one

3. The CSS box model consists of which of the following options?

1. Margin
2. Padding
3. Content

All 1, 2, and 3

Only 1 and 2

Only 1 and 3

Only 2 and 3

Answer

Correct Answer: All 1, 2, and 3

Note: This Question is unanswered, help us to find answer for this one

4. Consider the following font definition:

font-weight:normal

What is the other way of getting the same result?

font-weight:100

font-weight:900

font-weight:400

font-weight:700

Answer

Correct Answer: font-weight:400

Note: This Question is unanswered, help us to find answer for this one

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

cue

voice-family

loud

speak

All of the above are valid.

Answer

Correct Answer: All of the above are valid.

Note: This Question is unanswered, help us to find answer for this one

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

auto

balance

none

Answer

Correct Answer: balance

Note: This Question is unanswered, help us to find answer for this one

7. Which of the following properties doesn't take up space?

outline

border

Both a and b

Answer

Correct Answer: outline

Note: This Question is unanswered, help us to find answer for this one

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

100

500

None of the above

Answer

Correct Answer: 100

Note: This Question is unanswered, help us to find answer for this one

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

page-break-inside

page-break-outside

page-break-before

page-break-after

None of the above

Answer

Correct Answer: page-break-outside

Note: This Question is unanswered, help us to find answer for this one

10. Which of the following value of the white-space property will set the value of white-space-collapse to "preserve" and value of the text-wrap to "none"?

normal

pre

nowrap

pre-wrap

pre-line

Answer

Correct Answer: pre

Note: This Question is unanswered, help us to find answer for this one

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

normal

none

Answer

Correct Answer: 1

Note: This Question is unanswered, help us to find answer for this one

12. What is the default value of the transform property in CSS3?

50% 50%

0% 0%

100% 100%

none

Answer

Correct Answer: none

Note: This Question is unanswered, help us to find answer for this one

13. Which of the following option does NOT exist in media groups available in CSS3?

continuous or paged

visual or tactile

grid or bitmap

braille or screen

Answer

Correct Answer: braille or screen

Note: This Question is unanswered, help us to find answer for this one

14. The sans-serif generic font-family is characterized by:

finish strokes, flared or tapering ends, or actual serifed endings.

stroke endings that are plain without any flaring, cross stroke, or other ornamentation.

either join strokes or other cursive characteristics beyond those of italic typefaces.

primarily decorate the characters while still containing their representations.

Answer

Correct Answer: stroke endings that are plain without any flaring, cross stroke, or other ornamentation.

Note: This Question is unanswered, help us to find answer for this one

15. What effect does the following rule have?

div { grid-rows: 4em (0.25em 1em); }

It creates rows with 4em height.

It creates a header row with 4em height and alternative rows with 0.25em width and 1em heights.

It creates a header row with 4em height and alternative rows with 0.25em and 1em heights.

It creates a header row with 4em width and alternative rows with 0.25em width and 1em heights.

Answer

Correct Answer: It creates a header row with 4em height and alternative rows with 0.25em and 1em heights.

Note: This Question is unanswered, help us to find answer for this one

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

img { float= left }

img { float: left here }

img { background: "black" }

img { border-width: 10 }

All of the above

Answer

Correct Answer: All of the above

Note: This Question is unanswered, help us to find answer for this one

17. State whether following statement is true or false.

The RGB color model is hardware-specific while the HSL is symmetrical to lightness and darkness.

True

False

Answer

Correct Answer: True

Note: This Question is unanswered, help us to find answer for this one

18. The color in three digit RGB notation is #fb0. What will be its equivalent six digit color code?

#fb0fb0

#ffbb00

#fbfb00

None of the above

Answer

Correct Answer: #ffbb00

Note: This Question is unanswered, help us to find answer for this one

19. What is the type of the letter-spacing property?

length

number

percentage

integer

Answer

Correct Answer: length

Note: This Question is unanswered, help us to find answer for this one

20. You want to set the image resolution to 300dpi irrespective of the resolution of the image. Which of the following codes will be used?

img { image-resolution: auto };

img { image-resolution: auto, 300dpi };

img { image-resolution: 300dpi };

None of the above

Answer

Correct Answer: img { image-resolution: 300dpi };

Note: This Question is unanswered, help us to find answer for this one

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

None

Answer

Correct Answer: 1

Note: This Question is unanswered, help us to find answer for this one

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

small

medium

large

default

Answer

Correct Answer: medium

Note: This Question is unanswered, help us to find answer for this one

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

Yes

Answer

Correct Answer: No

Note: This Question is unanswered, help us to find answer for this one

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

0 to 256

0 to 255

-250 to 250

-255 to 255

Answer

Correct Answer: 0 to 255

Note: This Question is unanswered, help us to find answer for this one

25. What will happen if the following style declaration is applied to an element?

p { margin: 3em 2em }

The top and the bottom margins will be 3em and the left and the right margins will be 2em.

The top and the bottom margins will be 2em and the left and the right margins will be 3em.

The top and the left margins will be 3em and the bottom and the right margins will be 2em.

The top and the right margins will be 2em and the bottom and the left margins will be 3em.

Answer

Correct Answer: The top and the bottom margins will be 3em and the left and the right margins will be 2em.

Note: This Question is unanswered, help us to find answer for this one

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

slow

normal

fast

none

Answer

Correct Answer: normal

Note: This Question is unanswered, help us to find answer for this one

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

The default cursor will be displayed.

No cursor will be displayed.

A pointer cursor will be displayed.

A text cursor will be displayed.

Answer

Correct Answer: No cursor will be displayed.

Note: This Question is unanswered, help us to find answer for this one

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

none

left

right

top

Answer

Correct Answer: top

Note: This Question is unanswered, help us to find answer for this one

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

True

False

Answer

Correct Answer: True

Note: This Question is unanswered, help us to find answer for this one

30. Which of the following styles is valid?

border: "none";

border= "none";

border: none;

border= none;

None of the above

Answer

Correct Answer: border: none;

Note: This Question is unanswered, help us to find answer for this one

31. Which is new css3 property?

background-repeat

background-size

background-position

background-image

background-color

Answer

Correct Answer: background-size

Note: This Question is unanswered, help us to find answer for this one

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

Answer

Correct Answer: Only if the parent does not establish a local stacking context

Note: This Question is unanswered, help us to find answer for this one

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

cover

repeat

contain

fill

Answer

Correct Answer: contain

Note: This Question is unanswered, help us to find answer for this one

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

True

False

Answer

Correct Answer: False

Note: This Question is unanswered, help us to find answer for this one

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

Answer

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

Note: This Question is unanswered, help us to find answer for this one

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

boxer-box

margin-box

padding-box and margin-box

padding-box

Answer

Correct Answer: padding-box

Note: This Question is unanswered, help us to find answer for this one

37. 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%);

Answer

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

Note: This Question is unanswered, help us to find answer for this one

38. Can you use CSS3 with older version of HTML?

Yes

Answer

Correct Answer: No

Note: This Question is unanswered, help us to find answer for this one

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

alt

text

title

hover

Answer

Correct Answer: title

Note: This Question is unanswered, help us to find answer for this one

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

background-clip

background-size

background-shadow

background-origin

Answer

Correct Answer: background-shadow

Note: This Question is unanswered, help us to find answer for this one

41. To use a fading link transition use:

Ease-in

Fade-in

Duration

Slow-fade

Answer

Correct Answer: Ease-in

Note: This Question is unanswered, help us to find answer for this one

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

:not

:only-of-type

:nth-child

:target

:includes

Answer

Correct Answer: :includes

Note: This Question is unanswered, help us to find answer for this one

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

Answer

Correct Answer: font: bold 18px/1.2 verdana;

Note: This Question is unanswered, help us to find answer for this one

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

Answer

Correct Answer: 10.0, 4.0

Note: This Question is unanswered, help us to find answer for this one

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

Answer

Correct Answer: closest-side, farthest-corner

Note: This Question is unanswered, help us to find answer for this one

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

Answer

Correct Answer: li /line break/ li+li /line break/ li+li+li /line break/

Note: This Question is unanswered, help us to find answer for this one

47. To set the clipping region of an element use:

Overflow: hidden

Display: clip

Clipping

Clip

Answer

Correct Answer: Clip

Note: This Question is unanswered, help us to find answer for this one

48. In CSS, > is called a:

operator

combinator

carat

less than symbol

Answer

Correct Answer: combinator

Note: This Question is unanswered, help us to find answer for this one

49. Which of these properties does not exist?

border-image

transparency

They all exist.

background-size

transition

Answer

Correct Answer: transparency

Note: This Question is unanswered, help us to find answer for this one

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

Answer

Correct Answer: Graceful Degradation

Note: This Question is unanswered, help us to find answer for this one

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

Answer

Correct Answer: Duration or Transition

Note: This Question is unanswered, help us to find answer for this one

52. Which of these is NOT a valid css3 pseudo class?

:empty

:only-child

:not(s)

:root

:blank

Answer

Correct Answer: :blank

Note: This Question is unanswered, help us to find answer for this one

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

False

True

Answer

Correct Answer: True

Note: This Question is unanswered, help us to find answer for this one

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

202px

240px

242px

200px

Answer

Correct Answer: 242px

Note: This Question is unanswered, help us to find answer for this one

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

condensed

extra-condensed

macro-expanded

micro-condensed

semi-expanded

Answer

Correct Answer: macro-expanded

Note: This Question is unanswered, help us to find answer for this one

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

Answer

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

Note: This Question is unanswered, help us to find answer for this one

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

False

True

Answer

Correct Answer: True

Note: This Question is unanswered, help us to find answer for this one

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

Answer

Correct Answer: word-wrap: break-word;

Note: This Question is unanswered, help us to find answer for this one

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

Answer

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

Note: This Question is unanswered, help us to find answer for this one

60. Which of the following is NOT new in CSS3?

Multiple box models (switchable)

Multi-column

Media queries

Fluent animations

Answer

Correct Answer: Media queries

Note: This Question is unanswered, help us to find answer for this one

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

Answer

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

Note: This Question is unanswered, help us to find answer for this one

62. Portrait and Landscape specific stylings are used for:

Both of these

Mobile devices (phones, tablets)

Internet TV

Answer

Correct Answer: Both of these

Note: This Question is unanswered, help us to find answer for this one

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

rgba(255, 0, 0, 0.4)

Answer

Correct Answer: hsb(177, 65, 62)

Note: This Question is unanswered, help us to find answer for this one

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

Answer

Correct Answer: Selects any p elements that follow a ul.

Note: This Question is unanswered, help us to find answer for this one

65. All properties must have a:

Element

Value

Attribute

None of these

Answer

Correct Answer: Value

Note: This Question is unanswered, help us to find answer for this one

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

7.0

9.0

10.0

8.0

Answer

Correct Answer: 9.0

Note: This Question is unanswered, help us to find answer for this one

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

Answer

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

Note: This Question is unanswered, help us to find answer for this one

68. Pick the INCORRECT selector

element[att*=val]

element[att^=val]

element[att$=val]

element[att+=val]

Answer

Correct Answer: element[att+=val]

Note: This Question is unanswered, help us to find answer for this one

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

Answer

Correct Answer: transition: width 1s linear 2s;

Note: This Question is unanswered, help us to find answer for this one

70. Which property is used to specify type faces ?

Font-face

Font-name

Font-type

Font-family

Answer

Correct Answer: Font-face

Note: This Question is unanswered, help us to find answer for this one

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

Yes

Answer

Correct Answer: Yes

Note: This Question is unanswered, help us to find answer for this one

72. Which of these properties does NOT exist in CSS3?

text-opacity

box-sizing

word-wrap

border-image

background-size

Answer

Correct Answer: text-opacity

Note: This Question is unanswered, help us to find answer for this one

73. True or False? Round corners were supported before CSS3

True

False

Answer

Correct Answer: False

Note: This Question is unanswered, help us to find answer for this one

74. Complete this styling. text-shadow:

2px 2px 2px 2px #666

2px 2px 2px #666

2px #666 2px #666

#666 2px

Answer

Correct Answer: 2px 2px 2px #666

Note: This Question is unanswered, help us to find answer for this one

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

[att/=val]

[att~=val]

[att^=val]

[att*=val]

[att>=val]

Answer

Correct Answer: [att^=val]

Note: This Question is unanswered, help us to find answer for this one

76. 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"; }

Answer

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

Note: This Question is unanswered, help us to find answer for this one

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

This wouldn't do anything

Capitalize the first letter of every word

Capitalize all letters

Answer

Correct Answer: Capitalize the first letter of every word

Note: This Question is unanswered, help us to find answer for this one

78. The two primary stylesheet languages are CSS and:

VMA

SVG

EHT

XSL

Answer

Correct Answer: XSL

Note: This Question is unanswered, help us to find answer for this one

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

Answer

Correct Answer: top margin 20px, left and right margin 30px, bottom margin 50px

Note: This Question is unanswered, help us to find answer for this one

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

Answer

Correct Answer: ...within the content-box, padding-box, or border-box area.

Note: This Question is unanswered, help us to find answer for this one

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

Answer

Correct Answer: li:nth-child(even)

Note: This Question is unanswered, help us to find answer for this one

82. 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, ie no color is set

Green

Answer

Correct Answer: Red

Note: This Question is unanswered, help us to find answer for this one

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

#extend

#stretch

#expand

#round

Answer

Correct Answer: #stretch

Note: This Question is unanswered, help us to find answer for this one

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

Link tag

Active tag

Focus state

Dynamic pseudo-class

Answer

Correct Answer: Dynamic pseudo-class

Note: This Question is unanswered, help us to find answer for this one

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

True

Only with browser-specific prefixes

False

Answer

Correct Answer: True

Note: This Question is unanswered, help us to find answer for this one

86. In order to animate you must use the _____ property.

Automation

All of these

Ease-in

Transition

Answer

Correct Answer: Transition

Note: This Question is unanswered, help us to find answer for this one

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

Answer

Correct Answer: Elements that have no children.

Note: This Question is unanswered, help us to find answer for this one

88. Which CSS property would you use to make text italicized?

font-style

font-decoration

text-style

text-decoration

Answer

Correct Answer: font-style

Note: This Question is unanswered, help us to find answer for this one

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

Answer

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

Note: This Question is unanswered, help us to find answer for this one

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

Answer

Correct Answer: only the latter will apply

Note: This Question is unanswered, help us to find answer for this one

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

-webkit-border-radius: { }

-ie-border-radius: { }

-o-linear-gradiant: { }

-moz-border-radius: { }

Answer

Correct Answer: -ie-border-radius: { }

Note: This Question is unanswered, help us to find answer for this one

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

False

True

Answer

Correct Answer: False

Note: This Question is unanswered, help us to find answer for this one

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

Answer

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

Note: This Question is unanswered, help us to find answer for this one

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

Model

Syntax

Element

Property

Answer

Correct Answer: Property

Note: This Question is unanswered, help us to find answer for this one

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

Answer

Correct Answer: set the transition property

Note: This Question is unanswered, help us to find answer for this one

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

Inline style attribute

External style sheet referenced in a LINK element

Answer

Correct Answer: Inline style attribute

Note: This Question is unanswered, help us to find answer for this one

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

Answer

Correct Answer: Create the button using CSS

Note: This Question is unanswered, help us to find answer for this one

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

Answer

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

Note: This Question is unanswered, help us to find answer for this one

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

...in percentages only.

...in pixels only.

Answer

Correct Answer: ...in pixels or percentages.

Note: This Question is unanswered, help us to find answer for this one

100. Which is correct use of border-radius?

any of these

5px 5px 5px 5px;

2px 3px;

2px;

Answer

Correct Answer: any of these

Note: This Question is unanswered, help us to find answer for this one

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

Answer

Correct Answer: All of these are features of CSS3.

Note: This Question is unanswered, help us to find answer for this one

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

Semi-colon

Dot

Period

Colon

Answer

Correct Answer: Semi-colon

Note: This Question is unanswered, help us to find answer for this one

103. True or False: CSS3 allows you to animate divs.

True

False

Answer

Correct Answer: True

Note: This Question is unanswered, help us to find answer for this one

104. Using CSS3 you can create multi-colored:

squares

triangles

circles

all of these

Answer

Correct Answer: all of these

Note: This Question is unanswered, help us to find answer for this one

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

True

False

Answer

Correct Answer: True

Note: This Question is unanswered, help us to find answer for this one

106. Can you make text seem hollow with CSS3?

Yes

Answer

Correct Answer: Yes

Note: This Question is unanswered, help us to find answer for this one

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

False

True

Answer

Correct Answer: True

Note: This Question is unanswered, help us to find answer for this one

108. Which color will show this css value : #000000;

green

white

red

Black

blue

Answer

Correct Answer: Black

Note: This Question is unanswered, help us to find answer for this one

109. Before you can use CSS3 you must first add a:

Add-on

Plugin

Jquery script

None of these

Answer

Correct Answer: None of these

Note: This Question is unanswered, help us to find answer for this one

110. CSS2 and CSS3 styles can be combined.

True

False

Answer

Correct Answer: True

Note: This Question is unanswered, help us to find answer for this one

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

All of these

Embedded

Imported

Linked

Inline

Answer

Correct Answer: All of these

Note: This Question is unanswered, help us to find answer for this one

112. To remove the underline from an href use:

display: none

visibility: none

text: line-none

text-decoration: none;

Answer

Correct Answer: text-decoration: none;

Note: This Question is unanswered, help us to find answer for this one

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

Answer

Correct Answer: Yes

Note: This Question is unanswered, help us to find answer for this one

114. How do you add a comment in CSS?

/* Comment */

// Comment

<? Comment ?>

# Comment

Answer

Correct Answer: /* Comment */

Note: This Question is unanswered, help us to find answer for this one

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

False

True

Answer

Correct Answer: True

Note: This Question is unanswered, help us to find answer for this one

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

Yes

Answer

Correct Answer: Yes

Note: This Question is unanswered, help us to find answer for this one

117. To style a section element, you may use:

section {color: red;}

section [section] {color: red;}

section {[section] color: red;}

Answer

Correct Answer: section {color: red;}

Note: This Question is unanswered, help us to find answer for this one

118. Which color will show this css value : #ffffff;

White

Green

Black

Red

Blue

Answer

Correct Answer: White

Note: This Question is unanswered, help us to find answer for this one

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

False

True

Answer

Correct Answer: True

Note: This Question is unanswered, help us to find answer for this one

120. In some instances CSS3 has replaced the need for:

Flash movies

Layout images

Animated GIFs

All of the these

Answer

Correct Answer: All of the these

Note: This Question is unanswered, help us to find answer for this one

121. You can use HTML attributes to define styles inline.

False

True

Answer

Correct Answer: True

Note: This Question is unanswered, help us to find answer for this one

122. Transitions are best supported in:

Internet Explorer 8 and higher

WebKit browsers

Netscape Navigator

Internet Explorer 7 and higher

Answer

Correct Answer: WebKit browsers

Note: This Question is unanswered, help us to find answer for this one

123. CSS specifications are maintained by:

W3C

Open Source Developers

SVG

Mozilla

Answer

Correct Answer: W3C

Note: This Question is unanswered, help us to find answer for this one

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

False

True

Answer

Correct Answer: True

Note: This Question is unanswered, help us to find answer for this one

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

Answer

Correct Answer: Border-radius

Note: This Question is unanswered, help us to find answer for this one

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

Answer

Correct Answer: Infinite

Note: This Question is unanswered, help us to find answer for this one

127. CSS can be used to style...

XML

SVG

XHTML

all of these

Answer

Correct Answer: all of these

Note: This Question is unanswered, help us to find answer for this one

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

positioning

plugin

addon

hover state

Answer

Correct Answer: positioning

Note: This Question is unanswered, help us to find answer for this one

129. 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 the these.

Let the user know the pages browser preference.

Answer

Correct Answer: All of the these.

Note: This Question is unanswered, help us to find answer for this one

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

Internet Explorer 11

Internet Explorer 10

Chrome 36

Answer

Correct Answer: Internet Explorer 10

Note: This Question is unanswered, help us to find answer for this one

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

Answer

Correct Answer: opacity:0.4;

Note: This Question is unanswered, help us to find answer for this one

132. What browser is transform-style not supported in

Internet Explorer

Opera

Firefox

Safari

Answer

Correct Answer: Internet Explorer

Note: This Question is unanswered, help us to find answer for this one

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

False

True

Answer

Correct Answer: True

Note: This Question is unanswered, help us to find answer for this one

134. In CSS, * is called a:

comment

universal selector

None of these

id tag

Answer

Correct Answer: universal selector

Note: This Question is unanswered, help us to find answer for this one

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

Answer

Correct Answer: Yes, rotate

Note: This Question is unanswered, help us to find answer for this one

136. To get li tags to sit side by side use:

Display: side

Display: inline

Display: left

Display: right

Answer

Correct Answer: Display: inline

Note: This Question is unanswered, help us to find answer for this one

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

Answer

Correct Answer: margin-top is property and 30px is value

Note: This Question is unanswered, help us to find answer for this one

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

<style>

<css>

Answer

Correct Answer: <style>

Note: This Question is unanswered, help us to find answer for this one

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

Answer

Correct Answer: Yes

Note: This Question is unanswered, help us to find answer for this one

140. 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" }

Answer

Correct Answer: div { background-color: blue; }

Note: This Question is unanswered, help us to find answer for this one

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

CSS Box Model

Width

Dimensions

Height

Answer

Correct Answer: CSS Box Model

Note: This Question is unanswered, help us to find answer for this one

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

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

margin:30px 20px 10px 20px;

Answer

Correct Answer: margin:30px 20px 10px 20px;

Note: This Question is unanswered, help us to find answer for this one

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

Answer

Correct Answer: font-family: inherit;

Note: This Question is unanswered, help us to find answer for this one

144. What property is used when creating custom fonts?

Font[custom font]

Custom-font

@font

@font-face

Answer

Correct Answer: @font-face

Note: This Question is unanswered, help us to find answer for this one

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

Answer

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

Note: This Question is unanswered, help us to find answer for this one

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

p tag

pseudo-class

iteration

none of these

Answer

Correct Answer: pseudo-class

Note: This Question is unanswered, help us to find answer for this one

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

a comma ( , )

a colon ( : )

a curly bracket ( } )

a parenthesis ( ) )

Answer

Correct Answer: a curly bracket ( } )

Note: This Question is unanswered, help us to find answer for this one

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

True

False

Answer

Correct Answer: False

Note: This Question is unanswered, help us to find answer for this one

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

max-borders

media queries

resolution finders

screen shots

Answer

Correct Answer: media queries

Note: This Question is unanswered, help us to find answer for this one

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

Answer

Correct Answer: affect only the odd numbered li tags

Note: This Question is unanswered, help us to find answer for this one

151. Opacity can cause an image to appear:

to glow

luminescent

faded

tilted

Answer

Correct Answer: faded

Note: This Question is unanswered, help us to find answer for this one

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

False

True

Answer

Correct Answer: False

Note: This Question is unanswered, help us to find answer for this one

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

Yes

Answer

Correct Answer: Yes

Note: This Question is unanswered, help us to find answer for this one

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

list-style: none;

li: none;

list-type: none;

display: none;

Answer

Correct Answer: list-style: none;

Note: This Question is unanswered, help us to find answer for this one

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

Answer

Correct Answer: -moz-, -webkit-, -o, -ms,

Note: This Question is unanswered, help us to find answer for this one

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

body

html

Answer

Correct Answer: *

Note: This Question is unanswered, help us to find answer for this one

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

mixed

Yes

Answer

Correct Answer: mixed

Note: This Question is unanswered, help us to find answer for this one

158. 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 shylesheet most important

Answer

Correct Answer: import style rules from other style sheets

Note: This Question is unanswered, help us to find answer for this one

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

Yes

Answer

Correct Answer: Yes

Note: This Question is unanswered, help us to find answer for this one

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

200

bold

italic

900

Answer

Correct Answer: italic

Note: This Question is unanswered, help us to find answer for this one

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

inline

outset

stroke

inset

Answer

Correct Answer: inset

Note: This Question is unanswered, help us to find answer for this one

162. To create more space within a CSS3 button use:

cell-padding

margin

cell-spacing

padding

Answer

Correct Answer: padding

Note: This Question is unanswered, help us to find answer for this one

163. Is ::first-line a pseudo-element?

True

False

Answer

Correct Answer: True

Note: This Question is unanswered, help us to find answer for this one

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

Answer

Correct Answer: be aware of the browser support

Note: This Question is unanswered, help us to find answer for this one

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

letter-spacing

align-right

word spacing

padding

Answer

Correct Answer: letter-spacing

Note: This Question is unanswered, help us to find answer for this one

166. Whether or not a browser accepts a styling is called:

browser sniffing

browser support

deprecated code

hack

Answer

Correct Answer: browser support

Note: This Question is unanswered, help us to find answer for this one

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

Answer

Correct Answer: change the background color for each odd numbered li tag

Note: This Question is unanswered, help us to find answer for this one

168. What would a:link be an example of?

none of these

pseudo-class

p tag

iteration

Answer

Correct Answer: pseudo-class

Note: This Question is unanswered, help us to find answer for this one

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

display:block

display:table

display:column

display:row

Answer

Correct Answer: display:table

Note: This Question is unanswered, help us to find answer for this one

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

Answer

Correct Answer: Yes

Note: This Question is unanswered, help us to find answer for this one

171. Webkit has it's own prefix and works in:

Safari

Webkit browsers only

All browsers

Answer

Correct Answer: Webkit browsers only

Note: This Question is unanswered, help us to find answer for this one

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

Answer

Correct Answer: input:disabled

Note: This Question is unanswered, help us to find answer for this one

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

Answer

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

Note: This Question is unanswered, help us to find answer for this one

174. what is the vendor prefix for internet explorer ?

-mz-

-ie-

-moz-

-ms-

Answer

Correct Answer: -ms-

Note: This Question is unanswered, help us to find answer for this one

175. Is @keyframes an method of animations in CSS3?

Yes

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

Answer

Correct Answer: Yes

Note: This Question is unanswered, help us to find answer for this one

176. With the emergence of CSS3, CSS2 has become:

useless

destandarized

none of these

defunct

Answer

Correct Answer: none of these

Note: This Question is unanswered, help us to find answer for this one

177. How would you set a background image to not repeat?

div { background-image: no-repeat; }

div { image: no repeat; }

div { background-repeat: no-repeat; }

Answer

Correct Answer: div { background-repeat: no-repeat; }

Note: This Question is unanswered, help us to find answer for this one

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

fade

blur

sharpe

fadeout

Answer

Correct Answer: blur

Note: This Question is unanswered, help us to find answer for this one

179. To specify the character encoding in an external stylesheet use:

@charset

@media

!Important

@import

Answer

Correct Answer: @charset

Note: This Question is unanswered, help us to find answer for this one

180. To turn text into all uppercase, use:

uppercase:

text-transform:

capitalize:

any of these

shout:

Answer

Correct Answer: text-transform:

Note: This Question is unanswered, help us to find answer for this one

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

Answer

Correct Answer: print only

Note: This Question is unanswered, help us to find answer for this one

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

Answer

Correct Answer: transition: property duration timing-function delay

Note: This Question is unanswered, help us to find answer for this one

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

shifted downward

overlapping

hidden

shifted upward

Answer

Correct Answer: shifted downward

Note: This Question is unanswered, help us to find answer for this one

184. _____ positioned boxes are taken out of the normal flow.

Relative

Static

Absolute

Normal

Answer

Correct Answer: Absolute

Note: This Question is unanswered, help us to find answer for this one

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

Answer

Correct Answer: Both answers are correct.

Note: This Question is unanswered, help us to find answer for this one

186. We write single ______ before the pseudo-class property.

colon

hash

dot

semi colon

Answer

Correct Answer: colon

Note: This Question is unanswered, help us to find answer for this one

187. Which is a recognized media type?

All of these

screen

handheld

speech

Answer

Correct Answer: All of these

Note: This Question is unanswered, help us to find answer for this one

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

All except Safari

Yes

All except Internet Explorer.

Answer

Correct Answer: No

Note: This Question is unanswered, help us to find answer for this one

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

Answer

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

Note: This Question is unanswered, help us to find answer for this one

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

True

False

Answer

Correct Answer: False

Note: This Question is unanswered, help us to find answer for this one

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

Answer

Correct Answer: img:not([alt])

Note: This Question is unanswered, help us to find answer for this one

CSS 3 MCQs | Topic-wise

MCQ on Basic CSS 3

General CSS 3 MCQs

CSS 3 Subjects

More Resources

CSS 3 MCQ

CSS 3 Skill Assessment

CSS 3 PDF

Related MCQs

Cyber Security MCQs

Data Mining MCQs

Data Modeling MCQs

Data Structures and Algorithms MCQs

Data Warehousing MCQs

Basic CSS 3 MCQ

1. Can you add a dropdown menu inside a navigation bar using CSS 3 dropdowns?

2. Choose True or False.The CSS 3 box model permits you to add a border around elements and also to define space between the elements.

3. The CSS box model consists of which of the following options?1. Margin2. Padding3. Content

4. Consider the following font definition:font-weight:normalWhat is the other way of getting the same result?

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

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

7. Which of the following properties doesn't take up space?

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

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

10. Which of the following value of the white-space property will set the value of white-space-collapse to "preserve" and value of the text-wrap to "none"?

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

12. What is the default value of the transform property in CSS3?

13. Which of the following option does NOT exist in media groups available in CSS3?

14. The sans-serif generic font-family is characterized by:

15. What effect does the following rule have?div { grid-rows: 4em (0.25em 1em); }

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

17. State whether following statement is true or false.The RGB color model is hardware-specific while the HSL is symmetrical to lightness and darkness.

18. The color in three digit RGB notation is #fb0. What will be its equivalent six digit color code?

19. What is the type of the letter-spacing property?

20. You want to set the image resolution to 300dpi irrespective of the resolution of the image. Which of the following codes will be used?

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

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

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

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

25. What will happen if the following style declaration is applied to an element?p { margin: 3em 2em }

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

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

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

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

30. Which of the following styles is valid?

31. Which is new css3 property?

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

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

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

35. What does the font-size-adjust property do?

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

37. How would you repeat a gradient in CSS3?

38. Can you use CSS3 with older version of HTML?

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

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

41. To use a fading link transition use:

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

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

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

45. What are two of the four sizes with radial gradients?

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

47. To set the clipping region of an element use:

48. In CSS, > is called a:

49. Which of these properties does not exist?

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

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

52. Which of these is NOT a valid css3 pseudo class?

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

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

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

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

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

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

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

60. Which of the following is NOT new in CSS3?

61. rgba differs from the opacity declaration in that:

62. Portrait and Landscape specific stylings are used for:

63. Which of these is not a valid CSS3 color value?

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

65. All properties must have a:

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

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

68. Pick the INCORRECT selector

69. Which of the following transitions follows the correct format?

70. Which property is used to specify type faces ?

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

72. Which of these properties does NOT exist in CSS3?

73. True or False? Round corners were supported before CSS3

74. Complete this styling. text-shadow:

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

76. Generated Content is added in CSS by which syntax pattern?

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

78. The two primary stylesheet languages are CSS and:

79. 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'?

2. Choose True or False.

The CSS 3 box model permits you to add a border around elements and also to define space between the elements.

3. The CSS box model consists of which of the following options?

1. Margin
2. Padding
3. Content

4. Consider the following font definition:

font-weight:normal

What is the other way of getting the same result?

15. What effect does the following rule have?

div { grid-rows: 4em (0.25em 1em); }

17. State whether following statement is true or false.

The RGB color model is hardware-specific while the HSL is symmetrical to lightness and darkness.

25. What will happen if the following style declaration is applied to an element?

p { margin: 3em 2em }

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