wayground logo

Free Printable Worksheets

NEW

Font size

S
M
L
XL
Worksheets

CSS, SCSS, Animation and Responsive

Total questions: 10

Worksheet time: 8mins

Name
Class
Date
1.
Which Sass function is used to get the value for the specified key in the map?
a)
get(map, key)
b)
map-element(map, key)
c)
map-value(map, key)
d)
map-get(map, key)
2.
Which directive allows you to include the content of one file in another?
a)
@include
b)
@define
c)
@import
d)
All of the above
3.
Which is the correct syntax to define a mixin?
a)
@mixin name { property: value; property: value;}
b)
@import mixin name { property: value; property: value; }
c)
@mixin name .sass{ property: value; property: value; }
d)
@mixin name { @import _filename; }
4.
Which directive is used to share a set of CSS properties from one selector to another?
a)
@share
b)
@import
c)
@transfer
d)
@extend
5.
How do we add flex box to an html element?
a)
display: flex;
b)
position: flex;
c)
display: block;
d)
flex: true;
6.
What does flex-direction allow you to do?
a)
define how to position elements vertically
b)
define what direction the elements will flow in with in the parent container i.e. row or column
c)
defines how position elements horizontally
d)
define how elements will wrap when the browser width is changed
7.
How can we specify space between the cells in CSS grid?
a)
margin
b)
padding
c)
grid-gap
d)
space
8.
In the following code, how does the method scale(3,6) affect the element to which it is applied?transform: scale(3,6)
a)
transforms the width to be 3 times and the height 6 times its original size
b)
transforms the height to be 3 times and the width 6 times its original size
c)
moves the element 33 units from the top and 6 units from the right
d)
transforms the height to be 3 times and the width 6 times its original size
9.
Which of the following is the correct way to write the @keyframes rule?
a)
keyframes example1 {from {top:0px;}to {top: 200px;background-color: blue;}}
b)
@keyframes example1 {from {top:0px;}to {top: 200px;background-color: blue;}
c)
None of the above
d)
@keyframes example1 {from {top: 0px;}}
10.
You want to move an element 150 pixels from the left and 100 pixels from the top. Which code snippets is correct?
a)
transform: translate(150px,100px)
b)
translate: transform(100px,150px)
c)
translate: transform(150px,100px)
d)
transform: translate(100px,150px)