CSS Questions & Answers – CSS3 Animation with Responsive Web Design

This set of CSS Multiple Choice Questions & Answers (MCQs) focuses on “CSS3 Animation with Responsive Web Design”.

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

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

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

4. Which of the following CSS framework is used to create a responsive design?
a) larawell
b) bootstrap
c) rails
d) django
View Answer

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

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

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

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

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

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

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

Sanfoundry Global Education & Learning Series – CSS.

To practice all areas of CSS, here is complete set of 1000+ Multiple Choice Questions and Answers.