There are the Top 50 CSS Interview Questions listed below, covering a wide range of topics from basic to advanced concepts. Reviewing these questions thoroughly will help you gain a deeper understanding of CSS, including its core principles, layout techniques, and best practices. These questions are commonly asked in interviews across different levels and will equip you with the knowledge to tackle various real-world challenges. By preparing with these questions, you’ll be able to demonstrate your expertise, showcase your problem-solving skills, and increase your chances of successfully cracking your CSS interview.
1. What is CSS?
CSS (Cascading Style Sheets) is a stylesheet language used to define the presentation of a web page. It describes the layout, colors, fonts, spacing, and other visual aspects of HTML elements.
2. What is the difference between class and id in CSS?
ID: Unique identifier for a single element on a page, defined with #. IDs are meant to be used once per page.
Class: Used for multiple elements, defined with .. A class can be used repeatedly across different elements.
3. What is the box model in CSS?
The box model consists of:
Content: The actual content of the box (text, images).
Padding: The space around the content.
Border: The border surrounding the padding (optional).
Margin: The outermost space around the border
4. What are the different types of positioning in CSS?
Static: Default, elements appear in the normal document flow.
Relative: Positioned relative to its normal position.
Absolute: Positioned relative to the nearest positioned ancestor.
Fixed: Positioned relative to the viewport.
Sticky: Switches between relative and fixed depending on the scroll position.
5. What is the difference between inline, block, and inline-block elements?
Inline: Does not start on a new line and takes only as much width as needed.
Block: Takes up the full width available and starts on a new line.
Inline-block: Combines both behaviors. Elements do not start on a new line but respect width and height properties.
6. What is Flexbox?
Flexbox is a layout module designed to lay out items in one-dimensional space (either row or column). It helps align and distribute space among items in a container, making the design more responsive.
7. What is CSS Grid?
CSS Grid Layout allows you to create two-dimensional layouts, where both rows and columns are controlled simultaneously. It offers more powerful control over layouts than Flexbox.
8. What is the z-index in CSS?
The z-index property controls the stacking order of elements. Higher values will be positioned in front of lower values. It only works on elements that have a position value other than static.
9. What are pseudo-classes in CSS?
Pseudo-classes are used to define a special state of an element. For example:
:hover – when the user hovers over an element.
:focus – when an element gains focus.
:first-child – matches the first child of an element.
10. What are pseudo-elements in CSS?
Pseudo-elements are used to style parts of an element, like:
::before – inserts content before the element.
::after – inserts content after the element.
::first-letter – targets the first letter of an element.
11. What is the difference between visibility: hidden and display: none?
visibility: hidden: The element is still part of the document flow but is invisible.
display: none: The element is removed from the document flow entirely, as if it doesn’t exist.
12. What is the purpose of @import in CSS?
@import is used to include external CSS files into a stylesheet. However, it is slower than linking external CSS files via <link>.13. What are media queries in CSS?
Media queries are used to apply styles based on device characteristics like screen width, height, resolution, etc. It allows for responsive design.
14. What is the difference between em, rem, px, and % in CSS?
px: Fixed-size pixel unit.
em: Relative to the font-size of the element’s parent.
rem: Relative to the font-size of the root element (usually <html>).%: Relative to the parent element’s size
15. What is the float property in CSS?
The float property is used to position an element to the left or right of its container, allowing text or inline elements to wrap around it.
16. What are CSS transitions?
CSS transitions allow you to smoothly transition between different property values over a specified duration. For example, transitioning a background color or element position.
17. What are CSS animations?
CSS animations allow you to create more complex animations by defining keyframes and transition properties to animate elements.
18. What is the box-sizing property in CSS?
box-sizing determines how the total width and height of an element are calculated. With box-sizing: border-box, the padding and border are included in the element’s total width and height.
19. What is the difference between visibility: hidden and opacity: 0?
visibility: hidden: The element is hidden but still occupies space in the document.
opacity: 0: The element is fully transparent but still takes up space and is interactive.
20. What is the purpose of line-height in CSS?
The line-height property controls the space between lines of text. It is commonly used to adjust the vertical spacing of text within a block.
21. What is vh and vw in CSS?
vh (viewport height): Represents a percentage of the viewport’s height.
vw (viewport width): Represents a percentage of the viewport’s width.
22. What are CSS preprocessors?
CSS preprocessors like SASS and LESS allow for writing CSS in a more dynamic way with features like variables, nesting, and mixins. They need to be compiled into regular CSS.
23. What is the calc() function in CSS?
calc() allows you to perform calculations to determine CSS property values, such as width, height, margins, etc. For example, width: calc(100% – 20px);
24. What is the difference between absolute and relative positioning?
absolute: Positioned relative to the nearest positioned ancestor.
relative: Positioned relative to its normal position in the document flow.
25. What is the clip property in CSS?
The clip property is used to define a visible region of an element, often used with absolutely positioned elements. It requires the element to have a position other than static.
26. What is the overflow property in CSS?
The overflow property specifies what to do when content overflows an element’s box. Possible values:
- visible
- hidden
- scroll
- auto
27. What is the white-space property in CSS?
The white-space property controls how white space inside an element is handled. For example, white-space: nowrap; prevents text from wrapping to the next line.
28. What are CSS variables?
CSS variables (also known as custom properties) are reusable values that can be defined and referenced in CSS. Example:
:root {
--primary-color: #ff000;
}
29. What is the purpose of the opacity property?
The opacity property controls the transparency of an element. The value ranges from 0 (fully transparent) to 1 (fully opaque).
30. How does CSS specificity work?
CSS specificity determines which styles are applied when multiple rules target the same element. It is calculated based on the selectors used (ID, class, element type).
31. What is the @media rule in CSS?
The @media rule is used to apply styles based on different device characteristics, such as screen width, height, orientation, etc.
32. How can you make a website responsive using CSS?
You can use techniques like:
- Media queries to apply different styles based on screen size.
- Flexbox and CSS Grid for layout.
- Percentage-based widths to ensure fluid resizing.
33. What is object-fit in CSS?
The object-fit property is used to specify how the content of a replaced element (such as an image or a video) should be resized to fit its container. Common values include:
fill: The content is stretched to fill the container.
contain: The content is scaled to fit inside the container while maintaining aspect ratio.
cover: The content is scaled to cover the container while maintaining aspect ratio, possibly cropping the content.
none: The content is not resized, maintaining its original size.
34. What is the box-shadow property in CSS?
The box-shadow property adds shadow effects around an element’s frame. It can accept values for horizontal and vertical offsets, blur radius, spread radius, and color. Example:
box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.3);
35. What is the text-shadow property in CSS?
The text-shadow property adds shadow effects to text. It takes values for horizontal and vertical offsets, blur radius, and color. Example:
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
36. What is the cursor property in CSS?
The cursor property specifies the type of cursor to be displayed when the mouse pointer is over an element. Common values include:
pointer: Indicates a clickable item (often used for links).
default: The standard cursor.
crosshair: A crosshair cursor.
37. What is the visibility property in CSS?
The visibility property controls the visibility of an element. Its values include:
visible: The element is visible.
hidden: The element is hidden but still occupies space in the layout.
collapse: Used in tables to hide rows or columns.
38. What is min-width and max-width in CSS?
min-width: Sets the minimum width an element can have.
max-width: Sets the maximum width an element can have. Both properties help in creating responsive layouts that adjust to different screen sizes.
39. What is the difference between @import and <link> in CSS?@import: Can be used inside a CSS file to import other CSS files, but it is slower than <link> because it is loaded later in the page load process.
<link>: A more efficient way to link external CSS files directly in the HTML document’s section.
40. What is the transition property in CSS?
The transition property allows you to define how changes to an element’s properties should occur over time. It helps create smooth animations for state changes. Example:
transition: all 0.5s ease-in-out;
41. What is the will-change property in CSS?
The will-change property is used to tell the browser that an element is likely to change in the future, which allows the browser to optimize rendering. Example:
will-change: transform;
42. What is the filter property in CSS?
The filter property applies graphical effects such as blur, brightness, and contrast to an element.
Example:
filter: blur(7px);
43. What is the content property in CSS?
The content property is used with ::before and ::after pseudo-elements to insert generated content into the page. Example:
::after {
content: " (new)";
}
44. What is the purpose of the outline property in CSS?
The outline property is used to draw a line around an element, similar to border, but without affecting its layout. It’s often used to highlight elements, especially during focus. Example:
outline: 2px solid red;
45. What is the visibility property and how is it different from display?
visibility: Controls whether an element is visible or hidden, but the element still takes up space in the layout.
display: Controls whether an element is displayed in the layout. Setting display: none removes the element from the document flow.
46. What is the difference between inline and inline-block elements?
inline: Elements are displayed in a line, and only take up as much width as needed. Height and width properties are ignored.
inline-block: Similar to inline, but the element can have width and height properties defined.
47. What are logical properties in CSS?
Logical properties allow for layout and style definitions based on the writing mode (e.g., left-to-right or top-to-bottom). For example, margin-inline-start defines the margin on the left in left-to-right languages and the right in right-to-left languages.
48. What are the differences between rgb() and rgba() in CSS?
rgb(): Defines a color using Red, Green, and Blue values, like rgb(255, 0, 0) for red.
rgba(): Adds an alpha (transparency) channel to the rgb() color, like rgba(255, 0, 0, 0.5) for semi-transparent red.
49. What is the @supports rule in CSS?
The @supports rule is used to check whether a specific CSS feature is supported by the browser before applying certain styles. Example:
@supports (display: grid) {
.container {
display: grid;
}
}
50. How do you center a div in CSS?
There are several ways to center a div:
Flexbox:
.container {
display: flex;
justify-content: center;
align-items: center;
}
Grid:
.container {
display: grid;
place-items: center;
}
margin:
.center {
width: 200px;
height: 200px;
margin: 0 auto;
}