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
Explanation: 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
Explanation: 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
Explanation: 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
Explanation: 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">
Explanation: 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
Explanation: 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
Explanation: 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
Explanation:
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
Explanation: 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
Explanation:
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.
- Practice HTML MCQ
- Apply for CSS Internship
- Buy CSS Books
- Apply for Computer Science Internship
- Practice Information Science MCQs