Q1 – Q10 · HTML & CSS Fundamentals

1. What is the CSS Box Model?

Every HTML element is treated as a rectangular box made of four layers: content, padding, border, and margin. By default (box-sizing: content-box), width and height apply only to the content area — padding and border add on top of that. Switching to border-box makes width include padding and border, which is almost always more intuitive.

div {
  box-sizing: border-box; /* width includes padding + border */
  width: 300px;
  padding: 10px;
  border: 5px solid black;
  margin: 20px;
}

2. What are semantic HTML elements?

Semantic elements clearly describe their purpose to both browsers and developers. They improve accessibility (screen readers understand the structure), help search engine crawlers, and make code easier to maintain. Non-semantic elements like <div> and <span> carry no inherent meaning.

<header>Site header</header>
<nav>Main navigation</nav>
<main>
  <article>Blog post content</article>
  <aside>Related links</aside>
</main>
<footer>Site footer</footer>

3. What is the difference between static, relative, absolute, fixed, and sticky positioning?

• static (default) — normal document flow; top/left/right/bottom have no effect.
• relative — offset from its own natural position; still occupies original space.
• absolute — removed from flow; positioned relative to the nearest non-static ancestor (or the viewport if none).
• fixed — positioned relative to the viewport; doesn't scroll with the page.
• sticky — behaves like relative until a scroll threshold is met, then becomes fixed.

.relative  { position: relative; top: 10px; }
.absolute  { position: absolute; top: 0; left: 0; }
.fixed     { position: fixed; top: 0; width: 100%; }
.sticky    { position: sticky; top: 0; }

4. How do you center a div horizontally and vertically?

Three modern approaches — Flexbox and Grid are preferred:

1. Flexbox (recommended)

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

2. CSS Grid

.container {
  display: grid;
  place-items: center;
  height: 100vh;
}

3. Absolute + Transform

.parent { position: relative; }
.child  {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}

5. What are pseudo-classes in CSS?

Pseudo-classes target elements in a specific state without adding extra HTML markup. They allow dynamic styling purely in CSS.

a:hover       { color: red; }
input:focus   { border-color: blue; }
li:first-child { font-weight: bold; }
p:nth-child(2) { color: green; }
button:disabled { opacity: 0.5; }

6. What is the difference between class selectors and ID selectors?

• Class (.name) — reusable, can appear on many elements. Specificity: 0-1-0.
• ID (#name) — must be unique per page. Specificity: 1-0-0 (higher than class).

.card  { background: #fff; }  /* reusable */
#hero  { font-size: 3rem; }   /* unique element */

7. How do you make a website responsive?

• Use flexible layouts (Flexbox / Grid) that adapt to available space.
• Apply @media queries to change styles at specific breakpoints.
• Use relative units (%, vw, rem) instead of fixed px for sizing.
• Add <meta name="viewport" content="width=device-width, initial-scale=1"> in the HTML head.
• Serve responsive images with srcset or CSS max-width: 100%.

.container { display: flex; flex-direction: row; }

@media (max-width: 600px) {
  .container { flex-direction: column; }
}

8. What is the difference between inline, block, and inline-block elements?

• inline — flows in text; no width/height control. Examples: <span>, <a>.
• block — starts on a new line, takes full parent width; width/height settable. Examples: <div>, <p>.
• inline-block — flows like inline but accepts width/height. Useful for icon-buttons.

9. How do z-index and stacking context work?

z-index controls the stacking order of overlapping positioned elements (any position except static). Higher value = on top. A stacking context is an isolated layer — created by properties like opacity < 1, transform, filter, or position + z-index. z-index comparisons only work within the same stacking context.

.modal-backdrop { position: fixed; z-index: 100; }
.modal          { position: fixed; z-index: 200; } /* above backdrop */

10. How do you optimize CSS performance?

• Use short, efficient selectors — avoid deep nesting like div ul li a span.
• Minimize layout thrashing — batch DOM reads/writes; avoid changing layout properties in JS loops.
• Prefer transform / opacity for animations — they are GPU-composited and don't trigger reflow.
• Remove unused CSS using tools like PurgeCSS or Vite's tree-shaking.
• Minify and compress CSS files before deploying.
• Avoid @import in CSS — it's synchronous; use bundler imports instead.