Back to Home

CSS Interview Questions

July 24, 2015

  1. What is the difference between classes and ID's in CSS?

    2. Both are selector in CSS. ID's specificity is much greater than class. Class can be re-usable.

  2. What's the difference between "resetting" and "normalizing" CSS? Which would you choose, and why?
  3. Describe Floats and how they work.

    Float is the position element that can have value of right and left. Overfloating can be prevent by set up 'clear:both'.

  4. Describe z-index and how stacking context is formed.

    5. z-index is for proirty order. The greater number is latest stak- thus come at front

  5. Describe BFC(Block Formatting Context) and how it works.
  6. What are the various clearing techniques and which is appropriate for what context?

    7. clear:both can clear floating element.

  7. Explain CSS sprites, and how you would implement them on a page or site.

  8. What are your favourite image replacement techniques and which do you use when?
  9. How would you approach fixing browser-specific styling issues?
  10. How do you serve your pages for feature-constrained browsers?
  11. What techniques/processes do you use?
  12. What are the different ways to visually hide content (and make it available only for screen readers)?
  13. Have you ever used a grid system, and if so, what do you prefer?
  14. Have you used or implemented media queries or mobile specific layouts/CSS?
  15. Are you familiar with styling SVG?
  16. How do you optimize your webpages for print?
  17. What are some of the "gotchas" for writing efficient CSS?
  18. What are the advantages/disadvantages of using CSS preprocessors?
  19. Describe what you like and dislike about the CSS preprocessors you have used.
  20. How would you implement a web design comp that uses non-standard fonts?
  21. Explain how a browser determines what elements match a CSS selector.
  22. Describe pseudo-elements and discuss what they are used for.

    23. Pseudo-elements like before, after, first-letter will help to select elements partially. It is also distinguished by using '::'.

  23. Explain your understanding of the box model and how you would tell the browser in CSS to render your layout in different box models.
  24. What does * { box-sizing: border-box; } do? What are its advantages?
  25. List as many values for the display property that you can remember.

    26. display: none

  26. What's the difference between inline and inline-block?

    27. inline does not working with padding-bottom and top property. But inline-block does

  27. What's the difference between a relative, fixed, absolute and statically positioned element?
  28. The 'C' in CSS stands for Cascading. How is priority determined in assigning styles (a few examples)? How can you use this system to your advantage?

    29. If you determine rule later on the css, it will be override the previous role. Bigger specificity always goes priority in styling. For instance ID and class.

  29. What existing CSS frameworks have you used locally, or in production? How would you change/improve them?
  30. Have you played around with the new CSS Flexbox or Grid specs?
  31. How is responsive design different from adaptive design?
  32. Have you ever worked with retina graphics? If so, when and what techniques did you use?
  33. Is there any reason you'd want to use translate() instead of absolute positioning, or vice-versa? And why?