CSS Cheat Sheet

A comprehensive guide to CSS properties, selectors, and Flexbox.

Jump To Section
Selectors & Origin Box Model & Sizing Layout (Flexbox) Layout (Grid) Positioning Effects & Filters
Pro Tip

Use the Ctrl + F shortcut to quickly find specific commands in this cheat sheet.

Selectors & Origin

Concept / Tag Code Snippet Description
Global Selector 
* { box-sizing: border-box; }
 Applies to all elements.
Pseudo Before 
::before { content: ""; }
 Insert content before element.
Attribute 
[type="text"] { color: red; }
 Selection by attribute.

Box Model & Sizing

Concept / Tag Code Snippet Description
Display Block 
display: block | inline-block;
 Control flow behavior.
Object Fit 
object-fit: cover | contain;
 Control image/video fitting.

Layout (Flexbox)

Concept / Tag Code Snippet Description
Gap 
gap: 10px 20px;
 Spacing between flex items.
Order 
order: 1;
 Change visual order.

Layout (Grid)

Concept / Tag Code Snippet Description
Template Areas 
grid-template-areas: "h h" "s m";
 Named visual layout.
Fraction Unit 
grid-template-columns: 1fr 2fr;
 Responsive columns.

Positioning

Concept / Tag Code Snippet Description
Sticky 
position: sticky; top: 0;
 Persist on scroll.
Fixed 
position: fixed; bottom: 0;
 Viewport reference.

Effects & Filters

Concept / Tag Code Snippet Description
Glassmorphism 
backdrop-filter: blur(10px);
 Blur effect on backdrop.
Box Shadow 
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
 Depth element.

Frequently Asked Questions

The CSS Box Model consists of margins, borders, padding, and the actual content. It determines how elements are sized and spaced relative to each other.

Flexbox is designed for one-dimensional layouts (rows OR columns), while CSS Grid is for two-dimensional layouts (rows AND columns).

Explore More Cheat Sheets

HTML Guide
CSS Guide
JavaScript Guide