🎨 130+ Questions • Updated 2026

CSS
Multiple Choice Questions

Master CSS with 130+ curated MCQs covering selectors, box model, flexbox, grid, responsive design, animations, and more. Perfect for exams, interviews, and placements.

📚12 Topics

✅130+ Questions

🎯Exam Ready

📚Explore CSS Topics

📝CSS MCQs(131 questions)

What does CSS stand for?

A
Cascading Style Sheets
B
Creative Style Sheets
C
Computer Style Sheets
D
Colorful Style Sheets

Show Answer

✓ A. Cascading Style Sheets

Which HTML tag is used to define an internal style sheet?

A
<style>
B
<css>
C
<script>
D
<link>

Show Answer

✓ A. <style>

Which property is used to change the background color?

A
background-color
B
color
C
bgcolor
D
background

Show Answer

✓ A. background-color

How do you add a comment in CSS?

A
// comment
B
/* comment */
C
D
# comment

Show Answer

✓ B. /* comment */

Which CSS property controls the text size?

A
font-size
B
text-size
C
font-style
D
size

Show Answer

✓ A. font-size

Which is the correct CSS syntax?

A
body {color: black;}
B
body {color: black}
C
body:color=black;
D
{body:color=black;}

Show Answer

✓ A. body {color: black;}

Which selector is used to select elements with a specific class?

A
.class
B
#class
C
*class
D
class

Show Answer

✓ A. .class

Which selector is used to select an element with a specific id?

A
#id
B
.id
C
*id
D
id

Show Answer

✓ A. #id

What does the universal selector (*) do?

A
Selects all elements
B
Selects the first element
C
Selects the last element
D
Selects elements with a class

Show Answer

✓ A. Selects all elements

Which selector selects elements that are direct children of a specific parent?

A
parent > child
B
parent child
C
parent + child
D
parent ~ child

Show Answer

✓ A. parent > child

What is the difference between a class and an id selector?

A
An id is unique; a class can be used multiple times
B
A class is unique; an id can be used multiple times
C
Both are the same
D
Id is used for styling, class for scripting

Show Answer

✓ A. An id is unique; a class can be used multiple times

Which attribute selector selects elements with a specific attribute?

A
[attribute]
B
#attribute
C
.attribute
D
*attribute

Show Answer

✓ A. [attribute]

What does the CSS box model consist of?

A
Content, padding, border, margin
B
Content, border, margin
C
Padding, border, margin
D
Content, padding, margin

Show Answer

✓ A. Content, padding, border, margin

Which property is used to add space inside an element's border?

A
padding
B
margin
C
spacing
D
border-spacing

Show Answer

✓ A. padding

Which property is used to add space outside an element's border?

A
margin
B
padding
C
border
D
outline

Show Answer

✓ A. margin

What is the default value of the box-sizing property?

A
content-box
B
border-box
C
padding-box
D
margin-box

Show Answer

✓ A. content-box

Which property allows you to round the corners of an element?

A
border-radius
B
border-corner
C
corner-radius
D
radius

Show Answer

✓ A. border-radius

What is the difference between margin and padding?

A
Margin is outside the border; padding is inside
B
Padding is outside; margin is inside
C
Both are the same
D
Margin affects background, padding does not

Show Answer

✓ A. Margin is outside the border; padding is inside

Which CSS property is used to set the text color?

A
color
B
text-color
C
font-color
D
foreground-color

Show Answer

✓ A. color

Which property is used to set a background image?

A
background-image
B
bg-image
C
background
D
image

Show Answer

✓ A. background-image

Which value of background-repeat prevents the background image from repeating?

A
no-repeat
B
repeat
C
repeat-x
D
repeat-y

Show Answer

✓ A. no-repeat

What is the correct way to specify a linear gradient in CSS?

A
background: linear-gradient(red, yellow);
B
background: gradient(red, yellow);
C
background: linear(red, yellow);
D
background: gradient-linear(red, yellow);

Show Answer

✓ A. background: linear-gradient(red, yellow);

Which CSS color value represents a color using opacity?

A
rgba()
B
rgb()
C
hex
D
hsl()

Show Answer

✓ A. rgba()

What does the background-size property do?

A
Sets the size of the background image
B
Sets the size of the element
C
Sets the size of the text
D
Sets the padding

Show Answer

✓ A. Sets the size of the background image

Which property is used to change the font family of text?

A
font-family
B
font-style
C
font-weight
D
font-size

Show Answer

✓ A. font-family

Which property is used to make text bold?

A
font-weight: bold;
B
font-style: bold;
C
text-decoration: bold;
D
font: bold;

Show Answer

✓ A. font-weight: bold;

Which property is used to underline text?

A
text-decoration: underline;
B
text-underline: yes;
C
font-decoration: underline;
D
underline: true;

Show Answer

✓ A. text-decoration: underline;

Which property is used to change the text alignment?

A
text-align
B
align-text
C
horizontal-align
D
text-justify

Show Answer

✓ A. text-align

Which property is used to set the spacing between lines?

A
line-height
B
letter-spacing
C
word-spacing
D
text-spacing

Show Answer

✓ A. line-height

Which property is used to create a drop cap effect?

A
::first-letter
B
::first-line
C
:first-letter
D
:first-line

Show Answer

✓ A. ::first-letter

Which display value creates a flex container?

A
display: flex;
B
display: block;
C
display: inline;
D
display: grid;

Show Answer

✓ A. display: flex;

Which property defines the direction of flex items?

A
flex-direction
B
flex-wrap
C
flex-flow
D
justify-content

Show Answer

✓ A. flex-direction

Which property aligns flex items along the main axis?

A
justify-content
B
align-items
C
align-content
D
align-self

Show Answer

✓ A. justify-content

Which property aligns flex items along the cross axis?

A
align-items
B
justify-content
C
align-content
D
align-self

Show Answer

✓ A. align-items

What does flex-wrap: wrap; do?

A
Allows items to wrap onto multiple lines
B
Prevents items from wrapping
C
Wraps items in reverse order
D
Automatically adjusts item size

Show Answer

✓ A. Allows items to wrap onto multiple lines

Which property controls the ability of a flex item to grow?

A
flex-grow
B
flex-shrink
C
flex-basis
D
flex

Show Answer

✓ A. flex-grow

Which display value creates a grid container?

A
display: grid;
B
display: flex;
C
display: block;
D
display: inline-grid;

Show Answer

✓ A. display: grid;

Which property defines the columns of a grid?

A
grid-template-columns
B
grid-template-rows
C
grid-columns
D
grid-rows

Show Answer

✓ A. grid-template-columns

Which property defines the rows of a grid?

A
grid-template-rows
B
grid-template-columns
C
grid-rows
D
grid-columns

Show Answer

✓ A. grid-template-rows

What does the fr unit represent in CSS Grid?

A
Fractional unit of available space
B
Fixed unit
C
Percentage
D
Pixel

Show Answer

✓ A. Fractional unit of available space

Which property specifies the gap between grid rows?

A
row-gap
B
column-gap
C
grid-gap
D
gap

Show Answer

✓ A. row-gap

How do you place a grid item in a specific column?

A
grid-column-start / grid-column-end
B
grid-row-start / grid-row-end
C
grid-area
D
Both A and C

Show Answer

✓ D. Both A and C

Which CSS position value removes the element from normal flow?

A
absolute
B
relative
C
fixed
D
sticky

Show Answer

✓ A. absolute

Which position value positions an element relative to its normal position?

A
relative
B
absolute
C
fixed
D
static

Show Answer

✓ A. relative

Which position value positions an element relative to the viewport?

A
fixed
B
absolute
C
relative
D
static

Show Answer

✓ A. fixed

What is the default value of the position property?

A
static
B
relative
C
absolute
D
inherit

Show Answer

✓ A. static

Which property is used to control the stacking order of positioned elements?

A
z-index
B
order
C
stack
D
layer

Show Answer

✓ A. z-index

What is the difference between position: sticky and position: fixed?

A
Sticky toggles between relative and fixed based on scroll
B
Fixed toggles between relative and absolute
C
Both are the same
D
Sticky is only for tables

Show Answer

✓ A. Sticky toggles between relative and fixed based on scroll

Which CSS feature is used to apply styles based on screen size?

A
Media Queries
B
Viewport Meta Tag
C
Flexbox
D
Grid

Show Answer

✓ A. Media Queries

What is the correct syntax for a media query targeting screens with max-width 600px?

A
@media (max-width: 600px) { ... }
B
@media screen and (max-width: 600px) { ... }
C
@media max-width: 600px { ... }
D
Both A and B

Show Answer

✓ D. Both A and B

Which CSS unit is relative to the viewport height?

A
vh
B
vw
C
vmin
D
vmax

Show Answer

✓ A. vh

Which CSS unit is relative to the viewport width?

A
vw
B
vh
C
vmin
D
vmax

Show Answer

✓ A. vw

What is a mobile-first approach in CSS?

A
Design for mobile first, then scale up
B
Design for desktop first, then scale down
C
Design for tablet first
D
Design for all devices simultaneously

Show Answer

✓ A. Design for mobile first, then scale up

Which meta tag is used to control the viewport on mobile devices?

A
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
B
<meta name='mobile' content='width=device-width'>
C
<meta name='screen' content='width=device-width'>
D
<meta name='responsive' content='yes'>

Show Answer

✓ A. <meta name='viewport' content='width=device-width, initial-scale=1.0'>

Which property is used to create a smooth transition effect?

A
transition
B
animation
C
transform
D
keyframes

Show Answer

✓ A. transition

Which CSS rule is used to define keyframes for animation?

A
@keyframes
B
@frames
C
@animation
D
@move

Show Answer

✓ A. @keyframes

Which property defines the duration of an animation?

A
animation-duration
B
transition-duration
C
animation-timing-function
D
transition-timing-function

Show Answer

✓ A. animation-duration

Which property makes an element rotate?

A
transform: rotate(45deg);
B
transform: skew(45deg);
C
transform: scale(1.5);
D
transform: translate(45px);

Show Answer

✓ A. transform: rotate(45deg);

What is the difference between transition and animation?

A
Transition is triggered by state change; animation runs automatically
B
Animation is triggered by state change; transition runs automatically
C
They are the same
D
Transition can repeat, animation cannot

Show Answer

✓ A. Transition is triggered by state change; animation runs automatically

Which property specifies the number of times an animation should run?

A
animation-iteration-count
B
animation-count
C
animation-repeat
D
animation-play-state

Show Answer

✓ A. animation-iteration-count

How do you define a CSS variable?

A
--variable-name: value;
B
$variable-name: value;
C
@variable-name: value;
D
var: variable-name: value;

Show Answer

✓ A. --variable-name: value;

How do you use a CSS variable?

A
var(--variable-name)
B
var(variable-name)
C
$(variable-name)
D
@(variable-name)

Show Answer

✓ A. var(--variable-name)

Where should CSS variables be defined to be globally accessible?

A
:root
B
html
C
body
D
*

Show Answer

✓ A. :root

Can CSS variables be used in media queries?

A
Yes
B
No
C
Only in some browsers
D
Only if defined inline

Show Answer

✓ A. Yes

Which function is used to set a fallback value for a CSS variable?

A
var(--name, fallback)
B
fallback(--name)
C
set(--name, fallback)
D
use(--name, fallback)

Show Answer

✓ A. var(--name, fallback)

What is the scope of a CSS variable defined inside a specific selector?

A
Only within that selector and its children
B
Global to the entire document
C
Only within that selector
D
Only within the parent of that selector

Show Answer

✓ A. Only within that selector and its children

Which CSS property is used to hide an element while still taking up space?

A
visibility: hidden;
B
display: none;
C
opacity: 0;
D
hidden: true;

Show Answer

✓ A. visibility: hidden;

Which selector selects elements that are first child of their parent?

A
:first-child
B
:first-of-type
C
:nth-child(1)
D
All of the above

Show Answer

✓ D. All of the above

Which property is used to set the width of an element including padding and border?

A
box-sizing: border-box;
B
box-sizing: content-box;
C
width: 100%;
D
padding-box

Show Answer

✓ A. box-sizing: border-box;

Which property is used to set the opacity of an element?

A
opacity
B
transparency
C
alpha
D
filter: opacity

Show Answer

✓ A. opacity

Which property is used to capitalize text?

A
text-transform: capitalize;
B
text-transform: uppercase;
C
font-variant: small-caps;
D
capitalize: yes;

Show Answer

✓ A. text-transform: capitalize;

Which property is used to change the order of flex items?

A
order
B
flex-order
C
item-order
D
align-self

Show Answer

✓ A. order

Which property is used to define areas for grid items?

A
grid-template-areas
B
grid-areas
C
grid-template
D
grid-area

Show Answer

✓ A. grid-template-areas

Which property is used to clip an element?

A
clip
B
clip-path
C
overflow
D
Both A and B

Show Answer

✓ D. Both A and B

What is a breakpoint in responsive design?

A
A specific screen width where the layout changes
B
A CSS property
C
A JavaScript function
D
A type of media

Show Answer

✓ A. A specific screen width where the layout changes

Which property specifies the timing function of a transition?

A
transition-timing-function
B
transition-delay
C
transition-property
D
transition-duration

Show Answer

✓ A. transition-timing-function

Can CSS variables be used in calc() functions?

A
Yes
B
No
C
Only if numeric
D
Only in some browsers

Show Answer

✓ A. Yes

What does the 'inherit' keyword do?

A
Takes the value from the parent element
B
Sets the default value
C
Resets the property
D
Defines a custom value

Show Answer

✓ A. Takes the value from the parent element

Which selector selects the last child of a parent?

A
:last-child
B
:last-of-type
C
:nth-last-child(1)
D
All of the above

Show Answer

✓ D. All of the above

Which property is used to add a shadow to an element?

A
box-shadow
B
shadow
C
element-shadow
D
border-shadow

Show Answer

✓ A. box-shadow

Which property is used to set multiple background images?

A
background-image
B
background
C
backgrounds
D
image

Show Answer

✓ B. background (with multiple values)

Which property is used to set the distance between characters?

A
letter-spacing
B
word-spacing
C
character-spacing
D
text-spacing

Show Answer

✓ A. letter-spacing

Which property aligns a single flex item along the cross axis?

A
align-self
B
align-items
C
justify-self
D
order

Show Answer

✓ A. align-self

Which property is used to name grid lines?

A
grid-template-rows
B
grid-template-columns
C
grid-line-names
D
grid-name

Show Answer

✓ B. grid-template-columns (using [name])

What is the purpose of the 'overflow' property?

A
Controls what happens when content overflows the box
B
Hides the element
C
Adds a scrollbar
D
Both A and C

Show Answer

✓ D. Both A and C

Which unit is relative to the font size of the root element?

A
rem
B
em
C
px
D
pt

Show Answer

✓ A. rem

Which property is used to make an element scale?

A
transform: scale(2);
B
transform: rotate(2);
C
transform: skew(2);
D
transform: translate(2);

Show Answer

✓ A. transform: scale(2);

Can CSS variables be used in combination with calc()?

A
Yes
B
No
C
Only if variables are numeric
D
Only in some browsers

Show Answer

✓ A. Yes

Which property is used to control the cursor style?

A
cursor
B
pointer
C
cursor-style
D
mouse

Show Answer

✓ A. cursor

Which selector selects elements that have no children?

A
:empty
B
:blank
C
:void
D
:null

Show Answer

✓ A. :empty

Which property is used to set the outline of an element?

A
outline
B
border
C
shadow
D
box-shadow

Show Answer

✓ A. outline

Which color value uses a hue, saturation, and lightness?

A
hsl()
B
rgb()
C
hex
D
rgba()

Show Answer

✓ A. hsl()

Which property is used to set the font style to italic?

A
font-style: italic;
B
font-style: oblique;
C
font-weight: italic;
D
text-style: italic;

Show Answer

✓ A. font-style: italic;

Which property defines the default size of a flex item?

A
flex-basis
B
flex-grow
C
flex-shrink
D
width

Show Answer

✓ A. flex-basis

Which property is used to create a grid with equal columns?

A
grid-template-columns: repeat(3, 1fr);
B
grid-template-columns: 1fr 1fr 1fr;
C
Both A and B
D
grid: 3 columns;

Show Answer

✓ C. Both A and B

Which property is used to set the position of a positioned element?

A
top, right, bottom, left
B
position
C
offset
D
align

Show Answer

✓ A. top, right, bottom, left

Which viewport unit is equal to 1% of the viewport's smaller dimension?

A
vmin
B
vmax
C
vw
D
vh

Show Answer

✓ A. vmin

Which property specifies the delay before an animation starts?

A
animation-delay
B
transition-delay
C
animation-start
D
transition-start

Show Answer

✓ A. animation-delay

Can CSS variables be used in @media queries?

A
Yes
B
No
C
Only in some browsers
D
Only if defined inline

Show Answer

✓ A. Yes

100

What is the default display value of a div?

A
block
B
inline
C
inline-block
D
flex

Show Answer

✓ A. block

101

Which selector selects the nth child of a parent?

A
:nth-child(n)
B
:nth-of-type(n)
C
:nth(n)
D
:child(n)

Show Answer

✓ A. :nth-child(n)

102

Which property is used to set the margin of an element?

A
margin
B
padding
C
border
D
spacing

Show Answer

✓ A. margin

103

Which property is used to set the background position?

A
background-position
B
bg-position
C
background-align
D
position

Show Answer

✓ A. background-position

104

Which property is used to set the weight of the font?

A
font-weight
B
font-size
C
font-style
D
font-family

Show Answer

✓ A. font-weight

105

Which property aligns flex lines when there is extra space in the cross axis?

A
align-content
B
align-items
C
justify-content
D
align-self

Show Answer

✓ A. align-content

106

Which property places a grid item in a specific area?

A
grid-area
B
grid-column
C
grid-row
D
All of the above

Show Answer

✓ D. All of the above

107

Which position value positions an element based on the nearest positioned ancestor?

A
absolute
B
relative
C
fixed
D
sticky

Show Answer

✓ A. absolute

108

What is the purpose of a media query?

A
Apply styles based on device characteristics
B
Apply styles based on user preference
C
Apply styles based on browser version
D
Apply styles based on time

Show Answer

✓ A. Apply styles based on device characteristics

109

Which property is used to create a 3D transform?

A
transform: rotateX(45deg);
B
transform: rotateZ(45deg);
C
transform: translate3d();
D
All of the above

Show Answer

✓ D. All of the above

110

What is the default value of a CSS variable if not defined?

A
It is invalid and ignored
B
It is 0
C
It is inherit
D
It is initial

Show Answer

✓ A. It is invalid and ignored

111

Which CSS property is used to change the list item marker?

A
list-style-type
B
list-style
C
marker-type
D
item-marker

Show Answer

✓ A. list-style-type

112

Which selector selects elements that are not a specific element?

A
:not(selector)
B
:exclude(selector)
C
:except(selector)
D
:no(selector)

Show Answer

✓ A. :not(selector)

113

Which property is used to set the border style?

A
border-style
B
border-type
C
border
D
border-width

Show Answer

✓ A. border-style

114

Which CSS function is used to create a radial gradient?

A
radial-gradient()
B
linear-gradient()
C
conic-gradient()
D
gradient()

Show Answer

✓ A. radial-gradient()

115

Which property is used to set the text shadow?

A
text-shadow
B
shadow
C
font-shadow
D
box-shadow

Show Answer

✓ A. text-shadow

116

Which property defines the ability of a flex item to shrink?

A
flex-shrink
B
flex-grow
C
flex-basis
D
flex

Show Answer

✓ A. flex-shrink

117

Which property is used to set the gap between grid items?

A
gap
B
grid-gap
C
row-gap
D
All of the above

Show Answer

✓ D. All of the above

118

Which property is used to control whether an element can be positioned relative to the nearest positioned ancestor?

A
position: absolute;
B
position: fixed;
C
position: relative;
D
position: static;

Show Answer

✓ A. position: absolute;

119

Which CSS unit is relative to the font size of the element?

A
em
B
rem
C
px
D
pt

Show Answer

✓ A. em

120

Which property is used to pause or play an animation?

A
animation-play-state
B
animation-pause
C
animation-state
D
animation-control

Show Answer

✓ A. animation-play-state

121

Can CSS variables be used in gradients?

A
Yes
B
No
C
Only in linear gradients
D
Only in radial gradients

Show Answer

✓ A. Yes

122

Which property is used to set the direction of text?

A
direction
B
text-direction
C
writing-mode
D
unicode-bidi

Show Answer

✓ A. direction

123

Which selector selects the first line of a block of text?

A
::first-line
B
:first-line
C
::first-letter
D
first-line

Show Answer

✓ A. ::first-line

124

Which property is used to set the padding of an element?

A
padding
B
margin
C
border
D
spacing

Show Answer

✓ A. padding

125

Which property is used to set the background attachment?

A
background-attachment
B
bg-attachment
C
background-scroll
D
attachment

Show Answer

✓ A. background-attachment

126

Which property is used to set the text decoration style?

A
text-decoration-style
B
text-decoration-line
C
text-decoration
D
decoration-style

Show Answer

✓ A. text-decoration-style

127

Which property is a shorthand for flex-grow, flex-shrink, and flex-basis?

A
flex
B
flex-flow
C
flex-wrap
D
flex-direction

Show Answer

✓ A. flex

128

Which property defines the size of a grid column?

A
grid-column-size
B
grid-template-columns
C
grid-column
D
grid-size

Show Answer

✓ B. grid-template-columns

129

Which position value is used to make an element stick to the top when scrolling?

A
sticky
B
fixed
C
absolute
D
relative

Show Answer

✓ A. sticky

130

What is the recommended approach for responsive images?

A
Using srcset and sizes attributes
B
Using max-width: 100%;
C
Using picture element
D
All of the above

Show Answer

✓ D. All of the above

131

Which property is used to create a transition effect on a specific property?

A
transition-property
B
transition-duration
C
transition-timing-function
D
transition-delay

Show Answer

✓ A. transition-property

❓Frequently Asked Questions

What is CSS and why is it important?

CSS (Cascading Style Sheets) is a style sheet language used to describe the presentation of a document written in HTML. It controls the layout, colors, fonts, and overall visual appearance of web pages. CSS is essential for creating responsive, visually appealing, and user-friendly websites.

What is the difference between inline, internal, and external CSS?

Inline CSS is applied directly within an HTML element using the style attribute. Internal CSS is defined within a <style> tag in the <head> section. External CSS is defined in a separate .css file and linked using the <link> tag. External CSS is preferred for reusability and maintainability.

What are pseudo-classes and pseudo-elements?

Pseudo-classes (e.g., :hover, :focus) target elements based on their state or position. Pseudo-elements (e.g., ::before, ::after) target specific parts of an element, like the first line or first letter. Both are used to style elements without adding extra HTML markup.

What is the Box Model in CSS?

The box model describes the space occupied by an element. It consists of content, padding, border, and margin. Understanding the box model is crucial for controlling layout and spacing. The box-sizing property can change how width and height are calculated.

What is the difference between Flexbox and Grid?

Flexbox is a one-dimensional layout model for arranging items in rows or columns. It is best for aligning and distributing space among items in a container. CSS Grid is a two-dimensional layout system that allows you to create complex grid-based layouts with rows and columns. Grid is better for overall page layout, while Flexbox is ideal for components.

What are media queries and how do they work?

Media queries are a CSS feature that allows you to apply styles based on the characteristics of the device, such as screen width, height, orientation, and resolution. They are essential for responsive design, enabling websites to adapt to different screen sizes and devices.

What is the difference between em and rem units?

em is relative to the font size of the parent element, while rem (root em) is relative to the font size of the root element (html). rem is generally preferred for consistency, especially in responsive designs.

What are CSS variables and why are they useful?

CSS variables (custom properties) allow you to store values (like colors, fonts, sizes) and reuse them throughout your stylesheet. They make it easier to maintain and update themes, reduce redundancy, and enable dynamic styling with JavaScript.

CSS Multiple Choice Questions

📚Explore CSS Topics

📝CSS MCQs(131 questions)

❓Frequently Asked Questions

CSS
Multiple Choice Questions