CSS MCQ Set 1
1. What does SVG stands for?
a) Scaled Vector Graph
b) Scalable Vector Graphics
c) Scaled Vector Graphics
d) None of the mentioned
Answer
Answer: b [Reason:] Self-explainatory.
2. Which of the following element is used to begin an SVG image?
a) <image> b) <svg> c) <img> d) <graph>
Answer
Answer: b [Reason:] Self-explainatory.
3. Which of the following element is used to create a SVG rectangle?
a) <rectangle> b) <polygon> c) <rect> d) <square>
Answer
Answer: c [Reason:] Self-explainatory.
4. Which of the following element is used to create a circle?
a) <cir> b) <round> c) <circle> d) <ellipse>
Answer
Answer: c [Reason:] Self-explainatory.
5. Which of the following element is used to create an SVG ellipse?
a) <circle> b) <ellipse> c) <curve> d) none of the mentioned
Answer
Answer: b [Reason:] Self-explainatory.
6. Which of the following is not an attribute used with SVG ellipse?
a) cx
b) cy
c) rr
d) ry
Answer
Answer: c [Reason:] Self-explainatory.
7. Which of the following element is used to create a SVG line?
a) <line> b) <dot> c) <ray> d) <stick>
Answer
Answer: a [Reason:] Self-explainatory.
8. Which of the following is attribute of SVG line?
a) x
b) y
c) x1
d) all of the mentioned
Answer
Answer: d [Reason:] Self-explainatory.
9. Which of the following element is used to create any shape that consists of only straight lines?
a) <polyogn> b) <polyline> c) <lines> d) <multiline>
Answer
Answer: b [Reason:] Self-explainatory.
10. Which of the following defines the color of a line, text or outline of an element?
a) text
b) stroke
c) line
d) all of the mentioned
Answer
Answer: d [Reason:] Self-explainatory.
CSS MCQ Set 2
1. Which of the following Module is not available in CSS3.
a) DOMs
b) Fonts
c) Backgrounds and Borders
d) Color
Answer
Answer: a [Reason:] The Document Object Model (DOM) is a programming API for HTML and XML documents. It defines the logical structure of documents and the way a document is accessed and manipulated.
2. What module introduces the ability to modify CSS property values over time, such as position or color, to create animated layouts?
a) 3D Transforms
b) Animations
c) 2D Transforms
d) Box Model
Answer
Answer: b [Reason:] Visit www.w3.org/TR/css3-animations to know more about it.
3. What module defines the management of generated content for print output, including crop mark indication, header/footer handling, and much more?
a) Behavioral Extensions
b) Generated and Replaced Content
c) Generated Content for Paged Media
d) Grid Positioning
Answer
Answer: c [Reason:] Visit www.w3.org/TR/css3-gcpm to know more about it.
4. What module defines the handling of lists, including marker styles and some aspects of counters?
a) Line Layout
b) Lists
c) Media Queries
d) Namespaces
Answer
Answer: b [Reason:] Visit www.w3.org/TR/css3-lists to know more about it.
5. What module expands the absolute and relative units of measure, including significant changes to support animation and aural changes with time (s and ms) and angle (deg and rad) values?
a) Transitions
b) Template Layout
c) Web Fonts
d) Values and Units
Answer
Answer: d [Reason:] Visit www.w3.org/TR/css3-values to know more about it.
6. Which of the following selector is used to selects siblings?
a) ::after
b) E ~ F
c) :checked
d) E[attr^=value].
Answer
Answer: b [Reason:]
p ~ strong {font-style: italic;}
/* sets the font style to italic on all strong tags that have a p tag as a preceding sibling */
7. Which of the following selector is used to selects the elements that are the default among a set of similar elements?
a) ::after
b) :disabled
c) :default
d) :checked
Answer
Answer: c [Reason:]
:default {background-color: red;}
/* sets the background color of a default button like a submit to red */
8. Which of the following selector is used to selects the element that is the first child of its parent that is of its type?
a) :nth-child(n) b) ::first-line c) :last-of-type d) :first-of-type
Answer
Answer: d [Reason:]
strong:first-of-type {font-size: bigger;}
/* sets the font size bigger on the first strong tag of its parent */
9. Which of the following selector is used to selects the element that is
the nth child of its parent?
a) :nth-child(n) b) ::first-line c) :last-of-type d) :first-of-type
Answer
Answer: a [Reason:]
div:nth-child(2) {background-color: red;}
/* sets the background color to red if the div is its parent’s second child */
10. Which of the following selector is used to selects the element that is
the root of the document?
a) :only-of-type b) :target c) :root d) ::selection
Answer
Answer: d [Reason:]
:root {background-color: blue;}
/* sets the background color to blue for the root element */
11. Which of the following selector is used to select elements that are read-only. When applied to form elements, this would select fields with the readonly attribute set?
a) :valid b) :target c) :read-only d) :required
Answer
Answer: c [Reason:] input:read-only {color: gray;}
/* put all read only fields in gray */
12. Which of the following measurement represent seconds?
a) s
b) se
c) sec
d) second
Answer
Answer: a [Reason:] Example:
#a2 {transition-property: color; transition-duration: 1s;}
CSS MCQ Set 3
1. Which of the following css property specifies an image to use as the background of an element?
a) background
b) background-img
c) background-image
d) none of the mentioned
Answer
Answer: c [Reason:] Self-explainatory.
2. Which of the following css property specifies a delay for the transition effect?
a) transition-delay
b) transition-effect
c) transition
d) transition-duration
Answer
Answer: a [Reason:] Self-explainatory.
3. Which of the following method rotates an element around its Y-axis at a given degree using tranform 3D?
a) rotateY()
b) rotate-Y()
c) rotate-Yaxis()
d) none of the mentioned
Answer
Answer: a [Reason:] Self-explainatory.
4. Which of the following property defines where a 3D element is based in the x- and the y-axis?
a) transform-style
b) perspective(n)
c) perspective-origin
d) none of the mentioned
Answer
Answer: c [Reason:] Self-explainatory.
5. Which of the following css property repeats an image both horizontally and vertically?
a) background
b) background-image
c) background-repeat
d) background-position
Answer
Answer: c [Reason:] Self-explainatory.
6. Which of the following CSS3 property specifies how nested elements are rendered in 3D space?
a) transform
b) transform-style
c) transform-render
d) none of the mentioned
Answer
Answer: c [Reason:] Self-explainatory.
7. Which of the following CSS3 property specifies the intrinsic resolution of all raster images used in/on the element?
a) image-orientation
b) image-rendering
c) image-resolution
d) all of the mentioned
Answer
Answer: c [Reason:] Self-explainatory.
8. Which of the following CSS3 property specifies how the contents of a replaced element should be fitted to the box established by its used height and width?
a) object-fit
b) object-position
c) image-orientation
d) none of the mentioned
Answer
Answer: a [Reason:] Self-explainatory.
9. Which of the following CSS3 property specifies the alignment of the replaced element inside its box?
a) object
b) object-allign
c) object-position
d) object-render
Answer
Answer: c [Reason:] Self-explainatory.
10. Which of the following css property defines whether or not an element should be visible when not facing the screen?
a) visibility
b) backface-control
c) backface-visibility
d) none of the mentioned
Answer
Answer: c [Reason:] Self-explainatory.
CSS MCQ Set 4
1.Which of the following is used to associate a font name to be used in a style sheet with some
downloadable font?
a) @font-face
b) @charset
c) @media
d) !important
Answer
Answer: a [Reason:] None.
2. Which of the following is not value for the font-stretch(Font descriptor)?
a) normal
b) 50%
c) expanded
d) ultra-expanded
Answer
Answer: b [Reason:] None.
3. Which of the following font format is supported by all the latest browser?
a) EOT
b) WOFF2
c) SVG
d) WOFF
Answer
Answer: d [Reason:] None.
4. Which of the following media query describe output style portrait
if height is greater
than or equal to width,
landscape if the
opposite?
a) grid
b) monochrome
c) resolution
d) orientation
Answer
Answer: d [Reason:] None.
5. Which of the following media query describe the ratio of the width to the height of the media?
a) ratio
b) aspect-ratio
c) deviceaspect-ratio
d) resolution
Answer
Answer: b [Reason:] None.
6. Which of the following media query describe describes the height of the screen or full height of the output page?
a) height
b) aspect-ratio
c) device-height
d) resolution
Answer
Answer: c [Reason:] None.
7.Which of the following property sets the style of a font?
a) font
b) style
c) font-style
d) @font-face
Answer
Answer: c [Reason:] Syntax:
font-style: italic | normal | oblique | inherit.
8. Which of the following property specifies whether an element is an accelerator indicator or not?
a) push
b) accelerator
c) jump-start
d) animation
Answer
Answer: b [Reason:] Syntax:
accelerator: true | false.
9. Which of the following property sets a variation of the specified or default font family?
a) fonts
b) font-style
c) font-variant
d) font-weight
Answer
Answer: c [Reason:] Syntax:
font-variant: normal | small-caps.
10.The @font-face rules assign different names to the regular and bold versions of the font.State true or false.
a) True
b) False
Answer
Answer: a [Reason:] Self-explainatory.
CSS MCQ Set 5
1. Which of the following css property should be used to make a responsive image?
a) float
b) max-width
c) margin-right
d) all of the mentioned
Answer
Answer: d [Reason:] Self-explainatory.
2. What should be written in the blank of the code for resizing elements in Responsive Web Design with Transitions
Code: body { background-image: url(fog.jpg); background-size: cover; background-repeat: no-repeat; color: #fff; font-family: Avenir, Arial, sans-serif; } h1 { font-family: 'Calluna Sans', Arial, sans-serif; text-align: center; font-size: 10rem; margin: 8rem auto; } h1 { font-family: 'Calluna Sans', Arial, sans-serif; text-align: center; font-size: 10rem; margin: 8rem auto; transition: 1s font-size linear; } ______________ and (max-width: 1100px) { h1 { font-size: 8rem; }
a) @media
b) @media screen
c) div
d) transform
Answer
Answer: b [Reason:] None.
3. What should be written in the blank of the code for JQuery Code Used to Apply CSS3 Animations?
Code: _________ leftmove { 100% { transform: translateX(-70px); opacity: 1; } } _________ rightmove { 100% { transform: translateX(70px); opacity: 1; } } <script> $(function() { var footerBottom = $("#articlefooter").offset().top + $("#articlefooter").height(); $(window).scroll(function() { if ($(this).scrollTop() > (footerBottom - $(window).height())) { 131 $("#prevpage").css('animation', 'leftmove 1s 2s forwards'); $("#nextpage").css('animation', 'rightmove 1s 1s forwards'); }); }); </script>
a) @media
b) @keyframes
c) animation-name
d) !important
Answer
Answer: b [Reason:] None.
4. Which of the following CSS framework is used to create a responsive design?
a) larawell
b) bootstrap
c) rails
d) django
Answer
Answer: b [Reason:] Bootstrap is a free and open-source collection of tools for creating websites and web applications. It contains HTML- and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions. It aims to ease the development of dynamic websites and web applications.
5. Which of the following code set the webpage correctly displayed on a device?
a) <meta name="viewport" content="width=device-width, initial-scale=1.0"> b) <meta name="viewport" content="width=device-width, initial-scale=2.0"> c) <meta name="viewport" content="width=device-width, initial-scale='parent-size'"> d) <meta name="viewports" content="width=device-width, initial-scale=1.0">
Answer
Answer: a [Reason:] Self-explainatory.
6. What does this code do?
Code: @media only screen and (max-width: 500px) { body { background-color: lightblue; } }
a) If the browser window is smaller than 500px, the background color will change to lightblue:
b) If the browser window is larger than 500px, the background color will change to lightblue:
c) The background color will change to lightblue
d) Nothing happens
Answer
Answer: a [Reason:] Self-explainatory.
7. What does this code do?
Code: @media only screen and (orientation: landscape) { body { background-color: lightblue; } }
a) web page will have a lighblue background if the orientation is in landscape mode
b) web page will have a lighblue background if the orientation is not in landscape mode
c) web page will have a red background if the orientation is in landscape mode
d) None of the mentioned
Answer
Answer: a [Reason:] Self-explainatory.
8. Which of the following css propery defines a relationship between bound elements(s) and some code or content?
a) @import
b) @media
c) url-bind
d) binding
Answer
Answer: d [Reason:]
Syntax: binding: none | url(bindingfile)
9. What does this code do?
Code: @media only screen and (max-width: 768px) { class*="col-"] { width: 100%; } }
a) When the screen gets larger than 768px, each column should have a width of 100%.
b) When the screen gets smaller than 768px, each column should have a width of 100%.
c) Error occured
d) None of the mentioned
Answer
Answer: b [Reason:] Self-explainatory.
10. Which of the following css propery define the properties that will be animated in an animation rule?
a) @keyframes
b) animation-origin
c) transform
d) animation
Answer
Answer: d [Reason:]
Syntax: @keyframes: keyframe-name {percentage | from | to {cssrules}}
