Learning overview
- Estimated time
- 4 minutes
- Difficulty
- Beginner
- Prerequisites
- No prior experience required
- Learning outcome
- Explain css using a clear mental model · Apply css in practical CSS work
- Last updated
- July 18, 2026
Selectors and cascade
Prefer reusable classes, inspect the winning declaration, and organize precedence intentionally instead of escalating selector weight.
@layer reset, base, components, utilities;
:where(ul, ol) { margin: 0; padding: 0; }
.card { color: var(--color-text); }
.card:has(img) { padding-block-start: 0; }
.button:focus-visible { outline: 3px solid orange; }Box model, sizing, and units
Use border-box, allow content to determine height, and combine min, max, clamp, and intrinsic keywords for bounded flexibility.
*, *::before, *::after { box-sizing: border-box; }
.wrapper { width: min(100% - 2rem, 70rem); margin-inline: auto; }
.title { font-size: clamp(2rem, 1.4rem + 3vw, 4rem); }
.media { max-inline-size: 100%; block-size: auto; }Flexbox and Grid
Use Flexbox for a row or column of items and Grid for explicit track relationships. Gap works in both.
.toolbar {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
gap: 1.5rem;
}Responsive and container queries
Write a useful base layout first. Add complexity when the content has enough space, and let reusable components respond to their container.
.card-list { container-type: inline-size; }
@container (min-width: 36rem) {
.card { grid-template-columns: 10rem 1fr; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { scroll-behavior: auto; transition-duration: 0.01ms; }
}Debugging checklist
Use computed styles and layout overlays before editing. Identify whether the failure comes from selector matching, cascade priority, containing block, intrinsic size, formatting context, or overflow.
- Confirm the rule matches the intended element
- Inspect which declaration wins and why
- Check box dimensions and overflow
- Enable Flexbox or Grid overlays
- Test long content, zoom, keyboard focus, and narrow containers
- Remove the smallest rule that reproduces the problem
Frequently asked questions
Should I copy every CSS pattern from this cheatsheet?
No. Start from the content and constraint, then choose the smallest pattern that describes the required behavior.
What is the fastest way to debug CSS?
Inspect the element, identify the winning declaration and dimensions, then isolate whether the problem is cascade, sizing, layout context, or overflow.
Topic graph
A taxonomy-generated path through this subject.
Related courses
Related learning
Recommended automatically from shared technologies, topics, intent, and difficulty.
Related Guides
Related Tutorials
Related Glossary
Related Cheatsheets
Related Projects
Related Interview Questions
Related reading
Hand-picked companion pages that deepen this topic.
Your next steps