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. What is the difference between HTML and CSS?
HTML structures the content while CSS styles it — controlling layout, colors, fonts, and spacing.
3. What are the advantages of using CSS?
CSS separates content from design, makes pages easier to maintain, improves load time, and provides styling control across the site.
4. What is a pseudo-element in CSS?
A pseudo-element allows you to style specific parts of an element, such as ::before and ::after. They create elements that do not exist in the HTML structure but are styled via CSS.
5. What is specificity in CSS?
Specificity is a mechanism in CSS that determines which rule is applied when multiple rules match the same element. It is based on the types of selectors used in a rule.
6. What is the difference between relative and absolute units in CSS?
Relative units (like %, em, rem) scale based on other elements, while absolute units (like px, cm, in) have fixed values.
7. How does inheritance work in CSS?
Inheritance allows child elements to take certain CSS properties from their parent. Not all properties are inherited by default.
8. What is the difference between visibility: hidden and display: none?
visibility: hidden hides the element but still takes up space. display: none removes the element from the document flow.
9. What is media query in CSS?
Media queries allow you to apply different styles depending on the device characteristics such as width, height, or screen resolution.
10. What is the difference between min-width and max-width?
min-width sets the minimum width a container can shrink to. max-width sets the maximum width it can grow to.
11. What is specificity in CSS?
Specificity is a ranking system that determines which CSS rule is applied when multiple rules match the same element. It is calculated based on the types of selectors used (inline styles, IDs, classes, element names).
12. What is the difference between visibility: hidden and display: none?
visibility: hidden hides the element but it still occupies space in the layout, while display: none removes the element completely from the layout.
13. What is the difference between max-width and min-width?
max-width sets the maximum width an element can be, while min-width sets the minimum width. These properties are often used in responsive design to create flexible layouts.
14. What is a media query in CSS?
Media queries are used to apply CSS rules based on device characteristics like screen width, height, or resolution. They're essential for responsive web design.
15. How do you implement a responsive layout using CSS?
You can implement a responsive layout using flexible grid systems, percentage-based widths, media queries, and CSS frameworks like Tailwind or Bootstrap.
16. What is specificity in CSS and how is it calculated?
Specificity determines which CSS rule is applied when multiple rules match the same element. It is calculated based on the type of selectors: inline styles > IDs > classes/attributes/pseudo-classes > elements/pseudo-elements.
17. What is the difference between reset.css and normalize.css?
reset.css removes all browser default styles. normalize.css preserves useful defaults and corrects inconsistencies across browsers.
18. Explain the concept of BEM in CSS.
BEM (Block Element Modifier) is a naming convention for classes to improve code readability and modularity: block__element--modifier.
19. What are pseudo-elements in CSS?
Pseudo-elements allow you to style specific parts of an element, e.g., ::before, ::after, ::first-line, etc.
20. What are pseudo-classes in CSS?
Pseudo-classes define a special state of an element, such as :hover, :focus, :nth-child().
21. What is the difference between relative, absolute, fixed, and sticky positioning?
Relative: offset from normal position. Absolute: positioned to nearest positioned ancestor. Fixed: relative to viewport. Sticky: switches between relative and fixed.
22. How does media query work in responsive design?
Media queries apply styles based on device characteristics like width, height, resolution. Example: @media (max-width: 768px) { ... }
23. What is the difference between min-width and max-width in media queries?
min-width triggers styles for screen sizes equal to or larger than the value; max-width for equal to or smaller.
24. Explain z-index and stacking context in CSS.
z-index defines stack order of elements. Stacking context is formed by positioned elements with z-index or certain CSS properties.
25. What are the performance tips for writing efficient CSS?
Avoid deep selectors, use classes over tags or IDs, minimize reflows/repaints, compress CSS files, reduce unused styles (e.g., PurgeCSS).
26. What are combinators in CSS?
Combinators define relationships between selectors: descendant ( ), child (>), adjacent sibling (+), general sibling (~).
27. How does inheritance work in CSS?
Certain properties (like font-family, color) are inherited from parent elements. Others require explicit definition or use of the 'inherit' keyword.
28. What is the difference between visibility: hidden and display: none?
visibility: hidden hides the element but keeps space; display: none removes the element and space from the layout.
29. What is the difference between inline, inline-block, and block?
Inline: flows with text, no height/width. Block: full width, new line. Inline-block: like inline, but supports height/width.
30. What are best practices for managing CSS in large applications?
Use modular architecture (like BEM, OOCSS), pre-processors (SCSS), utility-first frameworks (Tailwind), and tools like PostCSS, autoprefixer.
31. What is Tailwind CSS and why is it used?
Tailwind is a utility-first CSS framework that speeds up development by composing utilities directly in your HTML classes.
32. What are custom properties (CSS variables)?
Custom properties are reusable values defined with --name: value syntax. Example: var(--primary-color).
33. Explain the difference between SCSS and CSS.
SCSS (Sassy CSS) is a CSS preprocessor that adds features like variables, nesting, mixins, and functions, compiled into plain CSS.
34. What are CSS transitions and how do they work?
Transitions animate property changes smoothly over time using duration and easing functions. Example: transition: all 0.3s ease-in-out.
35. What is the difference between animations and transitions in CSS?
Transitions animate between two states on trigger. Animations define keyframes and loop or control animations over time.
36. What are keyframes in CSS animations?
@keyframes define the steps in a CSS animation from start to end. Example: @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
37. What is a media feature in a media query?
Media features describe device characteristics (width, orientation, resolution). Used to apply conditional styles.
38. What is important in CSS and when should it be used?
!important overrides all other declarations. It should be used sparingly as it breaks CSS cascading behavior.
39. What is calc() function in CSS?
calc() allows mathematical expressions with values. Example: width: calc(100% - 20px);
40. What is the difference between max-content, min-content, and fit-content?
These are intrinsic sizing keywords. max-content: largest content width, min-content: smallest possible, fit-content: fits within constraints.
41. What is the purpose of the `will-change` property in CSS?
The `will-change` property informs the browser of what properties are likely to change, enabling performance optimizations before changes occur (e.g., will-change: transform;).
42. How can you implement dark mode using CSS?
Dark mode can be implemented using the prefers-color-scheme media query: @media (prefers-color-scheme: dark) to apply styles when dark mode is enabled by the user.
43. What is Critical CSS and why is it important?
Critical CSS refers to the minimal CSS required to render above-the-fold content. It helps improve performance by reducing render-blocking CSS and speeding up first paint.
44. What are utility-first CSS frameworks and their advantages?
Utility-first frameworks like Tailwind CSS provide low-level utility classes to build designs quickly. They reduce custom CSS, improve consistency, and support rapid prototyping.
45. What is CSS-in-JS and its pros/cons?
CSS-in-JS is styling using JavaScript (e.g., styled-components). Pros: scoped styles, dynamic theming. Cons: larger JS bundles, runtime overhead.
46. What is the role of CSS in accessibility (a11y)?
CSS helps with accessibility by ensuring readable font sizes, sufficient contrast, visible focus states, and reducing motion for sensitive users using prefers-reduced-motion.
47. What is the difference between `visibility: hidden` and `aria-hidden="true"`?
`visibility: hidden` hides visually but keeps element in the DOM. `aria-hidden="true"` hides it from screen readers, improving accessibility control.
48. What is the difference between Atomic CSS and BEM?
Atomic CSS uses single-purpose classes (e.g., .mt-2), while BEM uses structured naming for blocks, elements, and modifiers. Atomic CSS emphasizes utility, BEM emphasizes readability.
49. How do you write print-friendly CSS?
Use @media print to define styles for printing. Hide non-essential elements, use black and white colors, and avoid fixed positioning.
50. What are some modern CSS tools for large-scale applications?
PostCSS, Tailwind CSS, SCSS, PurgeCSS, CSS Modules, and design systems like Material UI help manage CSS in large-scale apps by improving performance, modularity, and scalability.