Hey, this is Imraan, welcome to codewithimraan blog –
100+ CSS Interview Questions
Beginner Level Questions
1. What is CSS and what is its purpose?
Answer: CSS (Cascading Style Sheets) is a stylesheet language that controls the appearance of HTML pages, including layout, colors, and fonts.
2. What are the different types of CSS?
Answers: Inline CSS, Internal CSS, External CSS
3. What is the syntax of CSS?
Answer:
selector {
property: value;
}4. What are selectors in CSS?
Answer: Selectors are patterns used to target elements on a webpage. Examples include id, class, type, universal, and attribute selectors.
5. What is the difference between id and class in CSS?
Answer: id: Used for unique elements and is defined with #, class: Used for multiple elements and is defined with .
6. What is the difference between relative, absolute, and fixed positioning?
Answer:
relative: Positioned relative to its normal position.absolute: Positioned relative to its nearest positioned ancestor.fixed: Positioned relative to the viewport and does not move when scrolling.
7. What is the purpose of the z-index property?
Answer: controls the stacking order of items. Higher values appear in front of smaller ones.
8. What are pseudo-classes in CSS?
Answer: Special states of elements, e.g., :hover, :focus, :nth-child().
9. What is the difference between em and rem units in CSS?
Answer: em: Relative to the font size of its parent, rem: Relative to the root font size (usually the <html> element).
10. What are media queries in CSS?
Answer:
@media (max-width: 768px) {
body {
background-color: red;
}
}11. How do you include a CSS file in an HTML document?
Answer: Using the <link> tag inside the <head> section.
<link rel="stylesheet" href="styles.css">
12. What is the purpose of the float property?
Answer: Elements are positioned to the left or right so that additional content may wrap around them.
13. Explain the CSS specificity hierarchy.
Answer: Determines which CSS rule is used when several rules target the same element. Specificity hierarchy (from top to bottom): Inline styles > IDs > Classes, Attributes, and Pseudo-Classes > Elements/Pseudo-Elements.
14. What is a CSS reset?
Answer: A collection of CSS rules that eliminate the default browser style to maintain uniformity across browsers.
15. How can you make a responsive layout using CSS?
Answer: Some ways to do this are relative units (%, em, rem), media queries, responsive pictures, and flexible grids.
16. What is the box-sizing property?
Answer: Defines how an element’s total width and height are calculated.
Values:border-box content-box (default)
17. What is the purpose of the display property?
Answer: Specifies how an element is displayed on the page (e.g., block, inline, flex, none).
18. Explain the difference between padding and margin.
Answer:
- Padding: Space between the content and the border of an element.
- Margin: Space outside the border of an element, separating it from other elements.
19. What is the background shorthand property?
Answer: A shorthand property to set all background properties in one declaration.
background: #fff url('image.png') no-repeat right top;
20. How do you apply multiple classes to an HTML element?
Answer: By listing them separated by spaces in the class attribute.
<div class="class1 class2"></div>
Intermediate Level Questions
21. What are CSS variables?
Answer: Variables that store reusable values. Declared using --.
:root {
--main-color: green;
}
.wrapper {
color: var(--main-color);
}
22. Explain the box model in CSS.
Answer: The CSS box model includes:
- Content: The actual content.
- Padding: Space between content and border.
- Border: Surrounds the padding.
- Margin: Space outside the border.
23. What is the difference between inline, block, and inline-block elements?
Answer:
- Inline: Does not start on a new line, only occupies as much width as necessary.
- Block: Starts on a new line and takes up the full width.
- Inline-block: Behaves like
inlinebut allows setting height and width.
24. What is the position: sticky; property?
Answer: A hybrid between relative and fixed. The element is positioned based on scroll but remains “sticky” within its container.
25. What is the difference between nth-child and nth-of-type selectors?
Answer:
nth-child: Targets the nth child regardless of its type.nth-of-type: Targets the nth child of a specific type.
26. What is the clip-path property?
Answer: Clips an element to a specific shape.
div {
clip-path: circle(50%);
}
27. How can you hide an element in CSS?
Answer:
display: none;(removes the element from the document flow)visibility: hidden;(hides the element but maintains its space).
28. What is the difference between flexbox and grid?
Answer:
- Flexbox: One-dimensional layout (row or column).
- Grid: Two-dimensional layout (row and column)
29. What is the difference between max-width and min-width?
Answer:
max-width: Sets the maximum width an element can take.min-width: Sets the minimum width an element can take.
30. What is a pseudo-element?
Answer: Selects and styles parts of an element, e.g., ::before, ::after.
31. Explain the CSS Cascade and how it works.
Answer: The cascade determines which CSS rules apply when multiple rules target the same element. It follows the specificity hierarchy, importance (!important), and source order.
32. What are combinators in CSS?
Answer: Combinators define the relationship between selectors. Types include descendant (), child (>), adjacent sibling (+), and general sibling (~).
33. How do you create a CSS gradient?
Answer: Using the background-image property with linear-gradient or radial-gradient.
background-image: linear-gradient(to right, red, yellow);
34. What is the calc() function in CSS?
Answer: Allows you to perform calculations to determine CSS property values.
width: calc(100% - 50px);
35. How can you ensure cross-browser compatibility in CSS?
Answer:
- Use vendor prefixes (e.g.,
-webkit-,-moz-). - Utilize CSS resets.
- Test across different browsers.
- Use feature queries (
@supports).
36. What is the filter property in CSS?
Answer: Applies graphical effects like blur or color shift to an element.
img {
filter: grayscale(100%);
}37. Explain the object-fit property.
Answer: Specifies how an <img> or <video> should be resized to fit its container.
Values: fill, contain, cover, none, scale-down.
38. What is the aspect-ratio property?
Answer: Sets a preferred aspect ratio for an element.
.box {
aspect-ratio: 16 / 9;
}39. How do you implement a CSS reset and why?
Answer: A CSS reset removes default browser styles to ensure consistency across different browsers.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}40. What are the different ways to implement shadows in CSS?
Answer:
- Box-shadow: Adds shadow to elements.
- Text-shadow: Adds shadow to text.
div {
box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
}
p {
text-shadow: 1px 1px 2px gray;
}41. Explain the overflow property and its values.
Answer: Controls what happens to content that overflows an element’s box.
Values: visible, hidden, scroll, auto.
42. What is the transition property and how is it used?
Answer: Defines the transition effect between two states of an element.
button {
transition: background-color 0.3s ease;
}
button:hover {
background-color: blue;
}43. How do you create a responsive image using CSS?
Answer: Use relative units and properties like max-width: 100%; and height: auto;.
img {
max-width: 100%;
height: auto;
}44. What is the visibility property in CSS?
Answer: Controls whether an element is visible or hidden, while still occupying space.
Values: visible, hidden, collapse.
45. Explain the text-align property.
Answer: Specifies the horizontal alignment of text within an element.
Values: left, right, center, justify.
46. How do you vertically center an element using CSS?
Answer:
using flex
.container {
display: flex;
align-items: center;
justify-content: center;
}using grid
.container {
display: grid;
place-items: center;
}Absolute positioning with transform
.element {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
47. What is the font-face rule in CSS?
Answer: Allows you to define custom fonts to be used in your web pages.
@font-face {
font-family: 'MyFont';
src: url('myfont.woff2') format('woff2');
}
body {
font-family: 'MyFont', sans-serif;
}48. Explain the line-height property.
Answer: Sets the height of a line box, affecting the spacing between lines of text.
p {
line-height: 1.5;
}49. What is the white-space property?
Answer: Controls how whitespace inside an element is handled.
Values: normal, nowrap, pre, pre-wrap, pre-line
50. How do you create a CSS sprite?
Answer: Combine multiple images into a single image file and use background-position to display the desired part. This reduces HTTP requests.
Advanced Level Questions
51. What is the purpose of content in pseudo-elements?
Answer: Used to insert generated content in ::before and ::after.
.element::after {
content: '★';
}
52. Explain CSS Grid Areas.
Answer: Grid areas allow defining specific regions for layout using grid-template-areas.
.container {
display: grid;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }
53. What is the difference between transition and animation in CSS?
Answer:
transition: For smooth state changes between two states.animation: For more complex multi-step animations with keyframes.
54. How can you implement dark mode using CSS?
Answer: Use the prefers-color-scheme media query.
@media (prefers-color-scheme: dark) {
body {
background-color: black;
color: white;
}
}55. What is the will-change property in CSS?
Answer: Hints to the browser about changes to optimize rendering.
.animating-element {
will-change: transform, opacity;
}
56. ow does backface-visibility work?
Answer: Controls the visibility of an element’s backside during a 3D transformation.
.card {
backface-visibility: hidden;
}
57. What is the difference between opacity: 0; and visibility: hidden;?
Answer:
opacity: 0;: Hides the element but keeps its space and allows interactions (unlesspointer-eventsis also modified).visibility: hidden;: Hides the element but keeps its layout space, similar toopacity: 0;.
58. What is the mix-blend-mode property?
Answer: Defines how an element blends with its background.
.blend {
mix-blend-mode: multiply;
}
59. What is the difference between absolute length units and relative length units?
Answer:
- Absolute Units: Fixed sizes (e.g.,
px,cm,mm,in,pt,pc). - Relative Units: Relative to another value (e.g.,
em,%,rem,vw,vh).
60. What is isolation in CSS?
Answer: Defines whether an element creates a new stacking context, isolating its children from blending with elements outside.
.isolated {
isolation: isolate;
}
61. Explain CSS Custom Properties and their benefits.
Answer: Also known as CSS variables, they allow storing values to be reused throughout the stylesheet. Benefits include easier maintenance, theming, and dynamic updates.
:root {
--primary-color: #3498db;
}
button {
background-color: var(--primary-color);
}
62. How do you create complex shapes using CSS?
Answer: Using properties like clip-path, border-radius, and CSS gradients.
.triangle {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
63. What are CSS preprocessors and name a few?
Answer: CSS preprocessors are scripting languages that extend CSS and compile into standard CSS. Examples include Sass, LESS, and Stylus.
64. Explain the concept of Critical CSS.
Answer: Critical CSS refers to the styles required to render above-the-fold content. Optimizing Critical CSS improves page load performance by prioritizing essential styles.
65. How can you optimize CSS for better performance?
Answer:
- Minify CSS files.
- Remove unused CSS.
- Use efficient selectors.
- Combine multiple CSS files.
- Implement Critical CSS.
66. What is CSS-in-JS and its advantages?
Answer: A styling approach where CSS is written within JavaScript files. Advantages include scoped styles, dynamic styling based on props/state, and better integration with component-based frameworks like React.
67. Explain the @supports rule in CSS.
Answer: Allows you to apply CSS only if the browser supports certain CSS features.
@supports (display: grid) {
.container {
display: grid;
}
}68. What are CSS Modules and how do they work?
Answer: CSS Modules are CSS files in which all class names and animation names are scoped locally by default. They help in avoiding naming conflicts by generating unique class names.
69. How do you implement server-side rendering (SSR) with CSS?
Answer: SSR involves rendering CSS on the server and sending fully styled HTML to the client. This can be achieved using CSS-in-JS libraries like Styled Components or Emotion, which extract and inline critical CSS during the build process.
70. What is the contain property in CSS?
Answer: Improves rendering performance by indicating that an element and its subtree are independent of the rest of the document.
.widget {
contain: layout style;
}71. Explain CSS Houdini.
Answer: A set of APIs that give developers more control over the CSS rendering process, allowing them to write JavaScript that can extend CSS capabilities.
72. How do you create a responsive typography system?
Answer: Using relative units like vw, vh, em, rem, and media queries to adjust font sizes based on viewport dimensions.
html {
font-size: 16px;
}
@media (max-width: 600px) {
html {
font-size: 14px;
}
}
73. What is CSS Logical Properties?
Answer: Properties that allow you to control layout based on the flow of content, adapting to different writing modes (e.g., left-to-right, right-to-left). Examples include margin-block-start, padding-inline-end.
74. Explain the @import rule and its drawbacks.
Answer: The @import rule allows you to import one CSS file into another.
Drawbacks: This can cause additional HTTP requests and render-blocking, leading to slower page loads.
75. What is the font-display property in @font-face?
Answer: Controls how a font is displayed based on its download status.
Values: auto, block, swap, fallback, optional.
76. How do you create a responsive grid layout without using CSS Grid or Flexbox?
Answer: Using float-based layouts or inline-block elements combined with media queries. However, these methods are less flexible and more prone to issues compared to modern layout systems.
77. What is the :root selector in CSS?
Answer: Targets the root element of the document, typically the <html> element. Commonly used to define CSS variables.
78. Explain the rem unit and its advantages over em.
Answer:
rem: Relative to the root (<html>) font size.- Advantages: Consistent sizing across the document, easier to manage compared to
em, which is relative to the parent element’s font size and can compound.
79. How do you create a multi-column layout in CSS?
Answer: Using the column-count and column-gap properties.
.multicolumn {
column-count: 3;
column-gap: 20px;
}
80. What is the object-position property?
Answer: Specifies the position of the content within a replaced element, such as an <img> or <video>, when using object-fit.
img {
object-fit: cover;
object-position: center;
}
81. Explain the grid-template-columns and grid-template-rows properties.
Answer: Define the size and number of columns and rows in a CSS Grid layout.
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 100px auto 100px;
}
82. How do you create a CSS-only tooltip?
Answer: Using pseudo-elements and the :hover pseudo-class.
<div class="tooltip">Hover me
<span class="tooltiptext">Tooltip text</span>
</div>
.tooltip {
position: relative;
display: inline-block;
}
.tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px;
position: absolute;
z-index: 1;
bottom: 125%; /* Position above */
left: 50%;
transform: translateX(-50%);
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
83. What is CSS Scroll Snap and how it is used.
Answer: A CSS module that allows web developers to control the scroll behavior, snapping the scroll position to specific elements.
.container {
scroll-snap-type: x mandatory;
overflow-x: scroll;
display: flex;
}
.item {
scroll-snap-align: start;
flex: none;
width: 100%;
}
84. Explain the @keyframes rule in CSS animations.
Answer: Defines the intermediate steps in a CSS animation sequence by specifying styles at various points during the animation timeline.
@keyframes slidein {
from {
transform: translateX(0%);
}
to {
transform: translateX(100%);
}
}
.animate {
animation: slidein 3s forwards;
}
85. How do you create a CSS-only modal?
Answer: Using hidden checkboxes or the :target pseudo-class along with CSS to display the modal when triggered.
<a href="#modal">Open Modal</a>
<div id="modal" class="modal">
<a href="#" class="close">Close</a>
<p>Modal Content</p>
</div>
.modal {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: white;
padding: 20px;
border: 1px solid #ccc;
}
.modal:target {
display: block;
}
86. What is pointer-events in CSS and how is it used?
Answer: Controls whether an element can be the target of mouse events.
.overlay {
pointer-events: none;
}
.button {
pointer-events: auto;
}
87. Explain the :not() pseudo-class and provide an example.
Answer: Selects every element that does not match the specified selector.
/* Select all paragraphs except those with class 'intro' */
p:not(.intro) {
color: gray;
}
88. How do you create a CSS-only accordion?
Answer: Using hidden checkboxes or radio buttons and the :checked pseudo-class to toggle content visibility.
<div class="accordion">
<input type="checkbox" id="section1">
<label for="section1">Section 1</label>
<div class="content">
<p>Content for section 1.</p>
</div>
</div>
.content {
display: none;
}
.accordion input:checked ~ .content {
display: block;
}
89. What is the scroll-behavior property?
Answer: Defines the scrolling behavior for a scrolling box, such as smooth scrolling.
html {
scroll-behavior: smooth;
}
90. Explain the @media rule and how it can be used for responsive design.
Answer: The @media rule allows you to apply CSS styles based on specific conditions, such as screen size, resolution, or orientation. It’s essential for creating responsive designs that adapt to different devices.
@media (max-width: 600px) {
.container {
flex-direction: column;
}
}
91. What is SVG in the context of CSS and how can it be styled?
Answer: SVG (Scalable Vector Graphics) is an XML-based vector image format. CSS can style SVG elements by targeting their attributes and using CSS properties like fill, stroke, and transform.
svg {
width: 100px;
height: 100px;
}
svg path {
fill: #3498db;
stroke: #2c3e50;
stroke-width: 2;
}
92. How do you create a responsive navigation bar using CSS?
Answer: Using Flexbox or Grid for layout, media queries to adjust for different screen sizes, and possibly a hamburger menu for smaller screens.
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
}
@media (max-width: 600px) {
.navbar {
flex-direction: column;
}
}
93. Explain the filter property and provide an example of its usage.
Answer: The filter property applies graphical effects like blur, brightness, contrast, etc., to elements.
img {
filter: grayscale(100%);
}
94. What is CSS Blend Modes and how are they used?
Answer: Blend modes determine how an element’s content should blend with the content behind it. They are set using the mix-blend-mode and background-blend-mode properties.
.blend {
mix-blend-mode: multiply;
}
95. How do you create a CSS-only dropdown menu?
Answer: Using the :hover or :focus pseudo-classes to show and hide the dropdown content.
<div class="dropdown">
<button class="dropbtn">Menu</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
</div>
</div>
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
}
.dropdown:hover .dropdown-content {
display: block;
}
96. What is the :focus-within pseudo-class?
Answer: Selects an element if any of its descendants have focus. Useful for styling parent elements when child elements are focused.
.form-group:focus-within {
border-color: blue;
}
97. Explain the use of @charset in CSS.
Answer: Specifies the character encoding of the CSS file. Must be the first rule in the CSS.
@charset "UTF-8";
98. How do you implement a CSS-only carousel?
Answer: Using radio buttons or checkboxes to control which slide is visible, combined with labels and the :checked pseudo-class. Animations and transitions can enhance the effect.
<div class="carousel">
<input type="radio" name="slides" id="slide1" checked>
<input type="radio" name="slides" id="slide2">
<div class="slides">
<div class="slide" id="s1">Slide 1</div>
<div class="slide" id="s2">Slide 2</div>
</div>
<label for="slide1">1</label>
<label for="slide2">2</label>
</div>
.slides .slide {
display: none;
}
#slide1:checked ~ .slides #s1,
#slide2:checked ~ .slides #s2 {
display: block;
}
99. What is the aspect-ratio property and how is it useful?
Answer: The aspect-ratio property allows you to define a preferred aspect ratio for an element, ensuring it maintains the ratio regardless of its size. Useful for responsive designs.
.video-container {
aspect-ratio: 16 / 9;
width: 100%;
}
100. Explain the @font-feature-values rule in CSS.
Answer: Allows you to define specific font feature settings for OpenType fonts, enabling advanced typography features like ligatures, alternate characters, and stylistic sets.
css @font-feature-values ‘Open Sans’ { @liga { 0, 0; } } p { font-feature-settings: ‘liga’ 0; }
I hope this sheet will give you so much value so please share to your friends
