CSS Basics
1. What is CSS?
CSS (Cascading Style Sheets) is a style sheet language used for describing the presentation of a document written in HTML or XML.
2. How does CSS work in conjunction with HTML?
CSS is used to style HTML elements, giving developers control over the layout, colors, fonts, and overall appearance of a webpage.
3. What are the different ways to apply CSS to a webpage?
CSS can be applied via inline styles, internal (embedded) stylesheets, or external stylesheets.
4. Explain the box model in CSS.
The box model describes how the size of an element is determined by its content, padding, borders, and margins.
5. What is the difference between `margin` and `padding`?
`Margin` is the space outside an element, while `padding` is the space inside an element, between the content and the border.
6. How can you center an element horizontally and vertically?
You can center an element using flexbox by applying `justify-center` and `items-center` classes to a flex container.
7. What are the different types of selectors in CSS?
CSS selectors include universal, type, class, ID, attribute, and pseudo-class selectors.
8. What is specificity in CSS, and how does it work?
Specificity determines which CSS rule is applied when multiple rules target the same element. It is calculated based on the number and type of selectors used.
9. Explain the concept of inheritance in CSS.
Inheritance allows child elements to inherit styles from their parent elements. Not all CSS properties are inheritable.
10. What is the difference between `class` and `id` selectors?
`Class` selectors are reusable and can be applied to multiple elements, while `id` selectors are unique and should be applied to only one element per page.
Advanced CSS Concepts
11. How does `flexbox` work, and when would you use it?
`Flexbox` is a layout model that allows elements to align and distribute space within a container. It is useful for creating flexible and responsive layouts.
12. What is `grid` layout in CSS, and how does it differ from `flexbox`?
`Grid` is a 2-dimensional layout system for web pages. Unlike `flexbox`, which is 1-dimensional, `grid` allows for both rows and columns.
13. Explain the difference between `inline`, `block`, and `inline-block` elements.
`Block` elements take up the full width available, `inline` elements only take up as much width as necessary, and `inline-block` elements behave like inline elements but can have width and height.
14. What is a pseudo-class? Provide some examples.
A pseudo-class is used to define a special state of an element, such as `:hover`, `:focus`, and `:nth-child()`.
15. What are pseudo-elements, and how do they differ from pseudo-classes?
Pseudo-elements like `::before` and `::after` allow you to style specific parts of an element. Unlike pseudo-classes, they do not target the element's state but rather a specific part of its content.
16. How can you make a website responsive using CSS?
You can make a website responsive by using media queries, flexible grids, fluid images, and responsive units like `em`, `rem`, and percentages.
17. What is the `z-index`, and how does it work?
`z-index` controls the stacking order of elements that overlap. Elements with higher `z-index` values appear on top of those with lower values.
18. How do you create a CSS transition?
CSS transitions allow you to change property values smoothly (over a given duration) by specifying the properties, duration, timing function, and delay.
19. Explain CSS animations and how they differ from transitions.
CSS animations allow you to create complex animations with multiple keyframes, while transitions are limited to simple property changes from one state to another.
20. What is a media query, and how do you use it?
Media queries are used to apply different styles for different devices or screen sizes, allowing you to create responsive designs.
Layout & Positioning
21. What are the different `position` values in CSS, and how do they work?
The `position` property can be `static`, `relative`, `absolute`, `fixed`, or `sticky`, each defining how an element is positioned in relation to its normal flow and other elements.
22. How does the `float` property work, and what are its common use cases?
The `float` property moves an element to the left or right, allowing text and inline elements to wrap around it. It's commonly used for layouts and image placement.
23. What is the `clear` property in CSS, and when is it used?
The `clear` property is used to control the behavior of elements that follow floating elements, clearing the float to ensure proper layout.
24. Explain the difference between `relative`, `absolute`, `fixed`, and `sticky` positioning.
`Relative` positioning moves an element relative to its normal position, `absolute` positions an element relative to its closest positioned ancestor, `fixed` positions an element relative to the viewport, and `sticky` combines relative and fixed positioning.
25. How do you implement a sticky header using CSS?
To create a sticky header, use `position: sticky` with `top: 0` to keep the header fixed at the top of the viewport as you scroll.
26. What is the difference between `display: none` and `visibility: hidden`?
`display: none` removes the element from the document flow, while `visibility: hidden` hides the element but still takes up space in the layout.
27. How can you create a two-column layout using CSS?
A two-column layout can be created using `flexbox` or `grid` layout, or by setting `float` on one or both columns.
28. What is the purpose of the `overflow` property in CSS?
The `overflow` property controls how content that exceeds an element's box is handled. It can be set to `visible`, `hidden`, `scroll`, or `auto`.
29. Explain how to use `min-width` and `max-width` in CSS.
`min-width` sets the minimum width an element can be, while `max-width` sets the maximum width. These properties ensure elements are responsive and fit within their containers.
30. How can you use CSS to hide an element but still keep it in the DOM?
To hide an element but keep it in the DOM, use `visibility: hidden` instead of `display: none`.
Styling & Effects
31. What are CSS preprocessors, and why would you use one?
CSS preprocessors like Sass or Less extend CSS with variables, nesting, and functions, allowing for more dynamic and maintainable stylesheets.
32. What is the difference between `rem` and `em` units in CSS?
`rem` units are relative to the root element’s font size, while `em` units are relative to the font size of the parent element.
33. How do you apply a custom font to a website using CSS?
Use the `@font-face` rule to define a custom font, then apply it using the `font-family` property in your CSS.
34. What is the purpose of the `::before` and `::after` pseudo-elements?
`::before` and `::after` allow you to insert content before or after an element’s content, often used for adding decorative elements.
35. How can you create a gradient background using CSS?
Use the `background: linear-gradient()` or `background: radial-gradient()` properties to create gradient backgrounds.
36. What is the difference between `opacity` and `rgba`?
`opacity` affects the transparency of the entire element, while `rgba` allows you to set the color and transparency of a specific color.
37. How can you add shadows to elements using CSS?
Use the `box-shadow` property to add shadows to elements and `text-shadow` to add shadows to text.
38. What are CSS variables, and how do you use them?
CSS variables (custom properties) are defined using `--variable-name` and can be reused throughout your stylesheet, providing a way to manage and update styles dynamically.
39. How do you create a responsive image gallery using CSS?
Create a responsive image gallery using CSS grid or flexbox layouts and media queries to adjust the layout for different screen sizes.
40. Explain the concept of `clipping` and `masking` in CSS.
`Clipping` and `masking` are used to control which parts of an element are visible. `clip-path` and `mask` properties define how an element’s content is displayed or hidden.
Performance & Best Practices
41. How can you optimize CSS for performance?
Optimize CSS by minimizing file sizes, using shorthand properties, removing unused styles, and leveraging CSS compression tools.
42. What is critical CSS, and how does it improve performance?
Critical CSS is the CSS required to render above-the-fold content. By inlining critical CSS, you improve page load times and perceived performance.
43. How do you avoid specificity issues in CSS?
Avoid specificity issues by using class selectors, employing a modular CSS architecture like BEM, and being consistent with your selector choices.
44. What are CSS Grid and Flexbox, and when should you use each?
Use CSS Grid for complex, 2-dimensional layouts and Flexbox for simpler, 1-dimensional layouts. Both can be used together for more advanced designs.
45. How do you handle browser compatibility issues with CSS?
Handle browser compatibility issues by using vendor prefixes, testing across different browsers, and using fallbacks or polyfills for unsupported features.
46. What is the `will-change` property in CSS?
The `will-change` property lets the browser know which properties will change, allowing for optimizations and smoother transitions or animations.
47. How can you test and debug CSS issues?
Test and debug CSS issues using browser developer tools, inspecting elements, analyzing computed styles, and using CSS validators.
48. What is the `box-sizing` property, and how does it affect layout?
The `box-sizing` property defines how the width and height of an element are calculated. `content-box` includes only the content, while `border-box` includes padding and border.
49. How can you create custom form controls with CSS?
Create custom form controls by styling the native controls or using CSS to hide default controls and implement custom designs using labels and pseudo-elements.
50. What are CSS custom properties (variables) and how can they be used for theming?
CSS custom properties (variables) are used to store values that can be reused throughout a stylesheet. They enable easy theming and consistent styling by updating the variable values.