12. CSS (Cascading Style Sheets) & CSS Properties

CSS Optional — Paper-II, Section-B · P-II.VI.12 · Syllabus: Cascading Style Sheet (CSS), CSS properties. Expect code-writing, selectors, box-model and specificity questions.

1. Definition and Purpose

• CSS is a style-sheet language that describes the presentation (layout, colours, fonts, spacing) of HTML/XML documents. Standardized by W3C (CSS1 1996, CSS2 1998, CSS3 as modules from ~2011).
• Why: separates content (HTML) from presentation; one stylesheet styles an entire site (consistency, less code, faster pages via caching); enables responsive design and accessibility.

2. Syntax

selector {
  property: value;
  property: value;
}
/* example */
h1 { color: navy; font-size: 32px; text-align: center; }

3. Three Ways to Add CSS

<!-- 1. Inline -->
<p style="color: red;">Inline style</p>

<!-- 2. Internal (embedded) -->
<head><style> p { color: blue; } </style></head>

<!-- 3. External -->
<head><link rel="stylesheet" href="styles.css"></head>

4. Selectors

5. The Cascade, Specificity and Inheritance

Which rule wins? (1) !important declarations; (2) higher specificity; (3) if equal, the later rule in source order.

Specificity is counted as (inline, IDs, classes/attributes/pseudo-classes, elements/pseudo-elements):

• p → (0,0,0,1) · .note → (0,0,1,0) · #main → (0,1,0,0) · inline style → (1,0,0,0)

Inheritance: text-related properties (color, font, line-height) are inherited by children; box properties (margin, padding, border, width) are not.

6. The Box Model

Every element is a box: content → padding → border → margin (inside to outside).

+----------- margin -----------+
|  +-------- border --------+  |
|  |  +----- padding -----+ |  |
|  |  |      content      | |  |
|  |  +-------------------+ |  |
|  +------------------------+  |
+------------------------------+

• box-sizing: content-box (default): width = content only.
• box-sizing: border-box: width includes padding and border (easier layouts).

7. Important Properties

Units: px (absolute), % (of parent), em (of parent font size), rem (of root font size), vw/vh (1% of viewport width/height).

Positioning values: static (default flow); relative (offset from its normal place); absolute (relative to nearest positioned ancestor, removed from flow); fixed (relative to viewport, stays on scroll); sticky (relative until a scroll threshold, then fixed).

8. Responsive Design with Media Queries

.container { display: flex; gap: 16px; }
.card { flex: 1; padding: 20px; border: 1px solid #ccc; border-radius: 8px; }

@media (max-width: 600px) {
  .container { flex-direction: column; }   /* stack cards on phones */
}

Frameworks: Bootstrap (12-column grid), Tailwind CSS (utility classes). Preprocessors: Sass/LESS (variables, nesting).

---

📐 Worked Numericals

N1 — Box model width: width: 200px; padding: 20px; border: 5px; margin: 10px with content-box.

• Rendered box width = 200 + 2×20 + 2×5 = 250 px; space occupied including margin = 250 + 2×10 = 270 px.
• With box-sizing: border-box: rendered width = 200 px; content width = 200 − 40 − 10 = 150 px.

N2 — Specificity contest: which colour does the link get?

#nav .item a:hover { color: red; }   /* IDs 1, classes+pseudo 2, elements 1 -> (0,1,2,1) */
div ul li a        { color: blue; }  /* elements 4 -> (0,0,0,4) */

Red — one ID outweighs any number of elements.

N3 — rem/em: root font 16px; a div with font-size 1.5rem = 24px; inside it, a span with 0.5em = 12px (em is relative to its parent's 24px).

---

🎯 CSS Exam Angle

Define CSS, show the three ways to include it with precedence, then selectors and the box model diagram. A small numerical (box width or specificity) and a media-query snippet demonstrate practical command.

⚠️ MCQ Traps

• Priority: !important > inline > ID > class > element; later rule wins on ties.
• An ID is unique per page; a class can repeat.
• display:none removes the element's space; visibility:hidden keeps it.
• Margin is outside the border; padding is inside.
• em is relative to the parent's font size; rem to the root.
• position:absolute is relative to the nearest positioned ancestor, not always the page.

---

✅ Self-Check (with Answers)

Q1. Why is external CSS preferred?

Ans: One file styles every page (consistency, easy site-wide changes), the browser caches it (faster subsequent pages), and HTML stays clean (separation of content and presentation).

Q2. Write CSS to make all buttons with class "primary" green with white text and rounded corners, darker on hover.

Ans: .primary { background-color: green; color: white; border-radius: 6px; } and .primary:hover { background-color: darkgreen; }

Q3. A div has width 300px, padding 10px, border 2px, margin 20px (content-box). What horizontal space does it take?

Ans: 300 + 20 + 4 = 324px box; plus 40px margin = 364px total.

Q4. Differentiate position: relative, absolute and fixed.

Ans: Relative — offset from its normal position, still in flow. Absolute — removed from flow, positioned relative to nearest positioned ancestor. Fixed — positioned relative to the viewport, stays in place when scrolling.

Q5. What does the "cascading" in CSS mean?

Ans: Multiple rules can apply to one element; the cascade resolves conflicts by importance (!important), origin (author, user, browser), specificity and source order, while some properties also inherit down the tree.

Q6. Flexbox or Grid for a photo gallery with rows and columns?

Ans: Grid — it controls two dimensions (rows and columns) at once; Flexbox is best for one-dimensional rows or columns (e.g. a navbar).

📜 Past-Paper Questions & MCQs (CSS 2016–2026)

MCQs

2025 P-II · Q17. Which of the following properties defines labels for a list of items?

• (A) List-shape
• (B) List-style
• (C) List-type
• (D) List-style-type ✅
• Answer: (D) list-style-type.
• Why: list-style-type sets the marker of each item (disc, circle, square, decimal, lower-alpha). list-style is only a shorthand that sets the type, position and image together. list-shape and list-type are not CSS properties.