My Notes

Go To Home Page
CSS Problem Statements

Table of Content

Section 1: CSS Basics & Selectors


Section 2: Box Model & Spacing


Section 3: Positioning & Display


Section 4: Flexbox


Section 5: Grid


Section 6: Responsive Design


Section 7: Real-World CSS


🔹 Section 1: CSS Basics & Selectors

  • What is CSS and why is it called Cascading?
  • Difference between inline, internal and external CSS.
  • Explain selector, property and value.
  • Difference between class selector and ID selector.
  • What is specificity in CSS?
  • Which has higher priority: ID or class?
  • Explain pseudo-classes like :hover and :focus.

🔹 Section 2: Box Model & Spacing

  • Explain CSS box model with diagram.
  • Difference between margin and padding.
  • How does border affect element size?
  • What is box-sizing: border-box and why is it used?
  • How to center a div using margin?
  • Difference between content-box and border-box.

🔹 Section 3: Positioning & Display

  • Difference between block, inline and inline-block.
  • Explain position: static, relative, absolute, fixed, sticky.
  • What happens when position is set to absolute?
  • Difference between relative and absolute positioning.
  • How to create a fixed navigation bar?
  • Difference between display: none and visibility: hidden.

🔹 Section 4: Flexbox

  • What is Flexbox and why was it introduced?
  • Explain main axis and cross axis.
  • Difference between justify-content and align-items.
  • How to center a div using Flexbox?
  • What is flex-wrap and when is it used?
  • Difference between row and column direction.

🔹 Section 5: CSS Grid

  • Difference between Flexbox and Grid.
  • How to define columns using grid-template-columns?
  • What does fr unit mean?
  • How to create equal columns using Grid?
  • What is gap in Grid?
  • When should Grid be preferred over Flexbox?

🔹 Section 6: Responsive Design

  • What is responsive design?
  • Explain media queries with example.
  • Difference between px, %, em, and rem.
  • What is mobile-first approach?
  • How to make images responsive?
  • Why should fixed widths be avoided?

🔹 Section 7: Real-World CSS

  • What is a CSS reset and why is it used?
  • Common CSS layout mistakes beginners make.
  • Why should !important be avoided?
  • How to debug CSS using DevTools?
  • Difference between static and responsive layouts.
  • Best practices for writing clean CSS.

Mini Project of using Next.js and Tailwind CSS