CSS MCQ Set 1
1. Which of the following CSS property defines the different properties of all four sides of an element’s border in a single declaration?
a) border
b) padding
c) border-collapse
d) border-width
Answer
Answer: d [Reason:] The border-width property sets the width of an element’s four borders. This property can have from one to four values.
2. Identify the CSS property defining bottom-left corner shape of the border?
a) border-radius
b) border-corner-radius
c) border-bottom-left-radius
d) border-left-radius
Answer
Answer: c [Reason:] CSS3 border-radius property allows you can give any element “rounded corners”.
3. Select the CSS property that sets the width of an element’s bottom border?
a) border-width
b) border-bottom
c) border-width-down
d) border-bottom-width
Answer
Answer: d [Reason:] The border-bottom-width CSS property sets the width of the bottom border of a box.
4. Which of the following CSS property border-color property sets the color of an element’s four borders?
a) border-background
b) border-background-color
c) border-color
d) all of the mentioned
Answer
Answer: c [Reason:] The border-color property sets the color of an element’s four borders. This property can have from one to four values.
5. Choose the CSS property that can be used for collapsing the borders between table cells?
a) border
b) collapse-border
c) border-collapse
d) border-cell
Answer
Answer: c [Reason:] The border-collapse property sets whether the table borders are collapsed into a single border or detached as in standard HTML.
6. Which CSS property can be used to set the image as border instead of the border style?
a) background-image
b) border-image
c) background-image-source
d) border-image-source
Answer
Answer: d [Reason:] The border-image-source property specifies the path to the image to be used as a border (instead of the normal border around an element).
7. In how many way border-image-width CSS property can be defined?
a) 4
b) 6
c) 8
d) 9
Answer
Answer: d [Reason:] The border-image-width CSS property defines the offset to use for dividing the border image in nine parts, the top-left corner, central top edge, top-right-corner, central right edge, bottom-right corner, central bottom edge, bottom-left corner, and central right edge.
8. Which of the following is not an appropriate value for border-collapse?
a) all
b) collapse
c) inherit
d) separate
Answer
Answer: a [Reason:] Except option a, all other values can be set to border collapse CSS property.
9. Which of the following specifies the distance between the borders of adjacent cells?
a) border-spacing-cell
b) border-width-spacing
c) border-spacing
d) cell-spacing
Answer
Answer: c [Reason:] The border-spacing property sets the distance between the borders of adjacent cells (only for the “separated borders” model).
10. Which of the following property defines the border-width, border-style and border-color of an element’s top border in a single declaration?
a) border
b) border-top
c) border-top-corner
d) border-top-style
Answer
Answer: b [Reason:] The border-top shorthand property sets all the top border properties in one declaration.
CSS MCQ Set 2
1. Which of the following property adds padding to the top of an element?
a) height
b) padding-height
c) top
d) padding-top
Answer
Answer: d [Reason:] Self-explainatory.
2. Which of the following display property value is described by treats the element as inline?
a) inline-block
b) list-item
c) block
d) inline
Answer
Answer: d [Reason:] Self-explainatory.
3. Which of the following property defines the style for the bottom border of an element?
a) border-bottom-style
b) border-collapse
c) border-style-bottom
d) none of the mentioned
Answer
Answer: a [Reason:] Self-explainatory.
4. Which of the following property defines the style for the left border of an element?
a) border-style
b) border-left-style
c) border-left-width
d) border-right
Answer
Answer: b [Reason:] Self-explainatory.
5. Which of the following visibility property value is described by The element is not visible, but the layout of surrounding elements is not affected?
a) visible
b) hidden
c) collapse
d) none of the mentioned
Answer
Answer: b [Reason:] None.
6. Which of the following display property value is described by used internally by browsers to create list items. Of no practical value to web designers?
a) inline-block
b) list-item
c) group
d) none
Answer
Answer: b [Reason:] Self-explainatory.
7.Which of the following property controls the horizontal overflow of a block or inline block?
a) overflow-x
b) overflow
c) overflow-y
d) overflow-k
Answer
Answer: a [Reason:] Self-explainatory.
8. Which of the following Overflow property value is described by scrollbars should be provided if the content is too big, but actual implementation is left up to the browser?
a) visible
b) scroll
c) auto
d) hidden
Answer
Answer: c [Reason:] Self-explainatory.
9. Which of the following property sets a consistent margin on all four sides of the affected element?
a) boder
b) margin
c) padding
d) none fof the mentioned
Answer
Answer: b [Reason:] Self-explainatory.
10. Which of the following box-sizing property value is described by width and height include content, padding, and borders?
a) border-box
b) content-box
c) content-box
d) none fof the mentioned
Answer
Answer: a [Reason:] Self-explainatory.
CSS MCQ Set 3
1. Which of the following CSS3 Color Feature can be used as a macro for whatever the current color is?
a) CurrentColor keyword
b) HSLa Color
c) HSL Color
d) RGB Color
Answer
Answer: a [Reason:] This is useful if you want to dynamically change one color and have other related colors change.
2. Which of the following CSS3 Color Feature like RGB color but adds an alpha channel value to specify the opacity of the color?
a) RGB
b) RGBa
c) RGBaplha
d) AlphaRGB
Answer
Answer: b [Reason:] An RGBa is specified via a function style rgba(r,g,b,a) value, where colors r, g, and b are specified as a decimal value from 0 to 255 or a percentage from 0 to 100%, and the alpha channel value for defining opacity is a number between 0 (fully transparent) and 1 (fully opaque). Values outside this range will be rounded up or down to fit the closest value.
3. Which of the following Color Format is a CSS’s six-digit hexadecimal format is the same as color defined in (X)HTML?
a) 6-Hex Color
b) 3-Hex Color
c) RGBS
d) RGBa
Answer
Answer: a [Reason:] The format specifies color as #rrggbb, where rr is the amount of red, gg the amount of green, and bb the amount of blue, all specified in a hexadecimal value ranging from 00 to FF.
4. Which of the following Color Format is a CSS2 introduced named color keywords which allows Web page colors to be matched to an operating system’s color use?
a) HSLa Color
b) Commonly defined named colors
c) System Color Names
d) Specificationdefined named colors
Answer
Answer: c [Reason:] None.
5. Which of the following Color Format are a 17 defined colors under CSS 2.1?
a) HSLa Color
b) Commonly defined named colors
c) System Color Names
d) Specificationdefined named colors
Answer
Answer: d [Reason:]
maroon (#800000) red (#ff0000)
orange (#ffA500) yellow (#ffff00)
olive (#808000) purple (#800080)
fuchsia (#ff00ff ) white (#ffffff)
lime (#00ff00) green (#008000)
navy (#000080) blue (#0000ff)
aqua (#00ffff) teal (#008080)
black (#000000) silver (#c0c0c0)
gray (#808080)
Other color keywords may be commonly used but are ad hoc in their definition.
6. Which of the following Color Format is a CSS colors can also be defined using the keyword rgb, followed by three numbers between 0 and 255, contained in parentheses and separated by commas, with no spaces between them?
a) RGB Color
b) RGBa Color
c) HSL Color
d) HSLa Color
Answer
Answer: a [Reason:] RGB color values can also be defined using percentages. The format is the same, except that the numbers are replaced by percentage values between 0% and 100%.
7. Which of the following Color Format is a CSS3 HSL value with a fourth value to set the alpha channel value for the color to define the opacity of the element?
a) RGB Color
b) RGBa Color
c) HSL Color
d) HSLa Color
Answer
Answer: d [Reason:] None.
8. Which of the following Selector selects an element if it’s the only child of its parent with its type?
a) @media b) :target c) ::selection d) :only-of-type
Answer
Answer: d [Reason:] None.
9. Which of the following Selector same as :firstline; changed under CSS3 to make pseudoelements obvious?
a) :first-letter b) :last-child c) :first-line d) ::first-line
Answer
Answer: d [Reason:] None.
10. What does HSL stands for?
a) Hue Specified Lightness
b) Hue Spot Lightness
c) Hue Saturation Lightness
d) None of the mentioned
Answer
Answer: c [Reason:] None.
CSS MCQ Set 4
1. Which of the following value is supposed to be a slightly bolder weight that standard bold in font attribute?
a) empasize
b) light
c) lighter
d) dark
Answer
Answer: d [Reason:] Self-explainatory.
2. Which of the following property allows contextual adjustment of inter-glyph spacing, i.e. the spaces between the characters in text?
a) font-style
b) font-family
c) font-kerning
d) font-variant
Answer
Answer: c [Reason:] Self-explainatory.
3. Which of the following is not a value for font-style property?
a) normal
b) italic
c) oblique
d) none of the above
Answer
Answer: d [Reason:] Self-explainatory.
4. Which of the following value specifies whether the user agent is allowed to synthesize bold or oblique font faces when a font family lacks bold or italic faces?
a) font-weight
b) font-synthesis
c) font-kerning
d) font-variant
Answer
Answer: b [Reason:] Self-explainatory.
5. Which of the following selects a normal, or small-caps face from a font family?
a) font-weight
b) font-synthesis
c) font-kerning
d) font-variant
Answer
Answer: d [Reason:] Self-explainatory.
6. Which of the following is not a appropriate value for font-variant property?
a) inherit
b) default
c) large-caps
d) small-caps
Answer
Answer: c [Reason:] Self-explainatory.
7. Which of the following property adjusts the font-size of the fallback fonts defined with font-family, so that the x-height is the same no matter what font is used?
a) default
b) font-size-fallback
c) font-adjust
d) font-size-adjust
Answer
Answer: d [Reason:] Self-explainatory.
8. Which of the following Allows you to expand or condense the widths for a normal, condensed, or expanded font face?
a) font-style
b) font-stretch
c) font-expand
d) none of the mentioned
Answer
Answer: d [Reason:] Self-explainatory.
9. Which of the following font-size-adjust is value used in calculating the size of the fallback fonts?
a) auto
b) number
c) count
d) none
Answer
Answer: b [Reason:] Self-explainatory.
10. “font-style comes first than font-weight in font attribute”.State true or false.
a) True
b) False
Answer
Answer: b [Reason:] Syntax:
font: font-weight font-style font-variant font-size/line-height font-family .
CSS MCQ Set 5
1. Which of the following element is used by the filter property to blur the images?
a) opaque()
b) scatter()
c) blur()
d) all of the mentioned
Answer
Answer: c [Reason:] Blurs an element, for use by the filter property. Accepts a distance measurement within which pixels are randomly scattered. A value of 0 leaves the image as is.
2. Which of the following function adjust the brightness of an element’s color, for use by the filter property?
a) contrast()
b) dark()
c) light()
d) brightness()
Answer
Answer: d [Reason:] A value of 100% or decimal value of 1 leaves the image as is, while 0 produces black. Increasing the value from 1 or 100% brightens pixels from their original values.
3. Which of the following function adjusts the difference between light and dark values, for use by the filter property?
a) contrast()
b) dark()
c) light()
d) brightness()
Answer
Answer: a [Reason:] A value of 100% or a decimal value of 1 leaves the image as is, while 0 results in black. Increasing the value past 1 or 100% produces more dramatically stratified areas of light and dark.
4. Which of the following function with filter property to create your own sophisticated effects on DOM elements?
a) create()
b) DOM()
c) custom()
d) none of the mentioned
Answer
Answer: c [Reason:] None.
5. Which of the following function converts an element’s color to a shade of gray, for use by the filter property?
a) shade()
b) grayscale()
c) black()
d) brightness()
Answer
Answer: b [Reason:] A decimal value between 0 and 1 or percentage up to 100% controls the extent of the gray effect.
6. Which of the following function flips an element’s colors, for use by the filter property?
a) image()
b) flip()
c) invert()
d) contrast()
Answer
Answer: c [Reason:] A decimal value between 0 and 1 or percentage up to 100% controls the extent of the color-negative effect, with 0.5 or 50% producing gray.
7. Which of the following function applies a saturation effect to an element’s color, making it appear more or less vivid, for use by the filter property?
a) color()
b) saturation()
c) saturate()
d) none of the mentioned
Answer
Answer: b [Reason:] A decimal value of 1 or percentage of 100% keeps the image as is, while increasing the amount produces more dramatically stratified hues.
8. Which of the following function defines a linear gradient as a CSS image?
a) grayscale()
b) gradient()
c) image()
d) linear-gradient()
Answer
Answer: d [Reason:] None.
9. Which of the following function two dimensional transformation in matrix format?
a) matrix()
b) matrix2d()
c) matrix3d()
d) perspective
Answer
Answer: a [Reason:] None.
10. Which of the following function apply a sepia tinge to an element’s color, typical of old photographs, for use by the filter property?
a) grayscale()
b) sepia()
c) contrast()
d) brightness()
Answer
Answer: b [Reason:] None.
