Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages
Filter by Categories
nmims post
Objective Type Set
Online MCQ Assignment
Question Solution
Solved Question
Uncategorized

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

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

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

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

View 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

View 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

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

View 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

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

View 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

View 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

View 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

View 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

View 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

View 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

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

View 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

View 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

View 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

View 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

View 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

View 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

View 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

View 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

View 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

View 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

View 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

View 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

View 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

View 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

View 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

View 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

View 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

View 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

View 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

View 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

View 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

View 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

View 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

View 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

View 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

View 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

View 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

View 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

View 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

View 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

View 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">

View 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

View 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

View 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

View 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

View 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

View Answer

Answer: d [Reason:]

Syntax: @keyframes: keyframe-name {percentage | from | to {cssrules}}