📖 Guide

CSS — Complete Reference

Comprehensive CSS cheat sheet covering selectors, box model, positioning, typography, animations, media queries, custom properties, and more.

170 commands across 12 categories

Selectors Box Model Display & Positioning Typography Colors & Backgrounds Borders & Shadows Transforms & Transitions Animations Media Queries Variables & Custom Properties Pseudo-classes Pseudo-elements

Selectors

Command	Description
`*`	Universal selector — matches all elements
`element` e.g. p { color: red; }	Type selector — matches all elements of that type
`.class` e.g. .btn { padding: 8px; }	Class selector
`#id` e.g. #header { height: 60px; }	ID selector
`A B` e.g. nav a { color: blue; }	Descendant combinator — B anywhere inside A
`A > B` e.g. ul > li { list-style: none; }	Child combinator — direct children only
`A + B` e.g. h1 + p { margin-top: 0; }	Adjacent sibling — B immediately after A
`A ~ B`	General sibling — all B siblings after A
`[attr]` e.g. [required] { border-color: red; }	Attribute selector — has attribute
`[attr="value"]`	Attribute equals value
`[attr^="val"]`	Attribute starts with value
`[attr$="val"]`	Attribute ends with value
`[attr*="val"]`	Attribute contains value
`:is(A, B)` e.g. :is(h1, h2, h3) { font-weight: bold; }	Matches any selector in the list (forgiving)
`:where(A, B)`	Like :is() but with zero specificity
`:has(selector)` e.g. div:has(> img) { padding: 0; }	Parent selector — select element that contains match
`:not(selector)` e.g. p:not(.intro) { color: gray; }	Negation — exclude matching elements

Box Model

Command	Description
`box-sizing: border-box`	Include padding and border in element's total width/height
`box-sizing: content-box`	Default — width/height only apply to content
`width / height` e.g. width: 100%; height: 200px;	Set element dimensions
`min-width / max-width`	Set minimum/maximum width constraints
`min-height / max-height`	Set minimum/maximum height constraints
`margin` e.g. margin: 10px 20px; /* top/bottom left/right */	Space outside the border
`margin: 0 auto`	Center a block element horizontally
`padding` e.g. padding: 16px;	Space inside the border
`overflow: hidden \| scroll \| auto`	Control content overflow behavior
`overflow-x / overflow-y`	Control overflow per axis
`aspect-ratio: 16 / 9`	Set preferred aspect ratio

Display & Positioning

Command	Description
`display: block`	Block-level element (full width, new line)
`display: inline`	Inline element (no width/height, no new line)
`display: inline-block`	Inline with block properties (width/height work)
`display: flex`	Flex container for flexible layouts
`display: grid`	Grid container for two-dimensional layouts
`display: none`	Remove element from layout entirely
`display: contents`	Element's children behave as if parent doesn't exist
`position: relative`	Position relative to normal flow
`position: absolute`	Position relative to nearest positioned ancestor
`position: fixed`	Position relative to viewport
`position: sticky` e.g. position: sticky; top: 0;	Sticky — toggles between relative and fixed
`z-index: 10`	Stack order (higher = on top, only works on positioned elements)
`flex-direction: row \| column`	Main axis direction in flex container
`justify-content` e.g. justify-content: center \| space-between \| space-around	Align items along main axis
`align-items` e.g. align-items: center \| flex-start \| stretch	Align items along cross axis
`gap: 16px`	Gap between flex/grid items
`flex: 1`	Shorthand for flex-grow: 1, flex-shrink: 1, flex-basis: 0%
`grid-template-columns` e.g. grid-template-columns: repeat(3, 1fr);	Define grid columns
`grid-template-rows`	Define grid rows
`grid-column: 1 / 3`	Span grid columns
`place-items: center`	Shorthand for align-items + justify-items
`float: left \| right`	Float element to left or right (legacy)

Typography

Command	Description
`font-family: sans-serif` e.g. font-family: "Inter", system-ui, sans-serif;	Set font family
`font-size: 16px`	Set font size (px, em, rem, clamp())
`font-weight: bold \| 700`	Set font weight (100-900)
`font-style: italic`	Set font style
`line-height: 1.5`	Set line height (unitless recommended)
`letter-spacing: 0.05em`	Adjust spacing between letters
`word-spacing: 4px`	Adjust spacing between words
`text-align: center \| left \| right \| justify`	Horizontal text alignment
`text-decoration: underline \| none \| line-through`	Text decoration line
`text-transform: uppercase \| lowercase \| capitalize`	Transform text case
`text-indent: 2em`	Indent first line of text
`white-space: nowrap`	Prevent text from wrapping
`word-break: break-all`	Break long words at any character
`overflow-wrap: break-word`	Break long words that overflow
`text-overflow: ellipsis` e.g. overflow: hidden; white-space: nowrap; text-overflow: ellipsis;	Show ellipsis for overflowing text
`font: italic bold 16px/1.5 sans-serif`	Font shorthand
`font-variant-numeric: tabular-nums`	Use tabular (monospaced) numbers
`text-wrap: balance`	Balance line lengths in headings (modern)

Colors & Backgrounds

Command	Description
`color: #ff0000`	Set text color (hex)
`color: rgb(255, 0, 0)`	Set text color (RGB)
`color: hsl(0, 100%, 50%)`	Set text color (HSL)
`color: oklch(0.7 0.15 30)`	Set text color (OKLCH — perceptually uniform)
`opacity: 0.5`	Set element opacity (0 = transparent, 1 = opaque)
`background-color: #f0f0f0`	Set background color
`background-image: url("img.jpg")`	Set background image
`background: linear-gradient(to right, #f00, #00f)`	Linear gradient background
`background: radial-gradient(circle, #f00, #00f)`	Radial gradient background
`background-size: cover \| contain`	Scale background image
`background-position: center`	Position background image
`background-repeat: no-repeat`	Prevent background from repeating
`background-attachment: fixed`	Fix background relative to viewport
`mix-blend-mode: multiply`	Blending mode for element
`backdrop-filter: blur(10px)`	Apply filter to area behind element
`accent-color: #0066ff`	Set accent color for form controls

Borders & Shadows

Command	Description
`border: 1px solid #ccc`	Border shorthand (width style color)
`border-radius: 8px`	Rounded corners
`border-radius: 50%`	Make element circular
`border-width: 1px 2px 3px 4px`	Individual border widths (top right bottom left)
`border-style: solid \| dashed \| dotted \| none`	Border line style
`border-collapse: collapse`	Collapse table borders into single borders
`outline: 2px solid blue`	Outline (doesn't affect layout)
`outline-offset: 4px`	Space between element and outline
`box-shadow: 0 2px 4px rgba(0,0,0,0.1)`	Box shadow (x y blur spread color)
`box-shadow: inset 0 2px 4px rgba(0,0,0,0.1)`	Inner box shadow
`text-shadow: 1px 1px 2px #000`	Text shadow (x y blur color)
`filter: drop-shadow(2px 2px 4px #000)`	Drop shadow (follows element shape)

Transforms & Transitions

Command	Description
`transform: translateX(50px)`	Move element horizontally
`transform: translateY(-20px)`	Move element vertically
`transform: translate(x, y)`	Move element in both axes
`transform: scale(1.5)`	Scale element uniformly
`transform: rotate(45deg)`	Rotate element
`transform: skew(10deg, 5deg)`	Skew element
`transform-origin: center`	Set the pivot point for transforms
`transition: all 0.3s ease`	Transition shorthand (property duration timing)
`transition-property: opacity, transform`	Specify which properties to transition
`transition-duration: 300ms`	Duration of the transition
`transition-timing-function: ease-in-out`	Timing curve for transition
`transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)`	Custom cubic-bezier timing
`transition-delay: 100ms`	Delay before transition starts
`will-change: transform`	Hint to browser for optimization

Animations

Command	Description
`@keyframes name { from { } to { } }`	Define animation keyframes (from/to)
`@keyframes name { 0% { } 50% { } 100% { } }`	Define animation with percentage steps
`animation: name 1s ease infinite`	Animation shorthand
`animation-name: slidein`	Name of the @keyframes to use
`animation-duration: 500ms`	How long the animation takes
`animation-timing-function: linear`	Timing function for animation
`animation-delay: 200ms`	Delay before animation starts
`animation-iteration-count: infinite \| 3`	How many times to repeat
`animation-direction: alternate`	Play forward then backward
`animation-fill-mode: forwards`	Keep final state after animation ends
`animation-play-state: paused`	Pause the animation

Media Queries

Command	Description
`@media (max-width: 768px) { }`	Styles for screens up to 768px wide
`@media (min-width: 768px) { }`	Styles for screens 768px and wider
`@media (min-width: 768px) and (max-width: 1024px) { }`	Styles for a specific range
`@media (prefers-color-scheme: dark) { }`	Styles for dark mode preference
`@media (prefers-reduced-motion: reduce) { }`	Styles for reduced motion preference
`@media (hover: hover) { }`	Styles for devices that support hover
`@media (orientation: portrait) { }`	Styles for portrait orientation
`@media print { }`	Styles for print
`@media (width >= 768px) { }`	Range syntax (modern, Level 4)
`@container (min-width: 400px) { }`	Container query — style based on parent size
`container-type: inline-size`	Enable container queries on an element

Variables & Custom Properties

Command	Description
`:root { --color-primary: #0066ff; }`	Define a global CSS variable
`color: var(--color-primary)`	Use a CSS variable
`var(--color, #000)`	Use a CSS variable with fallback value
`.dark { --bg: #1a1a1a; }`	Scope variables to a selector
`calc(100% - 32px)` e.g. width: calc(100vw - 2rem);	Perform calculations
`min(50vw, 600px)`	Use the smallest value
`max(300px, 50%)`	Use the largest value
`clamp(1rem, 2.5vw, 2rem)` e.g. font-size: clamp(14px, 2vw, 22px);	Clamp value between min and max
`@property --my-color { syntax: "<color>"; initial-value: red; inherits: false; }`	Register a typed custom property (enables transitions)
`env(safe-area-inset-top)`	Use environment variable (e.g., notch safe areas)

Pseudo-classes

Command	Description
`:hover`	When mouse is over the element
`:focus`	When element has focus
`:focus-visible`	When element has focus via keyboard (not click)
`:focus-within`	When element or any descendant has focus
`:active`	When element is being activated (clicked)
`:visited`	A link that has been visited
`:first-child`	First child of its parent
`:last-child`	Last child of its parent
`:nth-child(n)` e.g. :nth-child(2n) /* even items */	Nth child (1-indexed)
`:nth-of-type(n)`	Nth element of its type
`:only-child`	Element with no siblings
`:empty`	Element with no children
`:checked`	Checked checkbox/radio
`:disabled`	Disabled form element
`:required`	Required form element
`:valid / :invalid`	Form validation state
`:placeholder-shown`	Input currently showing placeholder text

Pseudo-elements

Command	Description
`::before` e.g. p::before { content: "→ "; }	Insert content before element's content
`::after`	Insert content after element's content
`::first-line`	Style the first line of text
`::first-letter`	Style the first letter (drop cap effect)
`::selection`	Style text selected by user
`::placeholder`	Style input placeholder text
`::marker`	Style list item markers (bullets, numbers)
`::backdrop`	Style the backdrop behind dialogs/fullscreen
`content: ""`	Required for ::before/::after to render
`content: attr(data-label)`	Use attribute value as generated content
`content: counter(section)`	Use CSS counter as content