CSS MCQ Set 1
1. If a particular rule should never be overridden by another rule, the ____________ indication should be used.
a) @important b) !important! c) !important d) important!
Answer
Answer: c [Reason:] If a particular rule should never be overridden by another rule, the !important indication should be used. For a rule never to be ignored, insert the indication !important just before the semicolon of the rule.
2. Which of the following option a rule consists of?
a) Tag
b) Selector
c) Declaration
d) Both (c) and (d)
Answer
Answer: d [Reason:] Self-explainatory.
3. Which of the following option a declaration consist of?
a) Tag
b) Property
c) Selector
d) Class
Answer
Answer: b [Reason:] A declaration has two parts separated by a colon:
Property – that part before the colon
Value – that part after the colon.
4. The ______________ is the link between the HTML document and the style. It specifies what elements are affected by the declaration.
a) Tag
b) Selector
c) Declaration
d) Class
Answer
Answer: b [Reason:] The selector is the link between the HTML document and the style. It specifies what elements are affected by the declaration. The declaration is that part of the rule that sets forth what the effect will be.
5. How a style sheet can be glued to the HTML document?
a) Import a style sheet using the CSS @import notation.
b) Apply the basic, document-wide style sheet for the document by using the style element
c) Link an external style sheet to the document using the link elemen
d) All of the mentioned
Answer
Answer: d [Reason:] Self-explainatory.
6. As a general rule, properties in CSS inherit from ___________ elements
a) child to parent
b) parent to child
c) grandparents to parents
d) none of the mentioned
Answer
Answer: b [Reason:]
7. CSS3 ___________ let you display smooth transitions between two or more specified colors
a) Float
b) Align
c) Gradients
d) Color
Answer
Answer: b [Reason:] Earlier, you had to use images for these effects. However, by using CSS3 gradients you can reduce download time and bandwidth usage. In addition, elements with gradients look better when zoomed, because the gradient is generated by the browser.
8. The ___________________ property specifies whether or not an element should be resizable by the user.
a) Outline Offset
b) Resize
c) Unit
d) None of the mentioned
Answer
Answer: b [Reason:]
9. The __________ specifies style sheets for a source document according to the conventions of the document language. For instance, in HTML, style sheets may be included in the document or linked externally.
a) author
b) user
c) user-agent
d) none of the mentioned
Answer
Answer: a [Reason:] Author. The author specifies style sheets for a source document according to the conventions of the document language. For instance, in HTML, style sheets may be included in the document or linked externally.
10.The __________ may be able to specify style information for a particular document. For example, the user may specify a file that contains a style sheet or the user agent may provide an interface that generates a user style sheet.
a) author
b) user
c) user-agent
d) none of the mentioned
Answer
Answer: b [Reason:] User: The user may be able to specify style information for a particular document. For example, the user may specify a file that contains a style sheet or the user agent may provide an interface that generates a user style sheet (or behaves as if it did) .
11. Each property may also have a cascaded value of ___________ which means that, for a given element, the property takes the same specified value as the property for the element’s parent.
a) !important
b) delay
c) inherit
d) important
Answer
Answer: c [Reason:] Each property may also have a cascaded value of ‘inherit’, which means that, for a given element, the property takes the same specified value as the property for the element’s parent. The ‘inherit’ value can be used to enforce inheritance of values, and it can also be used on properties that are not normally inherited.
CSS MCQ Set 2
1. Which of the following CSS property sets the opacity level for an element?
a) opacity
b) transparency
c) transparent
d) all of the mentioned
Answer
Answer: a [Reason:] The opacity property defines the transparency-level, where 1 is opaque, 0.5 is translucent, and 0 is completely transparent.
2. Which of the following property specifies the order of a flexible item relative to the rest of the flexible items inside the same container?
a) sort
b) layout
c) order
d) asort
Answer
Answer: c [Reason:] The CSS order property specifies the order used to lay out flex items in their flex container. Elements are laid out in the ascending order of the order value.
3. Which of the following is an appropriate value for overflow element?
a) hidden
b) auto
c) scroll
d) all of the mentioned
Answer
Answer: d [Reason:] Overflow of a div or a container can have the following values: visible|hidden|scroll|auto|initial|inherit.
4. Identify the CSS property that specifies the length of the space used for the tab character.
a) size
b) tab-size
c) tab-space
d) all of the mentioned
Answer
Answer: b [Reason:] The tab-size CSS property is used to customize the width of a tab.
5. Which of the following property specifies the stack order of an element?
a) order
b) z-index
c) p-index
d) auto
Answer
Answer: b [Reason:] The correct option is z-index. It can only be applied on positioned values.
6. Which of the following property allows long words to be able to be broken and wrap onto the next line?
a) line-wrap
b) break-word
c) word-wrap
d) word-break
Answer
Answer: c [Reason:] This property helps you break the words and wrap onto the next line to prevent overflow of div.
7. Which of the following CSS property can be used to provide the flex-direction and flex-wrap properties?
a) flex
b) flex-flow
c) flex-wrap
d) all of the mentioned
Answer
Answer: b [Reason:] It is a shorthand for both flex-direction and flex-wrap.
8. Which of the following specifies how much the item will grow relative to the rest of the flexible items inside the same container?
a) flex-scale
b) flex-size
c) flex-grow
d) flex-flow
Answer
Answer: c [Reason:] Self-explainatory.
9. Which of the following property aligns the flexible container’s items when the items do not use all available space on the main-axis?
a) wrap-content
b) fix-content
c) adjust-content
d) justify-content
Answer
Answer: d [Reason:] The CSS justify-content property defines how the browser distributes space between and around flex items along the main-axis of their container.
10. Choose the CSS property which specifies the placement of a table caption.
a) table-caption
b) cell-caption
c) caption-side
d) caption-adjust
Answer
Answer: c [Reason:] The caption-side CSS property positions the content of a table’s caption on the specified side.
CSS MCQ Set 3
1. Which of the following CSS Gradient Functions sets the direction and colors of a gradient that fades from one color to the next in a straight line?
a) gradient()
b) line-gradient()
c) linear-gradient()
d) none of the mentioned
Answer
Answer: d [Reason:] Self-explainatory.
2. Which of the following CSS Gradient Functions creates a circular or elliptical gradient, and optionally sets its shape, size, and position?
a) radial-gradient()
b) circular-gradient()
c) elliptical-gradient()
d) none of the mentioned
Answer
Answer: c [Reason:] Self-explainatory.
3. Which of the following CSS Gradient Functions Creates a radial gradient that repeats infinitely?
a) repeat-radial-gradient()
b) repeating-radial-gradient()
c) infinite-radial-gradient()
d) none of the mentioned
Answer
Answer: a [Reason:] Self-explainatory.
4. Which of the following is not a browser-specific versions of linear-gradient()?
a) -moz-linear-gradient()
b) -o-linear-gradient()
c) -mac-linear-gradient()
d) -webkit-linear-gradient()
Answer
Answer: c [Reason:] Self-explainatory.
5. Which of the following argument is not accepted by radial-gradient() function?
a) Shape
b) Time
c) Color stops
d) Position
Answer
Answer: b [Reason:] Self-explainatory.
6. Which of the following function creates a CSS gradient image that can be used anywhere an image URL is required, including background-image, border-image, and list-style properties?
a) canvas
b) gradient
c) animation
d) color
Answer
Answer: b [Reason:] Self-explainatory.
7. Which of the following option best explain this code “background-image: repeating-radial-gradient(circle at 50% 100%, #FFEB79, #D9CC3C 5%);”?
a) Creating Infinte circular Gradients
b) Creating Repeating Circular Gradients
c) Creating Repeating Radial Gradients
d) Creating Infinite Radial Gradients
Answer
Answer: c [Reason:] Self-explainatory.
8. Which of the following option best explain this code “background-image: repeating-linear-gradient(-45deg, #426A77, #FFF 6px);”?
a) Creating Straight Stripes
b) Creating Cubic Stripes
c) Creating Spiral Stripes
d) Creating Diagonal Stripes
Answer
Answer: d [Reason:] Self-explainatory.
9. Which of the following option best explain this code “background-image: repeating-linear-gradient(to right, #D9CC3C, #FFEB79 5%, #D9CC3C 10%);”?
a) Creating a Repeating Gradient
b) Creating a Mix Repeating Gradient
c) Creating a Shadow Repeating Gradient
d) Creating a Smooth Repeating Gradient
Answer
Answer: d [Reason:] Self-explainatory.
CSS MCQ Set 4
1. Which of the following are different origins of style sheets?
a) author
b) user
c) user agent
d) all of the mentioned
Answer
Answer: d [Reason:] Author: The author specifies style sheets for a source document according to the conventions of the document language. For instance, in HTML, style sheets may be included in the document or linked externally.
User: The user may be able to specify style information for a particular document. For example, the user may specify a file that contains a style sheet or the user agent may provide an interface that generates a user style sheet (or behaves as if it did).
User agent: Conforming user agents must apply a default style sheet. A user agent’s default style sheet should present the elements of the document language in ways that satisfy general presentation expectations for the document language
2. Which of the following Cascading order has the highest precedence?
a) user agent declarations
b) user normal declarations
c) author normal declarations
d) author important declarations
Answer
Answer: a [Reason:] Self-explainatory.
3. Which of the following property is used to define how nested items are rendered in a 3-D space?
a) transform-style
b) transform
c) transform-origin
d) transform-3D
Answer
Answer: a [Reason:] transform-style is used to define how nested items are rendered in a 3-D space, the choice being either flattened or with their dimensions preserved. This property affects the children of the element and not the element itself. Also, the property does not cascade, so it is necessary to apply it at all levels.
4. Which of the following rule allows users to import style rules from other style sheets?
a) @media
b) @important
c) @import
d) @style
Answer
Answer: c [Reason:] The @import rule allows users to import style rules from other style sheets. If an @import rule refers to a valid stylesheet, user agents must treat the contents of the stylesheet as if they were written in place of the @import rule.
5. Which of the following property is a shorthand that resets all CSS properties?
a) reset
b) inital
c) all
d) delete
Answer
Answer: c [Reason:] Self-explainatory.
6. Which of the following generate “virtual” rules representing their effects when running?
a) DOM’s
b) !important
c) CSS Animations
d) Inheritance
Answer
Answer: c [Reason:] Self-explainatory.
7. The _______________ is the result of taking the computed value and completing any remaining calculations to make it the absolute theoretical value used in the layout of the document.
a) cascaded value
b) declared value
c) used value
d) none of the mentioned
Answer
Answer: c [Reason:] Self-explainatory.
8. The _________________ is the result of resolving the specified value.
a) cascaded value
b) computed value
c) specified value
d) declared value
Answer
Answer: b [Reason:] Self-explainatory.
9. The ____________ represents the result of the cascade: it is the declared value that wins the cascade.
a) specified Value
b) actual value
c) computed value
d) cascaded value
Answer
Answer: d [Reason:] Self-explainatory.
10. The CSS cascade assigns a weight to each style rule. State true or false.
a) True
b) False
Answer
Answer: a [Reason:] Self-explainatory.
CSS MCQ Set 5
1. _____________ property specifies the direction in which a marquee should move.
a) marquee-style
b) marquee-play-count
c) marquee-direction
d) none of the mentioned
Answer
Answer: c [Reason:] Syntax:
marquee-direction: forward | reverse
2. ___________ property defines a mask to be used as a box’s overlay in order to clip the box to a
complex shape.
a) mask
b) mask-box-image
c) mask-attachment
d) mask-origin
Answer
Answer: a [Reason:] Syntax:
mask: mask-attachment
3. _____________ property specifies whether the mask should scroll or stay fixed when the page is scrolled.
a) mask-image
b) mask-box-image
c) mask-attachment
d) mask-origin
Answer
Answer: c [Reason:] Syntax:
mask-attachment: fixed | scroll
4. ___________ property specifies how the position of the mask should be calculated by setting the
origin relative to different locations within an element’s box.
a) mask-image
b) mask-box-image
c) mask-attachment
d) mask-origin
Answer
Answer: d [Reason:] Syntax:
mask-origin: border | content | padding
5. Which of the following property defines the offset from an element’s border and its outline?
a) outline-radius
b) opacity
c) outline-offset
d) overflow-style
Answer
Answer: c [Reason:] Syntax:
outline-offset: length | inherit
6. Which of the following property allows a marquee to be used in the case of a text overflow?
a) overflow-style
b) opacity
c) overflow-x
d) perspective
Answer
Answer: c [Reason:] Syntax:
overflow-style: auto | marquee-block | marquee-line
7. Which of the following property defines a color for the face of a scroll bar, including arrow regions and the scroll box?
a) scrollbar-base-color
b) scrollbar-arrow-color
c) scrollbar-darkshadow-color
d) scrollbar-face-color
Answer
Answer: d [Reason:] Syntax
scrollbar-face-color: colors
8. Which of the following property is used to give a 3-D sense of depth to an element?
a) overflow-style
b) opacity
c) overflow-x
d) perspective
Answer
Answer: d [Reason:] Syntax:
perspective: none | number
9. Which of the following property is used to set the color of the arrow icon within a scroll bar?
a) scrollbar-base-color
b) scrollbar-arrow-color
c) scrollbar-darkshadow-color
d) scrollbar-face-color
Answer
Answer: b [Reason:] Syntax:
scrollbar-arrow-color: color
10. Which of the following property defines the text alignment rules on the alignment of the last line of an element?
a) text-justify
b) text-fill-color
c) text-align-last
d) none of the mentioned
Answer
Answer: c [Reason:] Syntax
text-align-last: auto | center | justify | left | right | inherit
