Resources › CSS Cheat Sheet
CSS Cheat Sheet
Interactive code blocks and syntax definitions for essential CSS features.
Box Model
Controls sizing, padding, margins, and borders of block containers.
box-sizing: border-box;
Includes padding/border in element dimensions.
margin: auto;
Centers a block element horizontally.
padding: 12px 24px;
Vertical (12px) and Horizontal (24px) spacing.
outline: 2px solid blue;
Draws a line outside the border edge.
Flexbox Layout
Aligns items along a single horizontal or vertical axis.
display: flex;
Initializes a flexbox container.
justify-content: space-between;
Distributes items evenly along main axis.
align-items: center;
Aligns items along cross axis.
flex-wrap: wrap;
Allows items to wrap onto multiple lines.
Grid Layout
Powerful two-dimensional grid system for complex structures.
display: grid;
Initializes a grid container.
grid-template-columns: repeat(3, 1fr);
Creates three equal-width columns.
gap: 16px;
Defines spacing between rows and columns.
grid-column: span 2;
Makes a grid item span across 2 columns.
Positioning
Determines the layout positioning coordinates of elements.
position: relative;
Offsets element relative to normal document position.
position: absolute;
Positions element relative to nearest positioned ancestor.
position: fixed; top: 0;
Fixes element position relative to viewport.
position: sticky; top: 0;
Becomes fixed once scroll boundary is crossed.
Box Shadows
Adds shadow depth effects around element border frames.
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
Standard soft offset drop-shadow.
box-shadow: inset 0 2px 4px rgba(0,0,0,0.06);
Crisp inset shadow for inner borders.
box-shadow: 0 8px 30px rgba(0,0,0,0.12);
Premium ambient blur shadow effect.
box-shadow: 0 2px 0 0 rgba(0,0,0,0.05);
Directional bottom-only shadow border.
Transitions & Transforms
Animates modifications to element geometries and properties.
transition: transform 0.2s ease-in-out;
Smoothly interpolates transformation changes.
transform: translate(-50%, -50%);
Shifts element along X and Y axes.
transform: scale(1.05);
Enlarges element dimensions by 5%.
transform: rotate(45deg);
Rotates element clockwise by 45 degrees.
Responsive Breakpoints
Media query parameters for responsive screen scaling.
@media (max-width: 640px) { ... }
Styles target small mobile screens.
@media (min-width: 768px) { ... }
Styles target medium tablet viewports.
@media (min-width: 1024px) { ... }
Styles target desktop screens.
@media (min-width: 1280px) { ... }
Styles target wide monitor displays.