Q1 — What is CSS? Why is it used?
CSS (Cascading Style Sheets) is used to style HTML elements, control layout, colors, fonts, spacing, responsiveness, and enhance user experience.
Q2 — Different types of CSS?
▶ Inline CSS – inside style attribute.
▶ Internal CSS – inside <style> tag.
▶ External CSS – separate .css file linked with <link>.
👉 Best practice: external CSS.
Q3 — Difference between id and class?
➡ id: unique, used for only one element.
➡ class: reusable, used for multiple elements.
Q4 — What is the difference between inline, block, and inline-block?
▶ Inline: flows with text (e.g., <span>, <a>).
▶ Block: takes full width (e.g., <div>, <p>).
▶ Inline-block: inline but accepts width/height.
Q5 — What is the difference between absolute, relative, fixed, and sticky positioning?
➡ Relative: relative to itself.
➡ Absolute: relative to nearest positioned parent.
➡ Fixed: relative to viewport.
➡ Sticky: toggles between relative & fixed.
Q6 — What are pseudo-classes and pseudo-elements?
➡ Pseudo-class: element state (:hover, :first-child).
➡ Pseudo-element: part of element (::before, ::after).
Q7 — What is the difference between inline, internal, and external CSS in terms of performance?
▶ Inline: high specificity, poor maintainability.
▶ Internal: works for one page.
▶ External: reusable, cached by browsers (best).
Q8 — What is the difference between absolute and relative URL in CSS?
➡ Absolute: full path/URL.
➡ Relative: relative to current file location.
Q9 — What are CSS frameworks? Give examples.
Pre-written stylesheets/libraries for faster UI. Examples: Bootstrap, Tailwind, Bulma, Foundation.
Q10 — Difference between CSS2 and CSS3?
CSS3 introduced: media queries, flexbox, grid, animations, transitions, border-radius, shadows.
Q11 — Explain CSS cascade.
Cascade decides which styles are applied. Order of importance:
▶ Inline styles
▶ IDs
▶ Classes/pseudo-classes
▶ Elements/pseudo-elements
Q12 — What is the difference between relative units (em, rem, %) and absolute units (px)?
➡ px: fixed.
➡ em: relative to parent font-size.
➡ rem: relative to root font-size.
➡ %: relative to parent container.
Q13 — What is the difference between relative length (vh, vw) and absolute (px)?
▶ vh: viewport height.
▶ vw: viewport width.
▶ px: fixed pixels.
Q14 — What is progressive enhancement vs graceful degradation in CSS?
➡ Progressive enhancement: start with basic CSS, add advanced features.
➡ Graceful degradation: start with full features, ensure fallback for older browsers.
Q15 — What are CSS resets and normalize.css?
▶ Reset.css: removes all default browser styles.
▶ Normalize.css: makes default styles consistent across browsers.