CSS
275 bites tagged CSS — interview questions with model answers, and 60-second explainers.
CSS Pseudo-elements: Styling Parts of an Element
Pseudo-elements style parts of an element not in the DOM, like a paragraph's first line or selected text. Use `::before`/`::after` for decorative content or `::selection` to style user highlights.
CSS Margin Collapsing: The Largest Margin Wins
Instead of adding up, vertical margins on adjacent block elements 'collapse' into one, taking the size of the largest margin. This explains why two paragraphs with `margin: 1rem` don't have `2rem` of space between them. The footgun is assuming it's a bug.
CSS Positioning: Taking Elements Out of Normal Flow
CSS `position` lets you override the default document flow. Think of it as telling an element to ignore its neighbors and listen to `top`/`left` coordinates instead. Use it for overlays, modals, and sticky headers.
CSS Pseudo-classes: Style Elements Based on State
CSS pseudo-classes style elements based on their state, not just their HTML structure. Use them for interactive states like `:hover`, form validation like `:invalid`, or structural position like `:first-child`.
CSS box-sizing: Predictable Element Sizing
The `box-sizing` property controls if padding and borders are added outside an element's width or carved out from inside. Using `border-box` makes layouts predictable, ensuring a `width: 100px` box is exactly 100px wide.
CSS 'display': How Elements Occupy Space
The CSS `display` property defines an element's layout role: does it demand its own line (`block`) or share space (`inline`)? It's essential for everything from text flow to complex layouts with `flex` and `grid`.
CSS Selectors: How to Target HTML for Styling
CSS selectors are like addresses for your HTML, telling the browser which elements to style. They're used to apply everything from colors to layouts. The main footgun is specificity: an overly specific selector can be difficult to override later.
CSS Inheritance: Styles Flow Downhill
CSS inheritance is like genetics for web elements: children inherit styles like `color` and `font-family` from their parents. This is why setting a font on `<body>` styles a whole page.
CSS Box Model: Every Element is a Box
Every HTML element is a box with layers: content, padding, border, and margin. This model dictates how elements take up space and align, forming the basis of all CSS layout. The footgun is the default sizing, which adds padding *outside* the set width.
CSS Specificity: The Browser's Tie-Breaking Rule
CSS Specificity is the browser's tie-breaking system for conflicting styles. Think of it as a score: an ID is worth more than any number of classes, and a class is worth more than any number of elements. The footgun: using `!important` to win.
CSS Cascade: How Browsers Resolve Style Conflicts
The CSS Cascade is a tie-breaking algorithm that decides which style rule applies when multiple rules target the same element. It resolves conflicts between browser defaults, user styles, and your CSS.
Get CSS bites daily.
Five a day, five minutes, offline. With quizzes so it sticks.
Open testing — you’ll join as an early tester.