When I was learning CSS for the first time, I honestly felt it was easy but confusing at the same time. Easy because it looks simple. Confusing because small things like margin, padding, and position can mess up the whole page 😅
If you are a beginner, fresher, or B.Tech student, CSS interview questions can feel scary. But trust me, most interviewers only check basic clarity, not deep design skills.
In this blog, I have shared Top 30 CSS Interview Questions and Answers for 2026, explained in very simple words.
Let’s start 👇
(getCard) #type=(post) #title=(You might Like)
What is CSS?
CSS (Cascading Style Sheets) is a stylesheet language used to control the presentation and layout of HTML documents. It describes how HTML elements should be displayed on screen, paper, or other media. CSS helps separate content (HTML) from design (styles), making web pages more attractive, consistent, and easier to maintain.
Key Features of CSS:
- Controls colors, fonts, spacing, alignment, and layout
- Improves website consistency and reusability
- Reduces code duplication
- Supports responsive and dynamic designs
Example:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
text-align: center;
}
p{
font-size: 16px;
color: green;
}
</style>
</head>
<body>
<h1>Welcome to CSS</h1>
<p>This paragraph is styled using CSS.</p>
</body>
</html>
Why do we use CSS?
CSS (Cascading Style Sheets) is used to style and design web pages by controlling how HTML elements appear on the screen. It makes websites visually attractive, consistent, and easy to maintain.
Reasons to Use CSS:
- Separates content from design – HTML handles structure, CSS handles styling
- Improves website appearance – controls colors, fonts, layout, and spacing
- Reusability – one CSS file can style multiple pages
- Easy maintenance – changes can be made in one place
- Supports responsive design – adapts layout for different screen sizes
Example:
<p style="color: red; font-size: 18px;">This is styled using CSS.</p>
What are the types of CSS?
There are three types of CSS:
Inline CSS
- Applied directly inside an HTML element using the style attribute.
- Used for quick, single-element styling.
Internal CSS
- Defined inside the <style> tag within the <head> section of an HTML page.
- Used to style a single web page.
External CSS
- Written in a separate .CSS file and linked to HTML using the <link> tag.
- Best for large websites and multiple pages.
Example:
<!-- 1. Inline CSS -->
<p style="color: blue;">Inline CSS Example</p>
<!-- 2. Internal CSS -->
<style>
p {
color: green;
}
</style>
<p>Internal CSS Example</p>
<!-- 3. External CSS -->
<link rel="stylesheet" href="style.css">
<!-- style.css file content -->
p {
color: red;
}
<p>External CSS Example</p>
What is CSS Selector?
A CSS Selector is used to select HTML elements that you want to style. It tells the browser which elements CSS rules should be applied to.
Common Types of CSS Selectors:
- Element selector (h1, p)
- Class selector (.box)
- ID selector (#header)
- Universal selector (*)
- Group selector (h1, p)
Example:
p {
color: blue;
}
What are different types of CSS Selectors?
There are different types of CSS Selectors used to select and style HTML elements:
- Universal Selector (*): Selects all elements.
- Element (Type) Selector: Selects elements by tag name.
- Class Selector (.class): Selects elements with a specific class.
- ID Selector (#id): Selects an element with a unique ID.
- Group Selector: Selects multiple elements at once.
- Attribute Selector: Selects elements based on attributes.
- Pseudo-class Selector: Selects elements in a specific state.
Example
<!-- Universal Selector (*) -->
* {
margin: 0;
}
<!-- Element (Type) Selector -->
p {
color: blue;
}
<!-- Class Selector (.class) -->
.box {
border: 1px solid black;
}
<!-- ID Selector (#id) -->
#header {
background-color: gray;
}
<!-- Group Selector -->
h1, h2, p {
color: green;
}
<!-- Attribute Selector -->
input[type="text"] {
border: 2px solid blue;
}
<!-- Pseudo-class Selector -->
a:hover {
color: red;
}
Difference between Class and ID selector?
Symbol used:
- Class selector uses .
- ID selector uses #
Uniqueness:
- Class can be applied to multiple elements
- ID is applied to only one unique element
Reusability:
- Class selector is reusable
- ID selector is not reusable
Priority:
- Class selector has lower priority
- ID selector has higher priority
Purpose:
- Class is used for common styling
- ID is used for specific or unique styling
HTML usage
<!-- HTML Example -->
<h1 id="title">ID Selector</h1>
<p class="text">Class Selector</p>
<!-- CSS Example -->
#title {
color: blue;
}
.text {
color: green;
}
What is Box Model in CSS?
The CSS Box Model is a fundamental concept that describes the structure and spacing of HTML elements. Every HTML element is treated as a rectangular box.
Components of Box Model:
- Content – Actual content (text, image, etc.)
- Padding – Space between content and border
- Border – Surrounds the padding and content
- Margin – Space outside the border
Diagram Order:
Margin → Border → Padding → Content
Example:
div {
width: 200px;
padding: 20px;
border: 5px solid black;
margin: 10px;
}
Difference between Margin and Padding?
Definition
- Margin: Space outside the border of an element
- Padding: Space inside the border, between content and border
Effect on Background
- Margin does not affect background color
- Padding shows the background color
Purpose
- Margin creates space between elements
- Padding creates space between content and border
Impact on Element Size
- Margin does not increase element size
- Padding increases the element’s size
Example
margin: 10px; /* space outside */
padding: 10px; /* space inside */
What is display property?
The display property in CSS is used to define how an HTML element is displayed on the web page. It controls the layout behavior of elements.
Common Values of display:
- block – Element starts on a new line and takes full width
- inline – Element flows within the line and takes only as much width as needed
- inline-block – Like inline but allows setting width and height
- none – Hides the element (it won’t occupy space)
Example
<!-- Controls the layout behavior of elements -->
<!-- block – Element starts on a new line and takes full width -->
div {
display: block;
}
<!-- inline – Element flows within the line and takes only as much width as needed -->
span {
display: inline;
}
<!-- inline-block – Like inline but allows setting width and height -->
button {
display: inline-block;
width: 100px;
}
<!-- none – Hides the element (it won’t occupy space) -->
p {
display: none;
}
<!-- Conclusion -->
Difference between block and inline elements?
Line Behavior
- Block: Starts on a new line
- Inline: Flows within the same line
Width and Height
- Block: Takes full width of the parent; width & height can be set
- Inline: Takes only the space it needs; width & height cannot be set
Examples
Block: <div>, <p>, <h1>
Inline: <span>, <a>, <b>
Padding, Margin, Border
- Block: Supports all sides (top, bottom, left, right)
- Inline: Only left and right padding/margin work; top and bottom usually ignored
Usage
- Block: Used for large sections or container elements
- Inline: Used for text formatting or small elements inside a line
(getCard) #type=(post) #title=(You might Like)
What is position property?
The position property in CSS is used to specify how an element is positioned on a web page. It determines the element’s placement relative to its normal position, parent, or the browser window.
Common Values of position:
- static – Default value; element follows the normal flow of the page
- relative – Element is positioned relative to its normal position
- absolute – Element is positioned relative to its nearest positioned ancestor
- fixed – Element is positioned relative to the browser window and does not move on scroll
- sticky – Element is relative until a scroll point, then becomes fixed
Example:
<!-- The position property specifies how an element is positioned on a page -->
<!-- static – Default value; element follows the normal flow of the page -->
div {
position: static;
}
<!-- relative – Element is positioned relative to its normal position -->
div {
position: relative;
top: 10px;
left: 20px;
}
<!-- absolute – Element is positioned relative to its nearest positioned ancestor -->
div {
position: absolute;
top: 50px;
left: 100px;
}
<!-- fixed – Element is positioned relative to the browser window and does not move on scroll -->
div {
position: fixed;
bottom: 0;
right: 0;
}
<!-- sticky – Element is relative until a scroll point, then becomes fixed -->
div {
position: sticky;
top: 0;
}
Difference between relative and absolute?
Reference Point
- Relative: Positioned relative to its normal position in the page flow
- Absolute: Positioned relative to the nearest positioned ancestor (not static)
Impact on Other Elements
- Relative: Does not remove the element from the normal flow; other elements are not affected
- Absolute: Removed from normal flow; can overlap other elements
Movement Control
- Relative: Use top, bottom, left, right to move from original position
- Absolute: Use top, bottom, left, right to position exactly within parent
Use Case
- Relative: Small adjustments or offset from original place
- Absolute: Precise placement, dropdowns, modals, tooltips
Example
<!-- Relative -->
div.relative {
position: relative;
top: 10px;
left: 20px;
}
<!-- Absolute -->
div.absolute {
position: absolute;
top: 50px;
left: 100px;
}
What is z-index?
The z-index property in CSS is used to control the stacking order of elements along the z-axis (depth). Elements with a higher z-index appear on top of elements with a lower z-index.
Key Points:
- Works only on elements with position set to relative, absolute, fixed, or sticky.
- Default z-index is auto (follows HTML order).
- Can take positive or negative numbers.
Example:
<div style="position: absolute; top: 50px;left: 50px;width: 100px;height: 100px;background: red;z-index: 1;"></div>
<div style="position: absolute;top: 70px;left: 70px;width: 100px;height: 100px;background: blue;z-index: 2;"></div>
Explanation:
The blue box (z-index: 2) will appear on top of the red box
(z-index: 1).
What is overflow property?
The overflow property in CSS is used to control what happens when the content of an element exceeds its defined width or height. It determines how extra content is displayed.
Common Values of overflow:
- visible – Default; content overflows outside the element
- hidden – Extra content is cut off and not visible
- scroll – Adds scrollbars to see the extra content
- auto – Adds scrollbars only if needed
Example:
<!-- Common Values of overflow -->
<!-- visible – Default; content overflows outside the element -->
div {
overflow: visible;
}
<!-- hidden – Extra content is cut off and not visible -->
div {
overflow: hidden;
}
<!-- scroll – Adds scrollbars to see the extra content -->
div {
overflow: scroll;
}
<!-- auto – Adds scrollbars only if needed -->
div {
overflow: auto;
}
<!-- Example -->
<div style="width: 100px;height: 50px;overflow: scroll;border: 1px solid black;">
This is a long text that will require scrolling to see the full content.
</div>
What is float in CSS?
The float property in CSS is used to position an element to the left or right within its container, allowing other content (like text) to wrap around it.
Common Values of float:
- left – Element floats to the left, content flows on the right
- right – Element floats to the right, content flows on the left
- none – Default; element does not float
Example:
<img src="image.jpg"style="float: left;width: 100px;margin: 10px;">
<p>This paragraph wraps around the image floated to the left.</p>
Explanation:
The image is moved to the left side of the container, and the
paragraph text flows around it.
What is Flexbox?
Flexbox (Flexible Box Layout) is a CSS layout module used to arrange elements in a container efficiently, even when their size is unknown or dynamic. It makes responsive layouts easier by distributing space and aligning items automatically.
Key Features:
- Align items horizontally or vertically.
- Control spacing, order, and size of items.
- Works well for dynamic or flexible layouts.
Example:
<div style="display: flex;justify-content: space-between;align-items: center;border: 1px solid black;">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>
Explanation:
- display: flex → makes the container a flex container
- justify-content: space-between → spaces items evenly horizontally
- align-items: center → aligns items vertically in the center
Difference between Flexbox and Grid?
Layout Type
- Flexbox: One-dimensional layout (row or column)
- Grid: Two-dimensional layout (rows and columns)
Use Case
- Flexbox: Best for aligning items in a line or small components
- Grid: Best for entire page layouts or complex grids
Axes Control
- Flexbox: Controls main-axis and cross-axis
- Grid: Controls both horizontal and vertical axes simultaneously
Alignment & Spacing
- Flexbox: Handles item alignment and spacing
- Grid: Handles item alignment, spacing, and placement in rows/columns
Example
<!-- Flexbox Example -->
.container {
display: flex;
justify-content: space-between;
}
<!-- Grid Example -->
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
What is responsive design?
Responsive Design is an approach in web development where a website automatically adjusts its layout and content to look good on all screen sizes – desktops, tablets, and mobiles.
Key Points:
- Ensures better user experience on different devices.
- Uses flexible grids, images, and media queries.
- Makes websites mobile-friendly without creating separate pages.
Example using Media Query:
<!-- Default styles for desktop -->
div {
width: 600px;
background-color: lightblue;
}
<!-- For screens smaller than 480px (mobile) -->
@media screen and (max-width: 480px) {
div {
width: 100%;
background-color: lightgreen;
}
}
Explanation:
The <div> will be 600px wide on desktop but full width with light green
background on small screens.
What are media queries?
Media Queries are a CSS feature used to apply styles based on the device’s characteristics, such as screen width, height, resolution, or orientation. They are essential for responsive design.
Key Points:
- Allows CSS to adapt layouts for different devices.
- Can target screen size, device type, resolution, or orientation.
- Often used with @media rule.
Example:
<!-- Default style for desktop -->
body {
font-size: 18px;
background-color: lightblue;
}
<!-- For devices with screen width ≤ 600px (mobile) -->
@media screen and (max-width: 600px) {
body {
font-size: 14px;
background-color: lightgreen;
}
}
Explanation:
- On screens larger than 600px, the background is light blue.
- On screens 600px or smaller, the background changes to light green and font size reduces.
What is pseudo-class?
A pseudo-class is used to define the special state of an HTML element without adding a class or ID. It allows styling elements based on user interaction or element position.
Key Points:
- Starts with a colon :
- Commonly used for hover, focus, first-child, etc.
- Helps style elements dynamically based on their state
Example:
<!-- Change link color when hovered -->
a:hover {
color: red;
}
<!-- Style the first paragraph inside a div -->
div p:first-child {
font-weight: bold;
}
Explanation:
- :hover → applies style when the mouse pointer is over the link
- :first-child → applies style to the first element of its parent
What is pseudo-element?
A pseudo-element is used to style a specific part of an HTML element or insert content without changing the HTML.
Key Points:
- Starts with double colon :: (modern CSS), but single : also works in older CSS.
- Targets part of an element (like first letter, first line) or adds content.
- Common pseudo-elements: ::before, ::after, ::first-letter, ::first-line.
Example:
<!-- Add text before a paragraph -->
p::before {
content: "Note: ";
font-weight: bold;
color: red;
}
<!-- Make the first letter bigger -->
p::first-letter {
font-size: 24px;
color: blue;
}
Explanation:
- ::before → inserts content before the element’s text
- ::first-letter → styles only the first letter of the paragraph.
What is opacity?
Opacity is a CSS property used to control the transparency level of an element. It determines how see-through an element is.
Key Points:
- Value ranges from 0 to 1
- 0 → completely transparent (invisible)
- 1 → fully opaque (visible)
- Affects the element and all its content (text, images, etc.)
Example:
div {
background-color: red;
opacity: 0.5; /* 50% transparent */
width: 200px;
height: 100px;
}
What is visibility property?
The visibility property in CSS is used to control whether an element is visible or hidden on the page, without removing it from the layout.
Key Points:
- Values:
- visible → Element is displayed (default)
- hidden → Element is invisible but still occupies space
2. Unlike display: none, the element does not collapse; layout space is preserved.
Example:
<!-- Make text visible -->
p.visible-text {
visibility: visible;
}
<!-- Hide text but keep space -->
p.hidden-text {
visibility: hidden;
}
Explanation:
- visible-text paragraph will be shown normally.
- hidden-text paragraph will be invisible, but the space it occupies remains.
Difference between display:none and visibility:hidden?
Effect on Layout
- display: none: Element is completely removed from the layout; it takes no space
- visibility: hidden: Element is invisible but still occupies space
Visibility
- display: none: Element is not visible and not accessible for interaction
- visibility: hidden: Element is not visible but still occupies its space
Impact on Children
- display: none: All child elements are also removed
- visibility: hidden: Children remain invisible too, but space is preserved
Use Case
- display: none: Hide elements completely, e.g., dropdowns, modals before display
- visibility: hidden: Temporarily hide elements without affecting layout
Example
<!-- display: none -->
div.none {
display: none;
}
<!-- visibility: hidden -->
div.hidden {
visibility: hidden;
}
What is background property?
The background property in CSS is used to set the background of an element, including color, image, position, size, and repeat behavior.
Key Features:
- Can set background color
- Can set background image
- Controls image repeat, position, size, and attachment
Example:
div {
background-color: lightblue; /* Background color */
background-image: url('image.jpg'); /* Background image */
background-repeat: no-repeat; /* Image does not repeat */
background-position: center; /* Image centered */
background-size: cover; /* Image covers the entire div */
}
Explanation:
- background-color → sets a solid color
- background-image → sets an image as background
- background-repeat → controls repeating
- background-position → controls image placement
- background-size → controls image size
What is border-radius?
The border-radius property in CSS is used to round the corners of an element’s border. It can create slightly rounded corners or perfect circles/ellipses depending on the value.
Key Points:
- Can take values in pixels (px), percentages (%), or em
- Affects all four corners or individual corners
Example:
<!-- Round all corners -->
div {
width: 150px;
height: 100px;
background-color: lightblue;
border-radius: 15px;
}
<!-- Make a circle -->
.circle {
width: 100px;
height: 100px;
background-color: red;
border-radius: 50%;
}
Explanation:
- 15px → corners are slightly rounded
- 50% → turns a square into a circle
What is font-family?
The font-family property in CSS is used to specify the typeface (font) of text in an HTML element. It controls the appearance and style of the text.
Key Points:
- Can specify a specific font (like Arial, Times New Roman)
- Can provide a list of fonts as fallback if the first is unavailable
- Can use generic font families like serif, sans-serif, monospace
Example:
p {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
}
Explanation:
- The browser will first try Arial.
- If Arial is unavailable, it will try Helvetica.
- If neither is available, it will use the default sans-serif font.
What is !important?
The !important rule in CSS is used to give a CSS property the highest priority, overriding all other conflicting rules, including inline styles.
Key Points:
- Overrides normal specificity rules
- Should be used sparingly because it can make CSS hard to maintain
- Placed after the property value
Example:
p {
color: blue !important;
}
p {
color: red;
}
Explanation:
- Normally, the paragraph would be red.
- Because of !important, the paragraph will appear blue, overriding the second rule.
What is CSS specificity?
CSS Specificity is a ranking system that determines which CSS rule will be applied when multiple rules target the same element. The rule with higher specificity takes priority.
How Specificity is Calculated:
- Inline styles – highest specificity (style="...")
- IDs (#id) – higher specificity
- Classes, attributes, pseudo-classes (.class, [attr], :hover) – medium specificity
- Elements and pseudo-elements (div, p, ::before) – lowest specificity
Specificity Example:
<!-- 1. Element selector -->
p {
color: blue;
}
<!-- 2. Class selector -->
.text {
color: green;
}
<!-- 3. ID selector -->
#main {
color: red;
}
<!-- HTML -->
<p id="main" class="text">Hello World</p>
Explanation:
- p → blue (lowest)
- .text → green (overrides element)
- #main → red (highest, applied)
What is CSS preprocessor?
A CSS Preprocessor is a scripting language that extends CSS with additional features and then compiles it into standard CSS. It helps write CSS more efficiently and maintainably.
Key Points:
- Adds variables, nesting, functions, and mixins to CSS
- Makes large projects easier to manage
- Examples: Sass, LESS, Stylus
Example with Sass:
<!-- Using variables and nesting in Sass -->
$primary-color: blue;
nav {
background-color: $primary-color;
ul {
list-style: none;
li {
display: inline-block;
margin-right: 10px;
}
}
}
Explanation:
- $primary-color is a variable
- Nested ul and li rules make CSS more readable
- This compiles into regular CSS before the browser uses it
(getCard) #type=(post) #title=(You might Like)
👉 If this blog helped you, bookmark it now for quick revision before interviews.
👉 Share it
with your friends who are preparing for frontend jobs.
👉 Follow Stackleaf for
Java, React, CSS, and interview prep content.
Your CSS interview in 2026 will be easy if your basics are strong. Start today 🚀
Read Also : Frontend Developer Roadmap 2026
