CSS Cheat Sheet
Last updated
Selectors
How to target the elements you want to style.
| Selector | Matches |
|---|---|
* | All elements |
p | All <p> elements (by tag) |
.btn | Elements with class="btn" |
#main | The element with id="main" |
div p | All <p> inside a <div> (descendant) |
div > p | Direct children only |
a:hover | Links being hovered (pseudo-class) |
li:first-child | First <li> in its parent |
li:nth-child(2n) | Every even <li> |
input[type="text"] | Inputs with that attribute |
p::before | Generated content before <p> (pseudo-element) |
Box model
Every element is a box: content, padding, border, margin.
| Property | What it does |
|---|---|
width / height | Size of the content box |
padding | Space inside the border |
border | 1px solid #333 - width, style, color |
margin | Space outside the border |
box-sizing: border-box | Make width include padding + border |
margin: 0 auto | Center a block element horizontally |
overflow: hidden | Clip content that spills out |
Typography & color
| Property | Example |
|---|---|
color | color: #333 - text color |
background | background: #fff or an image/gradient |
font-family | font-family: system-ui, sans-serif |
font-size | font-size: 16px (or rem, em) |
font-weight | 400 (normal) … 700 (bold) |
line-height | 1.5 - spacing between lines |
text-align | left, center, right, justify |
text-decoration | underline, none |
Flexbox
One-dimensional layout - rows or columns. Set display: flex on the parent.
| Property (on container) | What it does |
|---|---|
display: flex | Make children flex items |
flex-direction | row (default) or column |
justify-content | Align along the main axis (center, space-between) |
align-items | Align along the cross axis (center, stretch) |
gap | Space between items, e.g. gap: 16px |
flex-wrap | wrap lets items flow onto new lines |
flex: 1 (on a child) | Item grows to fill available space |
Grid
Two-dimensional layout. Set display: grid on the parent.
| Property | What it does |
|---|---|
display: grid | Make children grid items |
grid-template-columns | 1fr 1fr 1fr or repeat(3, 1fr) |
grid-template-rows | Define row sizes |
gap | Space between rows and columns |
grid-column | 1 / 3 - span an item across columns |
auto-fit / minmax | repeat(auto-fit, minmax(200px, 1fr)) for responsive grids |
place-items: center | Center every item in its cell |
Positioning & display
| Property / value | What it does |
|---|---|
position: static | Default - in normal flow |
position: relative | Offset from its normal spot |
position: absolute | Positioned vs nearest positioned ancestor |
position: fixed | Pinned to the viewport |
position: sticky | Sticks when scrolled to a threshold |
top / right / bottom / left | Offsets for positioned elements |
z-index | Stacking order (higher = on top) |
display: none | Removes the element from layout |
display: inline-block | Flows inline but accepts width/height |
Transitions & transforms
| Property | Example |
|---|---|
transition | transition: all 0.2s ease |
transform: translate | translate(10px, 0) - move |
transform: scale | scale(1.1) - resize |
transform: rotate | rotate(45deg) |
opacity | 0 (invisible) … 1 (opaque) |
box-shadow | 0 2px 8px rgba(0,0,0,.15) |
border-radius | 8px - rounded corners |
Units & responsive design
| Unit / feature | Meaning |
|---|---|
px | Absolute pixels |
% | Relative to the parent |
rem | Relative to the root font size |
em | Relative to the current font size |
vw / vh | 1% of viewport width / height |
fr | Fraction of free space (grid) |
@media (max-width: 600px) { … } | Apply rules below a breakpoint |
Selectors, the box model, flexbox, grid, and the properties you always forget - on one page. This CSS cheat sheet is a quick reference for styling and laying out web pages, from targeting elements to centering them.
Everything here is standard CSS that works in modern browsers. Copy a rule, or try it live in the HTML playground where you can edit CSS with an instant preview.
CSS cheat sheet FAQ
Is this CSS cheat sheet free?
Yes. This CSS cheat sheet is free with no sign-up. Bookmark it and use it whenever you need to look up a selector, property, or layout pattern.
Should I use flexbox or grid?
Use flexbox for one-dimensional layouts - a row of buttons, a navbar, items in a single line or column. Use grid for two-dimensional layouts where you control both rows and columns at once, like a page layout or a card gallery. They work well together: a grid of cards where each card uses flexbox internally is common.
How do I center a div with CSS?
The simplest modern way is flexbox on the parent:
display: flex; justify-content: center; align-items: center; centers a child both horizontally and vertically. For just horizontal centering of a block element with a set width, margin: 0 auto still works.Can I practice CSS online?
Yes. Open the HTML playground to write HTML and CSS together with a live preview. When you want structure, Coddy's free interactive CSS course covers selectors, the box model, flexbox, and grid step by step.
Is this cheat sheet good for beginners?
Yes. It moves from selectors and the box model (the foundations) to flexbox, grid, and transitions, so you can start with the top sections and grow into modern layout.
Related resources
More cheat sheets
