Search
Type in the search box to filter snippets.
DEVELOPER TOOLS · FREE ONLINE TOOL
CSS Cheat Sheet
Everyday CSS selectors, flexbox, grid, and layout patterns with copy-ready snippetsFree CSS cheat sheet: 80+ copy-ready snippets for selectors, flexbox, grid, positioning, typography, and responsive design. Searchable and printable.
// CSS CHEAT SHEET · GET STARTED
Use CSS Cheat Sheet
Everyday CSS selectors, flexbox, grid, and layout patterns with copy-ready snippets
Advertisement
74 of 74 entries shown. Click Copy on any snippet.
Selectors
Element selector · Targets every <p> element
p { color: red; }Class selector · Targets elements with class="card"
.card { padding: 16px; }ID selector · Targets the single element with id="header"
#header { height: 64px; }Universal selector · Targets all elements
* { box-sizing: border-box; }Descendant · Any <p> inside <article>
article p { margin: 0; }Child · Direct children only
ul > li { list-style: none; }Adjacent sibling · The <p> directly after an <h2>
h2 + p { margin-top: 0; }General sibling · Every <p> after an <h2> at the same level
h2 ~ p { color: #555; }Attribute · Links that open in a new tab
a[target="_blank"] { color: blue; }:hover · Mouse is over the element
button:hover { background: #333; }:focus · Element has keyboard focus
input:focus { outline: 2px solid blue; }:nth-child() · Every even list item
li:nth-child(2n) { background: #f5f5f5; }:not() · Paragraphs without the intro class
p:not(.intro) { opacity: 0.9; }Box Model
Width and height · Content box dimensions
.box { width: 300px; height: 200px; }Max width · Classic centered container
.wrap { max-width: 1200px; margin: 0 auto; }Padding shorthand · Vertical then horizontal padding
.box { padding: 12px 16px; }Margin shorthand · Top, right, bottom, left
.box { margin: 8px 12px 8px 12px; }Border · Width, style, color
.box { border: 1px solid #ddd; }Border radius · Rounded corners
.btn { border-radius: 8px; }Box sizing · Padding and border included in width
* { box-sizing: border-box; }Box shadow · x-offset, y-offset, blur, color
.card { box-shadow: 0 2px 8px rgba(0,0,0,0.1); }Overflow · Scrollbars appear only when needed
.scroll { overflow: auto; }Flexbox
Flex container · Children become flex items in a row
.row { display: flex; }Column direction · Stack items vertically
.col { display: flex; flex-direction: column; }Center both axes · Perfect centering trick
.center { display: flex; align-items: center; justify-content: center; }Space between · First and last items pinned to edges
.spread { display: flex; justify-content: space-between; }Wrap · Items flow onto new lines
.grid { display: flex; flex-wrap: wrap; }Gap · Spacing between items, no margin hacks
.row { display: flex; gap: 16px; }Grow · Item takes all remaining space
.main { flex: 1; }Align self · Override alignment for one item
.top { align-self: flex-start; }Order · Move an item before the others visually
.first { order: -1; }Grid
Grid container · Children become grid items
.grid { display: grid; }Columns · Three equal columns
.grid { display: grid; grid-template-columns: 1fr 1fr 1fr; }Repeat helper · Same as above, shorter
.grid { grid-template-columns: repeat(3, 1fr); }Auto-fit responsive · Columns that wrap responsively
.grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }Gap · Gutters between rows and columns
.grid { display: grid; gap: 20px; }Span columns · Item covers two columns
.wide { grid-column: span 2; }Named areas · Visual layout map
.layout { grid-template-areas: "head head" "nav main"; }Place item in area · Assign an item to a named area
.header { grid-area: head; }Positioning
Relative · Nudged from its normal spot
.tip { position: relative; top: 4px; }Absolute · Positioned against nearest positioned ancestor
.badge { position: absolute; top: 8px; right: 8px; }Fixed · Stuck to the viewport
.nav { position: fixed; top: 0; left: 0; right: 0; }Sticky · Sticks once scrolled to the offset
.toc { position: sticky; top: 16px; }Z-index · Higher values paint on top
.modal { position: fixed; z-index: 100; }Center absolute · Dead-center an overlay
.pop { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }Typography
Font stack · System fonts, no download needed
body { font-family: system-ui, -apple-system, sans-serif; }Font size · 2x the root font size
h1 { font-size: 2rem; }Fluid type · Scales between min and max with viewport
h1 { font-size: clamp(1.5rem, 4vw, 3rem); }Font weight · Bold text
strong { font-weight: 700; }Line height · Unitless values scale with font size
p { line-height: 1.6; }Letter spacing · Tracking for small caps labels
.kicker { letter-spacing: 0.1em; }Text align · Center inline content
.hero { text-align: center; }Truncate · Single line with ...
.clip { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }Line clamp · Clamp to 3 lines with ellipsis
.excerpt { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }Colors and Backgrounds
Hex color · Six-digit hex
.brand { color: #2563eb; }RGB with alpha · Semi-transparent black
.overlay { background: rgba(0, 0, 0, 0.5); }HSL · Hue, saturation, lightness
.accent { color: hsl(220, 90%, 55%); }Linear gradient · Diagonal two-color blend
.hero { background: linear-gradient(135deg, #667eea, #764ba2); }Background image · Position, size, repeat in one line
.banner { background: url("/img.jpg") center/cover no-repeat; }Opacity · Whole element including children
.faded { opacity: 0.6; }Transitions and Animation
Transition · Animate property changes
.btn { transition: background 0.2s ease; }Multiple transitions · Comma-separated list
.card { transition: transform 0.3s, box-shadow 0.3s; }Keyframes · Define an animation
@keyframes spin { to { transform: rotate(360deg); } }Run animation · Name, duration, timing, repeat
.loader { animation: spin 1s linear infinite; }Easing · Material-style ease curve
.slide { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }Transforms
Translate · Move right 10px, down 20px
.move { transform: translate(10px, 20px); }Scale · Grow slightly on hover
.zoom:hover { transform: scale(1.05); }Rotate · Slight counter-clockwise tilt
.tilt { transform: rotate(-3deg); }Transform origin · Pivot point for rotations
.door { transform-origin: left center; }Media Queries
Mobile breakpoint · Styles for small screens
@media (max-width: 640px) { .grid { grid-template-columns: 1fr; } }Tablet and up · Styles for larger screens
@media (min-width: 768px) { .sidebar { display: block; } }Dark mode · Respect OS dark mode
@media (prefers-color-scheme: dark) { body { background: #111; color: #eee; } }Reduced motion · Accessibility for motion sensitivity
@media (prefers-reduced-motion: reduce) { * { animation: none; } }Print · Hide chrome when printing
@media print { .nav, .ads { display: none; } }Advertisement
How to use the CSS Cheat Sheet
Copy
Click Copy on any snippet to grab the code.
Print the page for a desk reference.
// CSS CHEAT SHEET · ABOUT THIS TOOL
About the CSS Cheat Sheet
A field guide to the CSS you actually write day to day: selectors, the box model, flexbox, grid, positioning, typography, colors, transitions, transforms, and responsive media queries. Every entry is a tested snippet with a one-line explanation.
Use the search box to jump straight to what you need, copy snippets with one click, and print the page for an offline desk reference.
CSS Cheat Sheet FAQs
Use flexbox: display: flex with align-items: center and justify-content: center on the parent. For absolutely positioned overlays, top: 50%, left: 50% with transform: translate(-50%, -50%) also works.
tools-guide
SSL Certificate Checker: Verify Expiry and Validity Free
Free SSL certificate checker: verify any website's certificate issuer, expiry date, days remaining, covered domains and fingerprint. Avoid expiry outages.
Read article →
tools-guide
DNS Lookup: Free Online DNS Record Checker for Any Domain
Free online DNS lookup tool. Check A, AAAA, MX, TXT, CNAME, NS and SOA records for any domain instantly. Fast, private, accurate, no sign-up required.
Read article →