Use this CSS cheatsheet for fast reminders on selectors, flexbox, grid, spacing, radius, shadows, gradients, media queries and responsive styling patterns you can copy into real interfaces.
.cardTargets elements with class="card".
#mainTargets one element with id="main".
.nav > aDirect child selector.
input[type="email"]Targets elements by attribute.
display: flex;display: grid;gap: 1rem;width: min(100%, 72rem);@media (max-width: 768px) { ... }font-size: clamp(1rem, 2vw, 2rem);aspect-ratio: 16 / 9;max-width: 100%;Compare the syntax with a small rendered example so the reference is easier to scan and remember.
Use flexbox for one-dimensional layouts such as navbars, toolbars and button rows.
.nav {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: 16px;
}<div class="nav">
<span>Logo</span>
<span>Docs</span>
<strong>Start</strong>
</div>Use grid when rows and columns both matter.
.cards {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-rows: repeat(2, auto);
gap: 16px;
}<div class="cards">
<article>One</article>
<article>Two</article>
<article>Three</article>
</div>Padding creates breathing room; border-radius softens the container.
.panel {
padding: 16px;
border-radius: 18px;
}<div class="panel">Content</div>Layer subtle shadows with a controlled gradient for depth.
.card {
background: linear-gradient(135deg, #2563eb, #14b8a6);
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
}<div class="card">
<strong>Gradient card</strong>
<p>Shadow, radius and layered color.</p>
</div>Shadow, radius and layered color.
Change layout rules at practical breakpoints.
@media (max-width: 640px) {
.cards {
grid-template-columns: 1fr;
gap: 16px;
}
}<div class="cards">
<article>Desktop column</article>
<article>Mobile stack</article>
</div>Short notes to help you decide when to use each pattern, avoid common mistakes and copy the examples with confidence.
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 1rem;
}a:focus-visible,
button:focus-visible {
outline: 3px solid #2563eb;
outline-offset: 3px;
}CSS Cheatsheet includes quick reference sections, practical examples, common mistakes, tips and links to related DevKitYard tools.
Yes. This cheatsheet includes visual examples with copyable code and lightweight controls where interaction helps explain the pattern.
Use it when you need to recall syntax, compare common patterns or avoid mistakes without opening a long tutorial.
Use related DevKitYard tools such as CSS Gradient Generator, CSS Beautifier, Flexbox Generator when you need to format, validate, generate or inspect real output.