MCQs
Of Class 23
Enhancing
HTML with CSS(Box Model)
1.What is the Box Model in CSS?
A) Defines how content
is arranged in an HTML element
B) Describes the outer
area of an HTML element, including padding and margins
C) Specifies the color
of an HTML element
D) Specifies the font
of an element
Answer: B
Explanation: The CSS Box Model defines the outer area of
an element, including its content, padding, border, and margin.
2.Which of the following is NOT part of the Box
Model?
A) Content
B) Padding
C) Border
D) Height
Answer: D
Explanation: Height is not part of the Box Model; it's a
property used to set the size of an element.
3.What does the box-sizing: border-box property do?
A) Includes padding and
border in the width and height calculation
B) Excludes padding and
border in the width and height calculation
C) Adds border to the
element
D) Increases the
padding of the element
Answer: A
Explanation: box-sizing:
border-box ensures that padding
and border are included within the width and height of the element.
4.Which property controls the space inside an
element, between the content and the border?
A) Margin
B) Padding
C) Border
D) Width
Answer: B
Explanation: Padding is the space between the content and
the border inside an element.
5.In the Box Model, which property controls the
space outside an element?
A) Margin
B) Padding
C) Border
D) Height
Answer: A
Explanation: Margin is the space outside an element,
pushing it away from other elements.
6.Which of the following will increase the size of
the element's box without changing its width or height?
A) Border
B) Padding
C) Margin
D) None of the above
Answer: A
Explanation: Adding a border increases the size of the
box, but it does not affect the element's width or height directly.
7.What does the width: 300px property define in the Box Model?
A) The content width
B) The total width
including padding and border
C) The padding of the
box
D) The height of the
element
Answer: A
Explanation: The width property defines the
width of the content area in the Box Model.
8.What is the default value of box-sizing in CSS?
A) border-box
B) padding-box
C) content-box
D) box
Answer: C
Explanation: The default value of box-sizing is content-box, which means padding
and border are not included in the element's total width and height.
9.What does display: flex do in CSS?
A) Makes the container
a grid
B) Makes the container
a flex container, enabling flexbox layout
C) Centers content
horizontally
D) Changes the font
size of the container
Answer: B
Explanation: display:
flex turns the container into a flex
container, enabling the use of flexbox layout.
10.Which property is used to align flex items
horizontally in a flex container?
A) justify-content
B) align-items
C) align-self
D) flex-align
Answer: A
Explanation: justify-content is used to align flex items horizontally along the main
axis.
11.What is the purpose of the align-items property in flexbox?
A) Aligns the items
horizontally
B) Aligns the items
vertically
C) Defines the space
between items
D) Sets the direction
of the items
Answer: B
Explanation: align-items is used to align flex items vertically (along the cross
axis).
12.Which property is used to control the direction
of flex items?
A) flex-direction
B) flex-align
C) justify-content
D) align-items
Answer: A
Explanation: flex-direction controls the direction of flex items, such as row or column.
13.What does justify-content: space-between do in a flex container?
A) Distributes space
equally between items
B) Aligns items at the
center of the container
C) Places the first
item at the start and the last at the end, with equal space between them
D) Aligns items at the
end of the container
Answer: C
Explanation: justify-content:
space-between places the first item
at the start, the last at the end, and distributes space between them.
14.Which property is used to make flex items wrap
onto new lines?
A) flex-wrap
B) flex-direction
C) wrap-items
D) align-items
Answer: A
Explanation: flex-wrap allows flex items to wrap onto new lines if necessary.
15.What is the default value of flex-wrap?
A) wrap
B) nowrap
C) wrap-reverse
D) flex
Answer: B
Explanation: The default value of flex-wrap is nowrap, meaning items will
not wrap by default.
16.What is the purpose of CSS Grid Layout?
A) Allows creating
responsive columns
B) Helps position
elements using rows and columns
C) Aligns elements
vertically and horizontally
D) Changes the element
size
Answer: B
Explanation: CSS Grid allows you to create layouts by
defining rows and columns.
17.Which property defines the number of columns in a
grid layout?
A) grid-template-columns
B) grid-columns
C) grid-template-rows
D) grid-columns-count
Answer: A
Explanation: grid-template-columns defines the number and size of columns in a grid.
18.How can you specify the gap between grid items?
A) gap
B) grid-gap
C) grid-spacing
D) row-gap
Answer: A
Explanation: gap is used to define the space between grid items.
19.What does grid-template-rows: 100px 200px do?
A) Defines the height
of the first row as 100px and the second row as 200px
B) Defines the width of
the columns
C) Sets the margin for
the rows
D) Defines the
background color of the rows
Answer: A
Explanation: grid-template-rows:
100px 200px defines the height of
the first and second rows in a grid.
20.Which of the following values is used to create
an equal column layout in CSS Grid?
A)
grid-template-columns: 1fr 1fr 1fr
B) grid-template-rows:
100px 100px
C)
grid-template-columns: auto
D)
grid-template-columns: 50% 50%
Answer: A
Explanation: 1fr divides the space equally, so grid-template-columns: 1fr 1fr 1fr creates three equal-width columns.
21.Which property is used to create a shadow effect
in CSS?
A) shadow
B) box-shadow
C) text-shadow
D) shadow-effect
Answer: B
Explanation: The box-shadow property is used
to apply a shadow effect to an element.
22.What is the syntax for applying a shadow with a
10px horizontal and 10px vertical offset, and 15px blur?
A) box-shadow: 10px
10px 15px rgba(0, 0, 0, 0.5)
B) box-shadow: 15px
10px rgba(0, 0, 0, 0.5)
C) box-shadow: 10px
10px 0px rgba(0, 0, 0, 0.5)
D) box-shadow: 15px 0px
10px rgba(0, 0, 0, 0.5)
Answer: A
Explanation: box-shadow:
10px 10px 15px rgba(0, 0, 0, 0.5) defines
a shadow with a 10px horizontal and 10px vertical offset, and a 15px blur.
23.How can you add an inset shadow to an element?
A) By adding inset keyword in box-shadow
B) By adding text-shadow property
C) By setting box-shadow to none
D) By using shadow-inset property
Answer: A
Explanation: The inset keyword in box-shadow creates a shadow
inside the element.
24.What is the purpose of media queries in CSS?
A) To apply styles
based on the screen size or device characteristics
B) To apply styles to
specific elements
C) To animate elements
D) To load external
files
Answer: A
Explanation: Media queries allow you to apply styles
based on the screen size or other device characteristics.
25.Which of the following is an example of a media
query for screens with a width of 600px or less?
A) @media (max-width: 600px) { ... }
B) @media (min-width: 600px) { ... }
C) @media (width: 600px) { ... }
D) @media 600px { ... }
Answer: A
Explanation: @media
(max-width: 600px) applies styles when
the screen width is 600px or less.
26.What does vw stand for in responsive design?
A) Vertical width
B) Viewport width
C) Vertical window
D) Variable width
Answer: B
Explanation: vw stands for viewport width, and 1vw equals 1% of the
viewport's width.
27.What is the function of the meta viewport tag in HTML?
A) It defines the width
of the page
B) It specifies how the
page should be displayed on mobile devices
C) It sets the
background color
D) It links external
CSS files
Answer: B
Explanation: The meta viewport tag ensures
proper scaling and rendering of the page on mobile devices.
28.What does align-items: stretch do in a flex
container?
A) Stretches the items
to fill the container's cross-axis
B) Aligns items at the
center of the cross-axis
C) Aligns items at the
start of the cross-axis
D) Stretches the
container
Answer: A
Explanation: align-items:
stretch makes the flex items stretch to
fill the available space along the cross axis.
29.Which of the following
properties allows a flex item to grow or shrink in size?
A) flex-grow
B) flex-shrink
C) flex-basis
D) All of the above
Answer: D
Explanation: flex-grow, flex-shrink, and flex-basis are the three properties used to control the flex item's
ability to grow or shrink.
30.What is the default
value of flex-shrink?
A) 1
B) 0
C) auto
D) inherit
Answer: A
Explanation: The default value of flex-shrink is 1, meaning the item can
shrink if necessary.
31.What is the purpose of
the order property in
flexbox?
A) It controls the
order in which flex items appear
B) It defines the size
of the flex item
C) It sets the
alignment of flex items
D) It defines the space
between flex items
Answer: A
Explanation: The order property allows you to
rearrange the order of flex items in the container without changing the HTML
structure.
32.How do you create a 3x3 grid in CSS?
A)
grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);
B)
grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr;
C)
grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 2fr 2fr 2fr;
D)
grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 2fr 2fr 1fr;
Answer: B
Explanation: grid-template-columns:
1fr 1fr 1fr and grid-template-rows: 1fr 1fr 1fr create a 3x3 grid, where each column and row has equal width
and height.
33.What property is used
to create grid gaps between rows and columns?
A) grid-gap
B) grid-row-gap and
grid-column-gap
C) gap
D) grid-spacing
Answer: C
Explanation: The gap property is used to
define the space between both rows and columns in a grid layout.
34.What does grid-template-areas allow you to do in
CSS Grid?
A) Define grid items'
size
B) Control the order of
items in the grid
C) Define specific
areas for items within the grid layout
D) Adjust the grid's
overall layout direction
Answer: C
Explanation: grid-template-areas allows you to define named areas for grid items within the
grid, which you can use for more flexible and readable layout design.
35.How do you span a grid
item across multiple rows in CSS Grid?
A) grid-row: span 2;
B) grid-row: 2 / 4;
C) grid-column: span 2;
D) Both A and B
Answer: D
Explanation: Both grid-row: span 2; and grid-row: 2 / 4; will
span the grid item across multiple rows.
36.Which of the following
is the correct syntax for a box-shadow with a 5px horizontal offset, 10px
vertical offset, and a 2px blur with a color of rgba(0, 0, 0, 0.7)?
A) box-shadow: 5px 10px
2px rgba(0, 0, 0, 0.7);
B) box-shadow: 5px 10px
0px rgba(0, 0, 0, 0.7);
C) box-shadow: 0px 5px
2px rgba(0, 0, 0, 0.7);
D) box-shadow: 10px 5px
2px rgba(0, 0, 0, 0.7);
Answer: A
Explanation: box-shadow:
5px 10px 2px rgba(0, 0, 0, 0.7); applies
the correct shadow with a 5px horizontal offset, 10px vertical offset, and 2px
blur.
37.How do you apply an
inset box shadow effect?
A) box-shadow: inset
0px 0px 10px rgba(0, 0, 0, 0.5);
B) box-shadow: 0px 0px
10px rgba(0, 0, 0, 0.5);
C) box-shadow: 0px 0px
10px;
D) box-shadow: inset rgba(0,
0, 0, 0.5);
Answer: A
Explanation: The inset keyword is used to
apply an inner shadow effect in the box-shadow property.
38.What is the benefit of using rem in responsive design?
A) It scales based on
the element's parent size
B) It scales based on
the root element's font size
C) It does not scale at
all
D) It makes the font
size responsive based on screen width
Answer: B
Explanation: rem stands for "root em" and scales based on the root
element's font size, making it ideal for responsive design.
39.Which property helps
make images responsive in CSS?
A) max-width: 100%;
B) width: 100%;
C) height: auto;
D) All of the above
Answer: D
Explanation: Using max-width: 100%, width: 100%, and height: auto helps
make images scale responsively according to the viewport.
40.What is the primary
use of the @media rule in CSS?
A) To add external
stylesheets based on screen size
B) To apply styles
based on the conditions like screen size, resolution, and orientation
C) To adjust the layout
for different browsers
D) To add JavaScript
code based on screen size
Answer: B
Explanation: The @media rule allows you
to apply styles based on specific conditions such as screen size, resolution,
and orientation.
41.What does min-width mean in a media query?
A) It applies styles
for screens with a width greater than or equal to the specified value
B) It applies styles
for screens with a width smaller than the specified value
C) It applies styles
for all screen sizes
D) It defines the
minimum width of an element
Answer: A
Explanation: min-width applies the styles to screens that are at least as wide as
the specified value.
42.What does the vh unit represent in responsive design?
A) Viewport height
B) Vertical height
C) Vertical width
D) View height
Answer: A
Explanation: vh stands for viewport height, where 1vh is equal to 1% of the
height of the viewport.
43.What does flex-grow: 2 do to a flex item?
A) It makes the item
grow twice as much as other items
B) It makes the item
twice as wide as others
C) It shrinks the item
D) It adds padding to
the item
Answer: A
Explanation: flex-grow:
2 makes the flex item grow twice as much as other items with
a flex-grow value
of 1.
44.Which of the following
properties can be used to set the initial size of a flex item?
A) flex-grow
B) flex-shrink
C) flex-basis
D) flex-align
Answer: C
Explanation: flex-basis sets the initial size of the flex item before any flex grow
or shrink occurs.
45.Which of the following is NOT a common unit used in
responsive design?
A) vw
B) px
C) em
D) rem
Answer: B
Explanation: px (pixels) is not recommended for responsive design because it
does not scale with screen size, unlike vw, em, or rem.
46.Which CSS rule makes
the layout of a website adapt to different screen sizes?
A) @media query
B) width: 100%
C) flex
D) float
Answer: A
Explanation: The @media query is used to
make the layout responsive by applying different styles based on the screen
size.