CSS Interview Question

Download as pdf or txt
Download as pdf or txt
You are on page 1of 2

>>> 50 CSS Question

**Basics of CSS:**
1. What does CSS stand for, and what is its role in web development?
2. Explain the difference between inline, internal, and external CSS.
3. Describe the concept of cascading in CSS.
4. What is the purpose of the "box model" in CSS?
5. How do you comment in CSS code?

**Selectors and Specificity:**


6. Explain the difference between a class selector and an ID selector.
7. What is CSS specificity and how does it determine which styles are applied?
8. Describe the use of descendant selectors and child selectors.
9. How does the universal selector (*) work, and when should you use it?
10. Explain the purpose of the "important" keyword in CSS.

**Layout and Positioning:**


11. How do you center an element both horizontally and vertically using CSS?
12. Describe the difference between "position: static", "position: relative", "position: absolute",
and "position: fixed".
13. How can you create a flexible, responsive layout using CSS Grid?
14. What is the "float" property used for? How does it affect layout?
15. Explain the concept of the "clearfix" hack in CSS.

**Box Model and Display:**


16. Describe the properties that make up the CSS box model.
17. How do you modify the width and height of an element using the box model properties?
18. Explain the difference between "display: block", "display: inline", and "display: inline-
block".
19. What is the purpose of the "overflow" property in CSS?
20. How can you create a responsive layout using media queries?

**Typography and Text Styling:**


21. How do you change the font style and size of text using CSS?
22. Describe the difference between "font-weight" and "font-style" properties.
23. What are the advantages of using web fonts in CSS?
24. How do you apply text transformations (uppercase, lowercase, capitalize) in CSS?
25. Explain the purpose of the "line-height" property in typography.

**Colors and Backgrounds:**


26. How do you define colors using CSS? Provide examples of different color formats.
27. Describe the difference between the "background-color" and "background-image" properties.
28. How can you create gradient backgrounds using CSS?
29. What is the "background-size" property used for?
30. How do you add background images to specific parts of an element using CSS?
**Pseudo-classes and Pseudo-elements:**
31. Explain the concept of pseudo-classes in CSS.
32. How do you style the first and last child elements of a parent using pseudo-classes?
33. Describe the use of the "hover" and "active" pseudo-classes.
34. What are pseudo-elements in CSS? Provide examples.
35. How do you use the "::before" and "::after" pseudo-elements to insert content?

**Transitions and Animations:**


36. Describe how CSS transitions work. Provide an example.
37. How can you create smooth animations using CSS keyframes?
38. What is the difference between "transition" and "animation" in CSS?
39. Explain the purpose of the "transform" property in animations.
40. How do you control animation timing and duration in CSS?

**Flexbox and Grid Layout:**


41. Explain the concept of Flexbox in CSS. What problem does it solve?
42. How do you create a flexible layout using Flexbox properties?
43. Describe the role of the "flex-direction" property in Flexbox.
44. What is the CSS Grid layout? How does it differ from Flexbox?
45. How do you create a grid-based layout using the "grid-template-columns" property?

**Responsive Web Design:**


46. What is responsive web design, and why is it important?
47. How do you use media queries to make a website responsive?
48. Describe the mobile-first approach to responsive design.
49. What is the purpose of the "viewport" meta tag in CSS?
50. How can you hide or show elements based on screen size using media queries?

You might also like