CSS Interview Questions

1. What is CSS Sprites?

[{"selector":"#anim-e92007f0-abe2-4e51-89dd-b93da0d061ca [data-leaf-element=\"true\"]","keyframes":{"transform":["translate(19.16666673644822%, 0%) scale(1.5)","translate(0%, 0%) scale(1)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}]

2. How many display properties are there?

[{"selector":"#anim-159d1921-db17-4148-b9d5-aedc0dc825e8 [data-leaf-element=\"true\"]","keyframes":{"transform":["translate3d(7.812499744007886%, 0, 0) translate(25%, 0%) scale(1.5)","translate3d(0%, 0, 0) translate(0%, 0%) scale(1)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.14,.34,.47,.9)","fill":"forwards"}]

3. Difference between CSS2 and CSS3?

[{"selector":"#anim-942dbe04-7959-45d2-a440-cfeb3fe0bf9a [data-leaf-element=\"true\"]","keyframes":{"transform":["translate3d(21.874999829338595%, 0, 0)","translate3d(0%, 0, 0)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"both"}]

5. What is the difference between padding and margin

[{"selector":"#anim-0941589a-cad0-4e2a-8d3b-911e10adf734 [data-leaf-element=\"true\"]","keyframes":{"transform":["translate3d(-21.874999829338588%, 0, 0)","translate3d(0%, 0, 0)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"both"}]

6. What all the position states used in CSS

[{"selector":"#anim-8b70bd33-6eea-466d-a281-f6e6f492cbe2 [data-leaf-element=\"true\"]","keyframes":{"transform":["translate(0%, 0%) scale(1.5)","translate(0%, 0%) scale(1)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}]

5. Explain the term Responsive web design.

[{"selector":"#anim-60baa3a8-577c-485e-8bc0-0b1b70a59e48 [data-leaf-element=\"true\"]","keyframes":{"transform":["translate3d(7.812499744007886%, 0, 0) translate(25%, 0%) scale(1.5)","translate3d(0%, 0, 0) translate(0%, 0%) scale(1)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.14,.34,.47,.9)","fill":"forwards"}]

6. What are the differences between relative and absolute in CSS?

[{"selector":"#anim-ac2b63ac-28be-483b-957a-bb92ba8c3734 [data-leaf-element=\"true\"]","keyframes":{"transform":["translate3d(-7.868525640762189%, 0, 0)","translate3d(0%, 0, 0)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"both"}]

7. What is CSS opacity?

[{"selector":"#anim-8aa7b209-8959-4274-ad9e-56cda3d7bf78 [data-leaf-element=\"true\"]","keyframes":{"transform":["translate3d(7.868525640762189%, 0, 0)","translate3d(0%, 0, 0)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"both"}]

8. What is Z-index and why we use?

[{"selector":"#anim-0c77a641-70fb-49a7-b0ce-f3b692fcb321 [data-leaf-element=\"true\"]","keyframes":{"transform":["translate(0%, 0%) scale(1.5)","translate(0%, 0%) scale(1)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}]

9. What are CSS vendor prefixes?

[{"selector":"#anim-abf7e58f-7bdd-4dee-91d2-84990633b426 [data-leaf-element=\"true\"]","keyframes":{"transform":["translate3d(-31.251850458680696%, 0, 0)","translate3d(0%, 0, 0)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"both"}]

10. What are CSS preprocessors?

[{"selector":"#anim-c03eab84-cc44-4183-86e3-2d7b7c889e7b [data-leaf-element=\"true\"]","keyframes":{"transform":["translate(0%, 0%) scale(1.5)","translate(0%, 0%) scale(1)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}]

[{"selector":"#anim-4314d483-46d0-4ccc-b547-517a2c673550 [data-leaf-element=\"true\"]","keyframes":{"transform":["translate(0%, 0%) scale(1.5)","translate(0%, 0%) scale(1)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}] Learn more

CSS Interview Questions

1. What is CSS Sprites?