CSS Questions & Answers – CSS3 Animation with Responsive Web Design

This set of CSS Questions and Answers for Entrance exams 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 for Entrance exams, here is complete set of 1000+ Multiple Choice Questions and Answers.

If you find a mistake in question / option / answer, kindly take a screenshot and email to [email protected]