codebypc

# 20 CSS Interview Questions

1. What is CSS and why is it used?
- CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation of a document written in HTML or XML. It is used to control the layout of web pages, including colors, fonts, and spacing.

2. What are the different ways to apply CSS to a web page?
- CSS can be applied in three ways: inline, internal (embedded), and external stylesheets.

3. What is the box model in CSS?
- The CSS box model describes the rectangular boxes generated for elements in the document tree. It includes content, padding, border, and margin.

4. How can you center an element horizontally with CSS?
- To center an element horizontally, you can use margin: auto; on the element's container if it has a fixed width.

5. What is the difference between `class` and `id` selectors in CSS?
- Class selectors are reusable and can be used on multiple elements, whereas id selectors are unique and should be used for a single element within a page.

6. How do you implement responsive design with CSS?
- Responsive design can be implemented using media queries, flexible grid layouts, and flexible images.

7. What is a CSS preprocessor? Mention some examples.
- A CSS preprocessor extends CSS with variables, nested rules, and functions. Examples include SASS, LESS, and Stylus.

8. Explain what Flexbox is and its benefits.
- Flexbox is a CSS layout model that allows elements to align and distribute space within a container efficiently, offering control over direction, alignment, and order.

9. What is the purpose of the `z-index` property?
- The z-index property specifies the stack order of elements, determining which elements appear on top of others.

10. How would you make a website mobile-friendly using CSS?
- Use responsive design techniques, such as media queries, fluid grids, and flexible images to ensure website compatibility across different devices.

11. What is the difference between `relative` and `absolute` positioning?
- Relative positioning moves the element relative to its normal position, whereas absolute positioning positions the element relative to its nearest positioned ancestor.

12. How can you create a simple CSS animation?
- Define keyframes using @keyframes and apply it to an element using the animation property.

13. What are pseudo-classes in CSS?
- Pseudo-classes are keywords added to selectors that specify a special state of the selected elements, like :hover, :active, :visited.

14. What is the difference between `visibility: hidden;` and `display: none;`?
- visibility: hidden; hides the element but still takes up space in the layout, whereas display: none; removes the element from the document flow entirely.

15. How do you optimize CSS for performance?
- Minimize file size by compressing CSS, use shorthand properties, and remove unused CSS.

16. What are CSS Variables and how are they used?
- CSS Variables, also known as Custom Properties, allow you to store values that can be reused throughout a document, defined with the -- prefix and accessed using the var() function.

17. What is a CSS Grid and how does it differ from Flexbox?
- CSS Grid is a two-dimensional layout system for creating grid-based layouts, while Flexbox is a one-dimensional layout model.

18. Can you explain the concept of specificity in CSS?
- Specificity determines which CSS rule is applied by assigning a weight based on the type of selectors used (ID, class, element).

19. How can you hide an element in CSS?
- Use display: none;, visibility: hidden;, or opacity: 0; depending on the desired effect.

20. What is the purpose of the `float` property in CSS?
- The float property is used for positioning and formatting content, allowing elements to be horizontally placed alongside each other.

❤2

495 views11:20