Font size
WorksheetsCSS Day-2
Total questions: 25
Worksheet time: 16mins
Which CSS property controls how an element is displayed?
position
float
display
visibility
If you want a flex container to lay out its items vertically from bottom to top, which property and value should you use ?
flex-direction: column;
flex-direction: column-reverse;
flex-wrap: wrap-reverse;
justify-content: flex-end;
Which positioning value removes an element from the normal document flow and positions it relative to its nearest positioned ancestor
static
relative
fixed
absolute
Which property sets the main axis direction?
flex-wrap
justify-content
flex-direction
flex-direction
What is the main purpose of the viewport meta tag in responsive design?
To set the background color for mobile devices.
To control the layout viewport and prevent mobile browsers from rendering at desktop widths.
To enable the use of CSS Grid on mobile screens.
To automatically resize all images to 100% width.
flex-direction affects which axis?
Cross axis
Both axes
Main axis
Inline axis
An element is styled with position: sticky; top: 0;. Which of the following best describes its behavior during scrolling?
It remains permanently at the top of the viewport and ignores all other content.
justify-contentIt acts like position: relative until its top edge reaches the top of the viewport, then it acts like position: fixed.
It is removed from the normal document flow and stays 0px from the top of the nearest ancestor.
It only becomes visible when the user scrolls to the top of the page.
When flex-wrap: wrap, extra items move to the __________.
previous line
next line
same line
center
What does justify-content control in Flexbox?
Alignment on the cross axis
Alignment on the main axis
Text alignment
Vertical centering only
Consider a grid container defined with grid-template-columns: 1fr 2fr 1fr;. If the total width of the container is 800px and there is no gap, what is the width of the second column?
(a)
Which value centers items along the cross axis?
center
stretch
flex-start
flex-end
align-items is applied on the __________.
flex item
child element
flex container
text node
Which property makes an element a grid container?
display: flex
display: flex
display: block
position: grid
CSS Grid is mainly used for (a) -dimensional layouts.
Which property is used to define grid rows?
grid-rows
grid-template-rows
row-template
grid-auto-rows
The fr unit stands for (a) unit.
What is Responsive Web Design?
Designing only for desktop
Designing fixed-width layouts
Designing layouts that adapt to different screen sizes
Designing mobile apps
Which CSS feature is mainly used to create responsive layouts?
(a)
max-width: 100% prevents images from (a) their container.
Where is the viewport meta tag placed?
body
footer
head
header
Which is the correct syntax for the viewport meta tag?
<meta viewport="width=device-width">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<viewport meta="device-width">
<meta device-width="true">
Responsive design depends on viewport and (a) queries.
1vw is equal to:
1% of parent width
1% of parent width
1px
10% of viewport
Which unit is relative to the root (html) font size?
em
%
rem
vw
Percentage (%) units are relative to the (a) element.
