Cheatsheets CSS

33 entries

CSS

CSS property reference for Flexbox, Grid, selectors, typography, and layout

33 commands

CommandDescriptionExample

display: flex;

Enable Flexbox layout on a container element

.nav { display: flex; }

flex-direction: row | column;

Set the main axis direction of the flex container

.col { flex-direction: column; }

justify-content: center | space-between | flex-start;

Align flex items along the main axis

.bar { justify-content: space-between; }

align-items: center | stretch | flex-start;

Align flex items along the cross axis

.card { align-items: center; }

flex-wrap: wrap | nowrap;

Control whether flex items wrap to a new line

.grid { flex-wrap: wrap; }

flex: 1;

Allow an item to grow and shrink equally, filling available space

.sidebar { flex: 1; }

gap: 1rem;

Set spacing between flex or grid items

.list { gap: 0.5rem 1rem; }

align-self: center;

Override the container's align-items for a single flex item

.logo { align-self: center; }

display: grid;

Enable CSS Grid layout on a container element

.page { display: grid; }

grid-template-columns: repeat(3, 1fr);

Create 3 equal-width columns using fractional units

.cards { grid-template-columns: repeat(3, 1fr); }

grid-template-rows: auto 1fr auto;

Define row sizes for a grid container

.layout { grid-template-rows: auto 1fr auto; }

grid-column: 1 / 3;

Make an item span from column line 1 to 3

.hero { grid-column: 1 / -1; }

grid-area: header;

Assign a grid item to a named grid area

.top { grid-area: header; }

place-items: center;

Shorthand to center all grid items on both axes

.full { place-items: center; }

* { }

Universal selector — targets every element

* { margin: 0; padding: 0; }

.class > .child { }

Direct child combinator — selects only direct children

.menu > li { list-style: none; }

a:hover { }

Pseudo-class — applies styles when the user hovers over an element

a:hover { color: #0066cc; }

::before { content: ''; }

Pseudo-element — inserts generated content before an element

.icon::before { content: '★'; }

[data-active="true"] { }

Attribute selector — targets elements with a specific attribute value

[data-active="true"] { font-weight: bold; }

:nth-child(odd) { }

Pseudo-class targeting odd-numbered children (useful for striped tables)

tr:nth-child(odd) { background: #f5f5f5; }

box-sizing: border-box;

Include padding and border in an element's total width and height

*, *::before { box-sizing: border-box; }

margin: 1rem auto;

Set vertical margin to 1rem and center horizontally with auto

.container { margin: 1rem auto; }

padding: 0.5rem 1rem;

Set vertical padding to 0.5rem and horizontal to 1rem

.btn { padding: 0.5rem 1rem; }

border: 1px solid #ccc;

Set a 1px solid border with a light gray color

.input { border: 1px solid #ccc; }

overflow: hidden | scroll | auto;

Control how content that overflows the element is handled

.card { overflow: hidden; }

font-size: clamp(1rem, 2.5vw, 2rem);

Responsive font size that scales between a minimum and maximum

h1 { font-size: clamp(1rem, 4vw, 3rem); }

line-height: 1.5;

Set line height as a unitless multiplier of the font size

body { line-height: 1.6; }

text-overflow: ellipsis;

Show an ellipsis when text overflows (requires overflow:hidden and white-space:nowrap)

.truncate { text-overflow: ellipsis; }

letter-spacing: 0.05em;

Increase spacing between characters

.caps { letter-spacing: 0.1em; }

position: absolute; top: 0; left: 0;

Position element absolutely relative to its nearest positioned ancestor

.overlay { position: absolute; inset: 0; }

position: sticky; top: 0;

Stick an element to the top of its scroll container once reached

.header { position: sticky; top: 0; }

z-index: 10;

Set the stacking order of a positioned element

.modal { z-index: 100; }

inset: 0;

Shorthand for top, right, bottom, left all set to 0

.backdrop { position: fixed; inset: 0; }