If you’re gearing up for a CSS interview in 2025, you’re in the right place. CSS (Cascading Style Sheets) is a must-know skill for any front-end developer, and interviewers love to test your understanding of it. They’ll expect you to know everything from basics like the box model to advanced topics like Grid, Flexbox, and animations.<\/p>\n\n\n\n
But don’t worry\u2014we\u2019ve got your back! In this blog, we\u2019ve rounded up the top 100 CSS<\/a> interview questions that cover everything you need to know, whether you’re a beginner or a pro. These questions will help you prep for interviews and sharpen your CSS skills overall.<\/p>\n\n\n\n CSS<\/strong>, or Cascading Style Sheets, is a language used to style the look and feel of a website. It controls how elements like text, images, and buttons appear on the page\u2014think colors, fonts, layouts, and spacing.<\/p>\n\n\n\n It\u2019s important because it makes websites visually appealing and user-friendly. Without CSS, every webpage would look plain and boring, like unstyled text in a Word document.<\/p>\n\n\n\n There are three types of CSS<\/strong>:<\/p>\n\n\n\n Inline CSS<\/strong>: Styles are applied directly inside an HTML tag. Internal CSS<\/strong>: Styles are written in a <style> tag within the <head> section of the HTML. h1 { color: blue; }<\/p>\n\n\n\n <\/style><\/p>\n\n\n\n External CSS<\/strong>: Styles are written in a separate .css file and linked to the HTML using a <link> tag. Using external CSS<\/strong> is the best practice because it keeps your code clean and reusable.<\/p>\n\n\n\n The CSS box model<\/strong> is a way to understand how elements are sized and spaced on a webpage. Every element is like a rectangular box, and it has four parts:<\/p>\n\n\n\n Think of it as a gift box: the content is the gift, padding is bubble wrap, the border is the box itself, and the margin is the space between this box and others.<\/p>\n\n\n\n A pseudo-class<\/strong> lets you style an element based on its state or position. For example, you can style a link differently when someone hovers over it.<\/p>\n\n\n\n Common pseudo-classes:<\/p>\n\n\n\n Example:<\/p>\n\n\n\n a:hover {<\/p>\n\n\n\n color: red;<\/p>\n\n\n\n }<\/p>\n\n\n\n This changes the colour of a link to red when the mouse is over it.<\/strong><\/p>\n\n\n\n You can combine multiple styles by separating them with a semicolon (;). p {<\/p>\n\n\n\n color: black;<\/p>\n\n\n\n font-size: 16px;<\/p>\n\n\n\n line-height: 1.5;<\/p>\n\n\n\n }<\/p>\n\n\n\n Media queries let you apply styles based on the size or type of the screen. @media (max-width: 600px) {<\/p>\n\n\n\n body {<\/p>\n\n\n\n background-color: lightblue;<\/p>\n\n\n\n }<\/p>\n\n\n\n }<\/p>\n\n\n\n This changes the background to light blue on screens smaller than 600px.<\/p>\n\n\n\n Example:<\/p>\n\n\n\n body {<\/p>\n\n\n\n font-size: 16px;<\/p>\n\n\n\n }<\/p>\n\n\n\n p {<\/p>\n\n\n\n font-size: 1.5em; \/* 1.5 times the parent’s size *\/<\/p>\n\n\n\n }<\/p>\n\n\n\n h1 {<\/p>\n\n\n\n font-size: 2rem; \/* 2 times the root size *\/<\/p>\n\n\n\n }<\/p>\n\n\n\n Now that you\u2019ve got the basics down let\u2019s dive deeper into CSS concepts that often come up in interviews. These questions are designed to test your understanding of more advanced styling techniques, units, and positioning.<\/p>\n\n\n\n Positioning in CSS controls how elements are placed on a webpage. Here\u2019s what each type does:<\/p>\n\n\n\n position: relative;<\/p>\n\n\n\n top: 10px;<\/p>\n\n\n\n left: 10px;<\/p>\n\n\n\n }<\/p>\n\n\n\n position: absolute;<\/p>\n\n\n\n top: 20px;<\/p>\n\n\n\n left: 50px;<\/p>\n\n\n\n }<\/p>\n\n\n\n position: fixed;<\/p>\n\n\n\n top: 0;<\/p>\n\n\n\n left: 0;<\/p>\n\n\n\n }<\/p>\n\n\n\n div {<\/p>\n\n\n\n position: sticky;<\/p>\n\n\n\n top: 10px;<\/p>\n\n\n\n }<\/p>\n\n\n\n CSS units determine the size of an element, and each type behaves differently:<\/p>\n\n\n\n When to use what?<\/strong><\/p>\n\n\n\n Adding custom fonts can make your website unique and more stylish. Here\u2019s how you can do it:<\/p>\n\n\n\n Import fonts via a <link> in the HTML: Then, use the font in your CSS: font-family: ‘Roboto’, sans-serif;<\/p>\n\n\n\n }<\/p>\n\n\n\n Upload the font files to your project and define them in your CSS: font-family: ‘MyFont’;<\/p>\n\n\n\n src: url(‘MyFont.woff2’) format(‘woff2’),<\/p>\n\n\n\n url(‘MyFont.woff’) format(‘woff’);<\/p>\n\n\n\n }<\/p>\n\n\n\n body {<\/p>\n\n\n\n font-family: ‘MyFont’, sans-serif;<\/p>\n\n\n\n }<\/p>\n\n\n\n Always provide a fallback font in case the custom font doesn\u2019t load: font-family: ‘Roboto’, Arial, sans-serif;<\/p>\n\n\n\n }<\/p>\n\n\n\n Pro Tip:<\/strong> Make sure the fonts you use are licensed for web use and optimize them to reduce loading times.<\/p>\n\n\n\n Use the following CSS to center a div both vertically and horizontally:<\/p>\n\n\n\n .parent {<\/p>\n\n\n\n display: flex;<\/p>\n\n\n\n justify-content: center; \/* Horizontal alignment *\/<\/p>\n\n\n\n align-items: center; \/* Vertical alignment *\/<\/p>\n\n\n\n height: 100vh; \/* Example: full viewport height *\/<\/p>\n\n\n\n }<\/p>\n\n\n\n Example:<\/p>\n\n\n\n button:hover {<\/p>\n\n\n\n background-color: blue;<\/p>\n\n\n\n }<\/p>\n\n\n\n button:active {<\/p>\n\n\n\n background-color: red;<\/p>\n\n\n\n }<\/p>\n\n\n\n You can use:<\/p>\n\n\n\n Media Queries<\/strong>: div {<\/p>\n\n\n\n font-size: 12px;<\/p>\n\n\n\n }<\/p>\n\n\n\n }<\/p>\n\n\n\n A CSS variable stores a value that you can reuse throughout your CSS file. :root {<\/p>\n\n\n\n –main-color: #3498db;<\/p>\n\n\n\n }<\/p>\n\n\n\n h1 {<\/p>\n\n\n\n color: var(–main-color);<\/p>\n\n\n\n }<\/p>\n\n\n\n The :nth-child(n) selector targets elements based on their position. li:nth-child(2) {<\/p>\n\n\n\n color: red; \/* Styles the second list item *\/<\/p>\n\n\n\n }<\/p>\n\n\n\n Now it\u2019s time to dive into the more technical aspects of CSS that showcase your deep understanding of the language. These questions cover concepts like stacking context, specificity, and creative problem-solving using CSS.<\/p>\n\n\n\n z-index<\/strong> determines the stacking order of elements along the z-axis (i.e., which element appears on top when elements overlap).<\/p>\n\n\n\n Example<\/strong>:<\/p>\n\n\n\n <div style=”z-index: 1; position: relative;”>On Top<\/div><\/p>\n\n\n\n <div style=”z-index: 0; position: relative;”>Behind<\/div><\/p>\n\n\n\n Important<\/strong>: If two elements are in different stacking contexts, their z-index values are only compared within their own context, not across contexts.<\/p>\n\n\n\n<\/a>Basic CSS Questions with Simple Answers<\/strong><\/h2>\n\n\n\n
\n\n\n\n<\/a>1. What is CSS, and why is it important?<\/strong><\/h4>\n\n\n\n
\n\n\n\n<\/a>2. What are the different types of CSS?<\/strong><\/h4>\n\n\n\n
Example: <h1 style=”color: red;”>Hello<\/h1><\/p>\n\n\n\n
Example:
html
<style><\/p>\n\n\n\n
Example:
<link rel=”stylesheet” href=”styles.css”><\/p>\n\n\n\n
\n\n\n\n<\/a>3. Explain the box model in CSS.<\/strong><\/h4>\n\n\n\n
\n
\n\n\n\n<\/a>4. What are pseudo-classes in CSS?<\/strong><\/h4>\n\n\n\n
\n
<\/a>5. What\u2019s the difference between <\/strong>id<\/strong> and <\/strong>class<\/strong> in CSS?<\/strong><\/h4>\n\n\n\n
\n
Example: #header { color: blue; }<\/li>\n\n\n\n
Example: .button { background-color: green; }<\/li>\n<\/ul>\n\n\n\n
\n\n\n\n<\/a>6. How do you apply multiple CSS styles to one element?<\/strong><\/h4>\n\n\n\n
Example:<\/p>\n\n\n\n
\n\n\n\n<\/a>7. What\u2019s the difference between <\/strong>relative<\/strong>, <\/strong>absolute<\/strong>, and <\/strong>fixed<\/strong> positioning in CSS?<\/strong><\/h4>\n\n\n\n
\n
\n\n\n\n<\/a>8. What are media queries?<\/strong><\/h4>\n\n\n\n
Example:<\/p>\n\n\n\n
\n\n\n\n<\/a>9. What is the difference between <\/strong>inline<\/strong>, <\/strong>block<\/strong>, and <\/strong>inline-block<\/strong> elements?<\/strong><\/h4>\n\n\n\n
\n
\n\n\n\n<\/a>10. What is the difference between <\/strong>em<\/strong> and <\/strong>rem<\/strong> units in CSS?<\/strong><\/h4>\n\n\n\n
\n
<\/a>Intermediate CSS Questions<\/strong><\/h2>\n\n\n\n
<\/a>1. What is the difference between <\/strong>relative<\/strong>, <\/strong>absolute<\/strong>, <\/strong>fixed<\/strong>, and <\/strong>sticky<\/strong> positioning?<\/strong><\/h4>\n\n\n\n
\n
\n
div {<\/p>\n\n\n\n\n
\n
div {<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n\n
\n
div {<\/p>\n\n\n\n\n
\n
\n\n\n\n<\/a>2. Explain the difference between <\/strong>em<\/strong>, <\/strong>rem<\/strong>, <\/strong>%<\/strong>, and <\/strong>px<\/strong>.<\/strong><\/h4>\n\n\n\n
\n
\n
\n
\n
\n
\n
\n\n\n\n<\/a>3. How do you implement custom fonts in CSS?<\/strong><\/h4>\n\n\n\n
\n
<link href=”https:\/\/fonts.googleapis.com\/css2?family=Roboto&display=swap” rel=”stylesheet”><\/p>\n\n\n\n
body {<\/p>\n\n\n\n\n
@font-face {<\/p>\n\n\n\n\n
body {<\/p>\n\n\n\n\n
\n\n\n\n<\/a>4. What is the difference between <\/strong>z-index<\/strong> and stacking context?<\/strong><\/h4>\n\n\n\n
\n
\n\n\n\n<\/a>5. How do you center a div using Flexbox?<\/strong><\/h4>\n\n\n\n
\n\n\n\n<\/a>6. What\u2019s the difference between <\/strong>hover<\/strong> and <\/strong>active<\/strong> pseudo-classes?<\/strong><\/h4>\n\n\n\n
\n
\n\n\n\n<\/a>7. How do you make an element responsive?<\/strong><\/h4>\n\n\n\n
\n
@media (max-width: 600px) {<\/p>\n\n\n\n
\n\n\n\n<\/a>8. What is a CSS variable?<\/strong><\/h4>\n\n\n\n
Example:<\/p>\n\n\n\n
\n\n\n\n<\/a>9. How do you use <\/strong>nth-child<\/strong> in CSS?<\/strong><\/h4>\n\n\n\n
Example:<\/p>\n\n\n\n
\n\n\n\n<\/a>10. How do you optimize CSS for performance?<\/strong><\/h4>\n\n\n\n
\n
<\/a>Advanced CSS Questions<\/strong><\/h2>\n\n\n\n
\n\n\n\n<\/a>1. Explain the <\/strong>z-index<\/strong> and stacking context.<\/strong><\/h4>\n\n\n\n
\n
\n\n\n\n