CSS Study Guide

📖 Core Concepts Cascading Style Sheets (CSS) – language that separates content (HTML) from presentation (layout, colors, fonts). Cascade – when multiple rules match an element, the rule with the highest origin and specificity wins; lower‑priority rules are ignored. Specificity – numeric weight of a selector: Inline style: 1,0,0,0 (highest) ID selector (#id): 0,1,0 Class/attribute/pseudo‑class (.cls, [type], :hover): 0,0,1 Type selector/pseudo‑element (div, ::first-line): 0,0,0,1 Inheritance – some properties (e.g., color, font-family) automatically apply to descendants; box properties (e.g., margin, background) do not. Selector types – Type, ID, Class, Pseudo‑class (:hover), Pseudo‑element (::first-line), Combinators ( , >, +, ). Declaration block – { property: value; } inside a rule‑set. Units – absolute (cm, in, pt), relative (em, ex, px), percentages (%). Positioning – static, relative, absolute, fixed (and sticky in newer specs). Float / Clear – float removes an element from normal flow and lets text wrap; clear stops wrapping on a given side. Media & Feature Queries – @media (profiles) selects styles for devices; @supports applies styles only if a property is supported. Vendor prefixes – -moz-, -webkit-, -ms-, -o- for experimental features; become obsolete after standardization. CSS Methodologies – OOCSS, Atomic CSS, BEM, SMACSS – organize large codebases and reduce duplication. --- 📌 Must Remember Specificity hierarchy: Inline > ID > Class/Attribute/Pseudo‑class > Type/Pseudo‑element. Default specificity values: Type selector = 0,0,0,1 Class selector = 0,0,1,0 ID selector = 0,1,0,0 Inheritance defaults: Text properties inherit; box model properties do not. Position values: static – normal flow, offsets ignored. relative – normal flow + offset, original space retained. absolute – removed from flow, positioned to nearest non‑static ancestor. fixed – positioned to viewport, stays put on scroll. Float cannot be applied to elements that are position: absolute or fixed. Pseudo‑class vs pseudo‑element syntax: single colon (:) = pseudo‑class, double colon (::) = pseudo‑element. Vendor prefix rule: Use prefixed property only when needed; always provide the unprefixed fallback. @supports syntax: css @supports (display: grid) { / grid styles / } BEM naming: blockelement--modifier – keeps class names flat and predictable. --- 🔄 Key Processes Determine which CSS rule applies Gather all matching selectors. Compare origin (user‑agent < user < author < inline). Compute specificity for each selector. Choose rule with highest origin → highest specificity → later source order. Create a selector chain with combinators Example: ul > li:first-child + a:hover → parse from left to right, applying each combinator rule. Layout an element Set position. If relative → apply offsets, keep original space. If absolute → locate nearest non‑static ancestor, apply offsets, remove from flow. If fixed → use viewport coordinates, ignore scrolling. Float and clear flow Apply float: left/right. Subsequent inline content wraps around the floated box. Use clear: left/right/both on following block to start below the float. Responsive design workflow Write base styles. Add @media queries for break‑points (e.g., @media (max-width: 600px)). Use @supports to fallback when a modern feature isn’t available. --- 🔍 Key Comparisons ID selector vs Class selector #nav → specificity 0,1,0,0 (higher) .nav → specificity 0,0,1,0 (lower) Pseudo‑class vs Pseudo‑element a:hover (class‑like, reacts to user interaction) – single colon. p::first-line (styles part of an element) – double colon. Relative vs Absolute positioning relative: stays in normal flow, offsets shift visual position only. absolute: removed from flow, positioned to nearest positioned ancestor. Float vs Flexbox (not in outline but common contrast) Float: simple left/right wrap, can cause clearfix issues. Flexbox: powerful one‑dimensional layout, controls alignment and distribution. Vendor‑prefixed vs Standard property -webkit-transform – only works in older WebKit browsers. transform – standard, works in all modern browsers. --- ⚠️ Common Misunderstandings “Higher specificity always wins” – origin (inline, author, user) can override a more specific selector from a lower‑priority source. “All properties inherit” – only inherited properties (mostly typographic) propagate; most box model properties do not. “position: static can be offset” – offsets (top, left, etc.) have no effect on static elements. “float creates a new block formatting context” – actually, overflow or display: flow-root does; floating alone does not. “Pseudo‑elements can target arbitrary text” – they are limited to predefined fragments (::first-line, ::first-letter, ::selection, etc.). --- 🧠 Mental Models / Intuition Cascade as a “waterfall” – imagine sheets of paper (styles) stacked; the topmost sheet that covers an element decides its look. Specificity as a “base‑4 number” – think of each selector part as a digit (inline, ID, class, type). Compare digit by digit from left to right. Positioning as “pinning” – relative = move the element but leave its original “pin”; absolute = detach the element and pin it to an ancestor; fixed = pin to the viewport. Float = “float a boat” – the floated element drifts to one side; surrounding content sails around it until told to “clear”. --- 🚩 Exceptions & Edge Cases Zero specificity – the universal selector and inherited rules have a specificity of 0,0,0,0. Multiple class selectors – .a.b counts as two class selectors → specificity 0,0,2,0. Inline styles – equivalent to an ID selector (0,1,0,0) but higher origin, thus outrank any stylesheet rule. !important – overrides normal cascade regardless of specificity, but still respects origin (user‑agent !important < author !important). position: sticky – behaves like relative until a scroll threshold is reached, then acts like fixed (not covered in source, but worth noting). --- 📍 When to Use Which Choose selector type: Use type selectors for broad resets (e.g., h1 {}) – low specificity. Use class selectors for reusable component styles. Use ID selectors only for unique page‑level hooks (avoid for styling). Use position: relative when you need to nudge an element without removing it from the document flow. Use position: absolute for overlay elements, tooltips, or when you need precise placement relative to a container. Use float for simple text wrapping around images; prefer Flexbox/Grid for complex layouts. Add vendor prefixes only when targeting browsers that lack the standard feature (check caniuse.com). Apply @supports to guard experimental or newer properties (e.g., grid). --- 👀 Patterns to Recognize Specificity spikes – any ID selector in a rule instantly raises its weight; look for # in large selector lists. Cascading overrides – later rules with equal specificity win; check source order when two rules look similar. Inheritance chains – color or font changes on a parent often affect many children; spot missing overrides on nested elements. Float‑clear pairing – when a layout breaks after an image, search for a missing clear on the following block. Responsive breakpoints – media queries usually use max-width or min-width; pattern @media (max-width: px) {} signals mobile tweaks. --- 🗂️ Exam Traps “ID selector always beats class selector” – true unless the class selector comes from a higher‑priority origin (e.g., user stylesheet). “!important ignores everything” – it still respects the origin hierarchy; a user‑agent !important can beat an author !important. “float: left will center an element” – floats only align to the side; centering requires margin: auto or Flexbox. “All pseudo‑classes need double colons” – only pseudo‑elements use ::; pseudo‑classes use a single :. “position: static can be combined with top to move an element” – offsets are ignored for static positioning. “Vendor prefixes are required forever” – once the standard property is widely supported, prefixes become unnecessary and should be removed. ---