Introduction

CSS stands for Cascading Styling Sheet. How to display the elements on the page is decided by style sheet language. It gives a consistent look to the web pages.

The main advantage of CSS is that it separates the content from the presentation. As a result, this separation provides a lot of flexibility and control over the look of a website.

We are using the third version of the CSS standard known as Cascading Style Sheet 3, which is used to style and format web pages.

This article covers the most frequently asked CSS interview questions in the placement rounds of highly reputed companies.

Basic Level Interview Questions

1. Explain the box model in CSS.
2. Name the properties that are a part of the box model in CSS.
3. What are the advantages of CSS?
4. Explain some limitations of CSS.
5. How will you include CSS in the webpage?
6. Name the different types of selectors in CSS.
7. What is a CSS Preprocessor?
8. Explain the ‘div~p’ and ‘div+p’ selector.
9. What are Sass, Less, and Stylus? What are their uses?
10. What do you understand by VH/VW in CSS?
11. Compare and contrast reset CSS and normalize CSS.
12. Differentiate between inline, inline-block, and block.
13. Why is it important to test the webpage in different browsers?
14. Explain Pseudo-elements and Pseudo-classes.
15. What are the different ways to specify units in the CSS?
16. What is the effect of margin-top or margin-bottom on inline elements?
17. Name the property that is used for changing the font face.
18. What is the use of the ‘div>p’ selector?
19. What is the purpose of the cm measurement unit?
20. What do you know about Adjacent Sibling Combinator?
21. Write down the differences between adaptive design and responsive design.
22. How are the CSS selectors matched against the elements by the browser?
23. What is the difference between border-box and content-box?
24. Define opacity in CSS3.
25. What is the use of float property in CSS?
26. What is the z-index? Explain its functionality.
27. List some properties of flexbox.
28. What is cascading in CSS?
29. Explain the ‘div,p’ and ‘div p’ selector.
30. Which is more time-consuming- Adaptive Design or Responsive Design?
31. What is the difference between align-items and align-content?
32. What is graceful degradation?
33. Explain the functioning of the Z index.
34. What will happen if we use 100% width and floats across the page?
35. What do you know about the descendant selector?
36. What is the purpose of a 1% measurement unit?
37. Name the property that controls the repetition of an image in the background.
38. Is it possible to set an image to be shown as a cursor?
39. How will you set the line style for the outline?
40. Name the property that specifies the left padding of an element.

CSS Interview Questions for Experienced

1. Explain CSS position properties.
2. What does DOM Reflow mean?
3. When does DOM reflow occur?
4. How will you center align a div inside another div?
5. Name the four types of @media properties.
6. What is a grid system?
7. Explain different ways to hide the element using CSS.
8. What does the: root pseudo-class refer to?
9. What is the meaning of Accessibility(a11y)?
10. How will you restore the default value of a property?
11. Differentiate between CSS grid and flexbox?
12. Explain the working of Calc.
13. Explain the CSS Custom properties.
14. What is the difference between CSS variables and preprocessor variables?
15. What is the goal of *{box-sizing:border-box; } do? What are its advantages?
16. What is the meaning of! important in CSS?
17. Explain the process of calculating specificity.
18. Explain progressive rendering.
19. How will you implement progressive rendering on the website?
20. What are the advantages of progressive rendering?
21. What is the advantage of using translate() instead of absolute position?
22. How will you determine if the browser supports a certain feature or not?
23. How does the absolute positioning work?
24. Explain the working of overflow: hidden property?
25. What will you do to align content inside the p tag at the center of the div?
26. What is the main difference between padding in CSS?
27. How to assign the numbering to head values of sections and categories automatically?
28. How will you differentiate nth-child() from the nth of type selector?
29. Explain the importance of CSS Sprites.
30. Explain tweening in CSS.
31. What is the need to use clear property along with floats in CSS?
32. What will be your approach to fixing browser-specific styling issues?
33. What do you know about W3C?
34. Is it possible to have more than one selector in CSS?
35. How will you overrule underlying elements?
36. Define Contextual selector.
37. Compare Hexadecimal color codes with RGB values.
38. Differentiate between Grouping and Nesting in CSS?
39. How will you define the dimensions of an element?
40. Choose the precedent among HTML procedures and CSS properties.
41. Define inline style.
42. How will you add comments in CSS?
43. Define at-rule?
44. How is CSS cascaded to mix with the user’s sheet?
45. Is it mandatory to use quotes in the URL?
46. What is an alternate style sheet?
47. Why is @import is placed only at the top?
48. How will you remove the gap under an image?
49. What is the method of designing backward compatibility in CSS?
50. Explain progressive enhancement.