Get the Preplance app for a seamless learning experience. Practice offline, get daily streaks, and stay ahead with real-time interview updates.
Get it on
Google Play
4.9/5 Rating on Store
CSS · Complete Question Bank
Practice the complete collection of CSS interview questions including theory, coding, MCQs and real interview problems.
Questions
174
Full database
Topics
35
Categorised
Difficulty
Mixed Levels
Easy Hard
Scroll through every important CSS question asked in real interviews. Includes MCQs, subjective questions, and coding prompts.
Correct Answer: Cascading Style Sheets
Browse more CSS questions, explore related subjects, or practice full interview sets to strengthen your preparation.
Correct Answer: <link>
<head> <link rel="stylesheet" href="style.css"> </head>
Correct Answer: p { color: red; }
p { color: red; }Correct Answer: Inline CSS
<p style="color: red;">This text is red</p>
Correct Answer: p.intro
p.intro { color: blue; }Correct Answer: em
p { font-size: 1.5em; }Correct Answer: /* This is a comment */
/* This is a CSS comment */
p { color: blue; }Correct Answer: color: rgb(255,0,0);
h1 { color: rgb(255, 0, 0); }body { background-color: lightblue; }<link rel="stylesheet" href="style.css">
p { color: blue; }
p.special { color: red; }button.primary { background-color: green; }h1 { font-size: 2rem; }/* Example: Using DevTools to check active CSS rules */
Correct Answer: p
p { color: blue; }Correct Answer: .intro
.intro { font-size: 18px; }Correct Answer: #main
#main { background-color: lightgray; }Correct Answer: div span
div span { color: red; }Correct Answer: Selects only direct child elements
div > p { color: green; }Correct Answer: ID selector
#box { color: red; } /* overrides */
.box { color: blue; }Correct Answer: Selects all elements on the page
* { margin: 0; padding: 0; }Correct Answer: input[type='text']
input[type='text'] { border: 1px solid gray; }p, .intro, #main, input[type='text']
#id > .class > p
p { color: inherit; }div + p { color: red; }p { color: blue !important; }/* Use browser DevTools > Computed Styles */
Correct Answer: Outline
/* Box model parts */
.box { margin:10px; border:2px solid; padding:8px; }Correct Answer: Content → Padding → Border → Margin
/* Inside to outside */ Content → Padding → Border → Margin
Correct Answer: 130px
Total = 100 + 10 + 10 + 5 + 5 = 130px
Correct Answer: border-box
box-sizing: border-box;
Correct Answer: <div>
div { display: block; }Correct Answer: They are ignored
span { display: inline-block; width:100px; }Correct Answer: Inline-block elements allow width and height but stay inline
span { display: inline-block; width:80px; }Correct Answer: Both hide the element but visibility: hidden keeps its space
/* Hidden but space reserved */
.box { visibility: hidden; }div { margin:10px; border:2px solid; padding:5px; }* { box-sizing: border-box; }div { display:block; } span { display:inline-block; }.box { visibility:hidden; }p + p { margin-top:20px; }.container { overflow:hidden; box-sizing:border-box; }Correct Answer: static
div { position: static; }Correct Answer: It positions the element relative to its normal position
div { position: relative; top: 10px; }Correct Answer: The nearest positioned ancestor
.child { position: absolute; top: 0; left: 0; }Correct Answer: fixed
nav { position: fixed; top: 0; width: 100%; }Correct Answer: It behaves like static until a scroll threshold, then acts fixed
header { position: sticky; top: 0; }Correct Answer: To push an element to the left or right for wrapping text
img { float: right; margin: 10px; }Correct Answer: clear
.footer { clear: both; }Correct Answer: Stacking order of elements along the z-axis
.modal { position: absolute; z-index: 999; }div { position: absolute; top: 0; }.menu { position: fixed; top: 0; }
.tooltip { position: absolute; top: 20px; }img { float: right; }
.footer { clear: both; }header { position: sticky; top: 0; }.popup { position: relative; z-index: 10; }.tooltip { position: absolute; z-index: 9999; }Correct Answer: A layout module for one-dimensional layouts
.container { display: flex; }Correct Answer: Immediate children of a flex container
<div class="container" style="display:flex;"> <div>A</div> <div>B</div> </div>
Correct Answer: justify-content
.container { display:flex; justify-content: center; }Correct Answer: baseline
.container { flex-direction: column-reverse; }Correct Answer: grow=1, shrink=0, basis=200px
.box { flex: 1 0 200px; }Correct Answer: wrap
.container { display:flex; flex-wrap: wrap; }Correct Answer: When flex items wrap and there is extra cross-axis space
.container { flex-wrap: wrap; align-content: space-between; }.container { display: flex; justify-content: center; align-items: center; }.menu { display: inline-flex; }.parent { display:flex; justify-content:center; align-items:center; height:100vh; }.item-1 { order: 2; } .item-2 { order: 1; }.item { flex-shrink: 0; }Correct Answer: A two-dimensional layout system for rows and columns
.container { display: grid; grid-template-columns: 1fr 1fr; }Correct Answer: They become grid items
.grid { display: grid; }Correct Answer: Creates three equal-width columns
.grid { grid-template-columns: repeat(3, 1fr); }Correct Answer: Space between grid rows and columns
.grid { gap: 20px; }Correct Answer: 1
.item { grid-column: 1 / 3; }Correct Answer: Browser auto-places them sequentially
.grid { display: grid; grid-template-columns: 1fr 1fr; }Correct Answer: Fraction of total free space
.grid { grid-template-columns: 1fr 2fr; }Correct Answer: Creates responsive columns between 200px and remaining space
.grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }.container { display: grid; grid-template-columns: 1fr 2fr; }.grid { grid-template-columns: 200px 1fr; grid-auto-rows: 100px; }@media (max-width:600px){ .grid { grid-template-columns:1fr; } }.grid { grid-template-areas: 'header header' 'sidebar main'; } .header { grid-area: header; }.grid { grid-auto-flow: row dense; }.grid { grid-template-columns: repeat(3,1fr); } @media(max-width:768px){ .grid{ grid-template-columns:1fr; } }Correct Answer: Smoothly changes property values over time
button { transition: background-color 0.3s ease; }Correct Answer: iteration-count
div { transition: all 0.5s ease-in-out; }Correct Answer: color()
div { transform: rotate(45deg) scale(1.2); }Correct Answer: perspective
.scene { perspective: 600px; }Correct Answer: @keyframes fadeIn { ... }
@keyframes fadeIn { from {opacity:0;} to {opacity:1;} }Correct Answer: animation-iteration-count
.box { animation-iteration-count: infinite; }Correct Answer: Keeps the final keyframe styles after animation ends
.fadeIn { animation-fill-mode: forwards; }Correct Answer: Transitions only occur when property changes
div:hover { background: red; transition: background 0.3s; }.btn { transition: background 0.3s ease; } .btn:hover { background:#007BFF; }.box { transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); }.icon { transform-origin: left top; transform: rotate(45deg); }.card { will-change: transform; }@keyframes fadeIn { from{opacity:0;} to{opacity:1;} } .box{ animation: fadeIn 2s ease; }.btn { transition: transform 0.3s; will-change: transform; }Correct Answer: .btn
.btn { color: white; background: blue; }Correct Answer: #header{}
#header { background-color: #333; }Correct Answer: All p elements nested anywhere inside .card
.card p { color: gray; }Correct Answer: .parent > .child
.menu > li { padding: 10px; }Correct Answer: #main p
#main p { color: red; }Correct Answer: :hover
.btn:hover { background-color: darkblue; }Correct Answer: ::before
h1::before { content: '👉 '; color: orange; }#id (100 points) > .class (10 points) > element (1 point)
a:hover{} /* state */ p::first-line{} /* virtual part */.parent > .child, h2 + p, h2 ~ ul
/* Example */ #title {color:red;} .heading {color:blue;} /* red wins */input:focus { border-color: blue; } input:invalid { border-color: red; }button:active { background: #333; }Correct Answer: static
div { position: static; }Correct Answer: It can be moved relative to its normal position
div { position: relative; top: 10px; left: 20px; }Correct Answer: The nearest positioned ancestor
.child { position: absolute; top: 0; left: 0; }Correct Answer: fixed
.navbar { position: fixed; top: 0; width: 100%; }Correct Answer: It behaves like relative until a scroll threshold, then becomes fixed
header { position: sticky; top: 0; background: white; }Correct Answer: z-index
.box1 { z-index: 2; } .box2 { z-index: 5; }Correct Answer: z-index set with position: relative/absolute
.container { position: relative; z-index: 10; }Correct Answer: absolute
div { position: absolute; top: 50px; left: 50px; }div { position: relative; top: 10px; }.parent { position: relative; z-index: 1; } .child { z-index: 9999; }.tooltip { position: absolute; top: 100%; left: 0; } .navbar { position: fixed; top: 0; }header { position: sticky; top: 0; background: white; z-index: 100; }div { position: relative; z-index: 5; }p { display: block; } span { display: inline; }Correct Answer: @media (max-width: 600px) { ... }
@media (max-width: 600px) { body { font-size: 14px; } }Correct Answer: (min-width: ...)
@media (min-width: 768px) { .container { width: 80%; } }Correct Answer: 768px
@media (max-width: 768px) { nav { display: none; } }Correct Answer: It tells browsers how to scale pages on different devices
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
Correct Answer: (orientation: landscape)
@media (orientation: landscape) { img { height: 60vh; } }Correct Answer: vh and vw
section { height: 100vh; width: 100vw; }Correct Answer: flex-wrap
.container { display: flex; flex-wrap: wrap; }Correct Answer: max-width: 100%; height: auto;
img { max-width: 100%; height: auto; }@media (min-width: 768px) { .grid { grid-template-columns: 1fr 1fr; } }@media (max-width: 1024px) { .sidebar { display: none; } }header { height: 100vh; background-size: cover; }<img srcset='small.jpg 600w, large.jpg 1200w' src='large.jpg' alt='example'>
Responsive testing: Chrome DevTools → Toggle Device Toolbar
Avoid: @media (max-width: 768px) and (min-width: 800px) { ... }Correct Answer: :root { --primary-color: blue; } and color: var(--primary-color);
:root { --main-color: #007bff; } h1 { color: var(--main-color); }Correct Answer: Inside :root
:root { --font-size: 16px; }Correct Answer: Perform math operations in CSS values
section { width: calc(100% - 40px); }Correct Answer: Defines a value that scales between min and max limits
h1 { font-size: clamp(1rem, 4vw, 2rem); }Correct Answer: rgba()
div { background-color: rgba(0, 0, 255, 0.2); }Correct Answer: filter
img { filter: grayscale(100%); }Correct Answer: margin-inline-start
div { margin-inline-start: 20px; }Correct Answer: mix-blend-mode
img { mix-blend-mode: multiply; }:root { --primary-color: #2196f3; } body { color: var(--primary-color); }main { width: min(90vw, 1200px); }h1 { font-size: clamp(1.2rem, 5vw, 2.5rem); }p { color: var(--accent, #000); }img:hover { filter: brightness(1.2); }@media (prefers-color-scheme: dark) { body { background: #121212; } }Correct Answer: transition-duration
button { transition-duration: 0.3s; }Correct Answer: transition-property: background-color;
div { transition-property: background-color; transition-duration: 0.5s; }Correct Answer: ease-in-out
a:hover { transition: all 0.3s ease-in-out; }Correct Answer: @keyframes spin { from { } to { } }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }Correct Answer: animation-iteration-count: infinite;
div { animation: pulse 2s infinite; }Correct Answer: transform
div:hover { transform: scale(1.1) rotate(5deg); }Correct Answer: animation: slide 3s ease-in-out 1s infinite alternate;
div { animation: bounce 2s linear 1s infinite alternate; }Correct Answer: opacity and transform
div:hover { opacity: 0.8; transform: scale(1.05); }div:hover { transition: background 0.3s; } @keyframes move { 0% { left:0; } 100% { left:100px; } }@keyframes bounce { 0%,100% { top:0; } 50% { top:-20px; } }button:hover { transition: all 0.3s ease-in-out; }div { will-change: transform, opacity; }button:hover { transform: scale(1.05); transition: transform 0.2s ease-out; }div { animation: fadeIn 1s forwards; }