QuickRef.ME Search for cheatsheet ⌘ K Stars 8.

5k Follow Me

CSS 3 cheatsheet
This is a quick reference cheat sheet for CSS goodness, listing selector syntax, properties, units
and other useful bits of information.

# Getting Started
- Introduction Add class !important

CSS is rich in capabilities and is more than simply <div class="classname"></div> .post-title {
laying out pages. <div class="class1 ... classn"></div> color: blue !important;
}
External stylesheet

<link Support multiple classes on one element. Overrides all previous styling rules.
href="./path/to/stylesheet/style.css"
rel="stylesheet" type="text/css">
Selector Text color

Internal stylesheet
h1 { } color: #2a2aff;
<style> #job-title { } color: green;
div.hero { } color: rgb(34, 12, 64, 0.6);
body {
div > p { } color: hsla(30 100% 50% / 0.6);
background-color: linen;
}
</style> See: Selectors See: Colors

Inline styles
Background Font
<h2 style="text-align: center;">Centered
text</h2> background-color: blue; .page-title {
background-image: url("nyan-cat.gif"); font-weight: bold;
<p style="color: blue; font-size: background-image: url("../image.png"); font-size: 30px;
18px;">Blue, 18-point text</p> font-family: "Courier New";
}

See: Backgrounds See: Fonts

Position Animation Comment

.box {
position: relative; animation: 300ms linear 0s infinite; /* This is a single line comment */
top: 20px;
left: 20px; animation: bounce 300ms linear infinite; /* This is a
} multi-line comment */

See also: Position See: Animation

Flex layout Grid layout Variable & Counter

div { #container { counter-set: subsection;

display: flex; display: grid; counter-increment: subsection;
justify-content: center; grid: repeat(2, 60px) / auto-flow 80px; counter-reset: subsection 0;
} }
div { :root {
display: flex; #container > div { --bg-color: brown;
justify-content: flex-start; background-color: #8ca0ff; }
} width: 50px; element {
height: 50px; background-color: var(--bg-color);
} }

See: Flexbox | Flex Tricks See: Grid Layout See: Dynamic content

# CSS Selectors
- Examples Basic Combinators
 Groups Selector * All elements div.classname Div with certain classname

h1, h2 { div All div tags div#idname Div with certain ID

color: red;
} .classname All elements with class div p Paragraphs inside divs

Chaining Selector #idname Element with ID All p tags

div > p
one level deep in div
h3.section-heading { div,p All divs and paragraphs
color: blue; div + p P tags immediately after div
} #idname * All elements inside #idname
div ~ p P tags preceded by div
Attribute Selector
See also: Type / Class / ID / Universal selectors See also: Adjacent / Sibling / Child selectors
div[attribute="SomeValue"] {
background-color: red;
} Attribute selectors User action pseudo classes

a[target] With a target attribute a:link Link in normal state

First Child Selector
a[target="_blank"] Open in new tab a:active Link in clicked state
p:first-child {
font-weight: bold; a[href^="/index"] Starts with /index a:hover Link with mouse over it
}
[class|="chair"] Starts with chair a:visited Visited link
No Children Selector
[class*="chair"] containing chair
.box:empty {
background: lime; [title~="chair"] Contains the word chair
height: 80px;
width: 80px; a[href$=".doc"] Ends with .doc
}
[type="button"] Specified type

See also: Attribute selectors

Pseudo classes Input pseudo classes Structural pseudo classes

p::after Add content after p input:checked Checked inputs p:first-child First child

p::before Add content before p input:disabled Disabled inputs p:last-child Last child

p::first-letter First letter in p input:enabled Enabled inputs p:first-of-type First of some type

p::first-line First line in p input:focus Input has focus p:last-of-type Last of some type

::selection Selected by user input:in-range Value in range Second child of its

p:nth-child(2)
parent
::placeholder Placeholder attribute input:out-of-range Input value out of range
Nth-child (an + b)
p:nth-child(3n42)
:root Documents root element input:valid Input with valid value formula

:target Highlight active anchor input:invalid Input with invalid value Second child from
p:nth-last-child(2)
behind
div:empty Element with no children input:optional No required attribute
p:nth-of-type(2) Second p of its parent
p:lang(en) P with en language attribute Input with required
input:required p:nth-last-of-type(2) ...from behind
attribute
:not(span) Element that's not a span
input:read-only With readonly attribute p:only-of-type Unique of its parent

input:read-write No readonly attribute p:only-child Only child of its parent

input:indeterminate With indeterminate state

# CSS Fonts
Properties Shorthand

font-family: <font> font: italic 400 14px / 1.5 sans-serif

font-size: <size> style weight size (required) line-height family (required)

letter-spacing: <size>

line-height: <number> Example Case

font-weight: <number> / bold / normal font-family: Arial, sans-serif;

font-size: 12pt; /* Hello */
font-style: italic / normal letter-spacing: 0.02em; text-transform: capitalize;

text-decoration: underline / none /* HELLO */

 @font-face
text-transform: uppercase;
left / right
text-align:
center / justify @font-face { /* hello */
font-family: 'Glegoo'; text-transform: lowercase;
capitalize / uppercase /
text-transform: src: url('../Glegoo.woff');
lowercase
}

See also: Font

# CSS Colors
Named color Hexadecimal color rgb() Colors

color: red; color: #090; color: rgb(34, 12, 64, 0.6);

color: orange; color: #009900; color: rgba(34, 12, 64, 0.6);
color: tan; color: #090a; color: rgb(34 12 64 / 0.6);
color: rebeccapurple; color: #009900aa; color: rgba(34 12 64 / 0.3);
color: rgb(34.0 12 64 / 60%);
color: rgba(34.6 12 64 / 30%);

HSL Colors Other

color: hsl(30, 100%, 50%, 0.6); color: inherit;

color: hsla(30, 100%, 50%, 0.6); color: initial;
color: hsl(30 100% 50% / 0.6); color: unset;
color: hsla(30 100% 50% / 0.6); color: transparent;
color: hsl(30.0 100% 50% / 60%);
color: hsla(30.2 100% 50% / 60%); color: currentcolor; /* keyword */

# CSS Backgrounds
Properties Shorthand

background: (Shorthand) background: #ff0 url(a.jpg) left top / 100px auto no-repeat fixed;

background-color: See: Colors background: #abc url(b.png) center center / cover repeat-x local;

background-image: url(...) color image posX posY size repeat attach..

left/center/right
background-position:
top/center/bottom

background-size: cover X Y Examples

border-box background: url(img_man.jpg) no-repeat center;

background-clip: padding-box
content-box background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;

no-repeat background: rgb(2,0,36);

background-repeat: repeat-x background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(13,232,230,1) 35%,
repeat-y rgba(0,212,255,1) 100%);

background-attachment: scroll/fixed/local

# CSS The Box Model

Maximums/Minimums Margin / Padding Box-sizing

.column { .block-one { .container {

max-width: 200px; margin: 20px; box-sizing: border-box;
width: 500px; padding: 10px; }
} }

See also: max-width / min-width / max-height /

min-height See also: Margin / Padding See also: Box-sizing

Visibility Auto keyword Overflow

.invisible-elements { div { .small-block {

visibility: hidden; margin: auto; overflow: scroll;
} } }

See also: Visibility See also: Margin See also: Overflow

# CSS Animation
Shorthand

animation: bounce 300ms linear 100ms infinite alternate-reverse both reverse

name duration timing-function delay count direction fill-mode play-state

Properties Example

animation: (shorthand) /* @keyframes duration | timing-function | delay |

iteration-count | direction | fill-mode | play-state | name */
animation-name: <name> animation: 3s ease-in 1s 2 reverse both paused slidein;

animation-duration: <time>ms
/* @keyframes duration | timing-function | delay | name */
animation: 3s linear 1s slidein;
ease / linear / ease-in / ease-
animation-timing-function:
out / ease-in-out
/* @keyframes duration | name */
animation-delay: <time>ms animation: 3s slidein;

animation-iteration-count: infinite / <number> animation: 4s linear 0s infinite alternate move_eye;

animation: bounce 300ms linear 0s infinite normal;
normal / reverse / alternate / animation: bounce 300ms linear infinite;
animation-direction:
alternate-reverse animation: bounce 300ms linear infinite alternate-reverse;
animation: bounce 300ms linear 2s infinite alternate-reverse forwards normal;
none / forwards / backwards
animation-fill-mode:
/ both / initial / inherit

normal / reverse / alternate / Javascript Event

animation-play-state:
alternate-reverse
.one('webkitAnimationEnd oanimationend msAnimationEnd animationend')
See also: Animation

# CSS Flexbox
Simple example - Container

.container { .container {
display: flex;
} display: flex;
display: inline-flex;

.container > div {

flex: 1 1 auto; flex-direction: row; /* ltr - default */
} flex-direction: row-reverse; /* rtl */
flex-direction: column; /* top-bottom */
flex-direction: column-reverse; /* bottom-top */
- Child

.container > div { flex-wrap: nowrap; /* one-line */

flex-wrap: wrap; /* multi-line */

/* This: */
flex: 1 0 auto; align-items: flex-start; /* vertical-align to top */
align-items: flex-end; /* vertical-align to bottom */
/* Is equivalent to this: */ align-items: center; /* vertical-align to center */
flex-grow: 1; align-items: stretch; /* same height on all (default) */
flex-shrink: 0;
flex-basis: auto;
justify-content: flex-start; /* [xxx ] */
justify-content: center; /* [ xxx ] */
order: 1; justify-content: flex-end; /* [ xxx] */
justify-content: space-between; /* [x x x] */
align-self: flex-start; /* left */ justify-content: space-around; /* [ x x x ] */
justify-content: space-evenly; /* [ x x x ] */
margin-left: auto; /* right */

} }

# CSS Flexbox Tricks

Vertical center Vertical center (2) Reordering

.container { .container { .container > .top {

display: flex; display: flex; order: 1;
} }
 /* vertical */
.container > div { align-items: center; .container > .bottom {
width: 100px; order: 2;
height: 100px; /* horizontal */ }
margin: auto; justify-content: center;
} }

Mobile layout Table-like

.container {
display: flex; .container {
flex-direction: column; display: flex;
} }

.container > .top {

flex: 0 0 100px; /* the 'px' values here are just suggested percentages */
} .container > .checkbox { flex: 1 0 20px; }
.container > .subject { flex: 1 0 400px; }
.container > .content { .container > .date { flex: 1 0 120px; }
flex: 1 0 auto;
}

A fixed-height top bar and a dynamic-height

content area. This creates columns that have different widths, but size accordingly according to the circumstances.

Vertical Left and right

.container { .menu > .left { align-self: flex-start; }

align-items: center; .menu > .right { align-self: flex-end; }
}

Vertically-center all items.

# CSS Grid Layout

Grid Template Columns fr Relative Unit Grid Gap

#grid-container { .grid { /*The distance between rows is 20px*/

display: grid; display: grid; /*The distance between columns is 10px*/
width: 100px; width: 100px; #grid-container {
grid-template-columns: 20px 20% 60%; grid-template-columns: 1fr 60px 1fr; display: grid;
} } grid-gap: 20px 10px;
}

CSS Block Level Grid - CSS grid-row CSS Inline Level Grid

#grid-container { CSS syntax: #grid-container {

display: block; display: inline-grid;
} grid-row: grid-row-start / grid-row-end; }

Example

.item {
grid-row: 1 / span 2;
}

minmax() Function - grid-row-start & grid-row-end CSS grid-row-gap

.grid { CSS syntax: grid-row-gap: length;

display: grid;
grid-template-columns: 100px grid-row-start: auto|row-line;
minmax(100px, 500px) 100px;
} grid-row-end: auto|row-line|span n;

Example

grid-row-start: 2; Any legal length value, like px or %. 0 is the

grid-row-end: span 2; default value

CSS grid-area Justify Items CSS grid-template-areas

.item1 { #container { .item {

grid-area: 2 / 1 / span 2 / span 3; display: grid; grid-area: nav;
} justify-items: center; }
grid-template-columns: 1fr; .grid-container {
 grid-template-rows: 1fr 1fr 1fr; display: grid;
grid-gap: 10px; grid-template-areas:
} 'nav nav . .'
'nav nav . .';
}

Justify Self Align Items

#grid-container { #container {
display: grid; display: grid;
justify-items: start; align-items: start;
} grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr 1fr;
.grid-items { grid-gap: 10px;
justify-self: end; }
}

The grid items are positioned to the right (end) of

the row.

# CSS Dynamic Content

- Variable Counter Using counters

Define CSS Variable /* Set "my-counter" to 0 */ body { counter-reset: section; }

counter-set: my-counter;
:root { h3::before {
--first-color: #16f; counter-increment: section;
/* Increment "my-counter" by 1 */
--second-color: #ff7; content: "Section." counter(section);
counter-increment: my-counter;
} }

/* Decrement "my-counter" by 1 */
Variable Usage ol {
counter-increment: my-counter -1;
counter-reset: section;
#firstParagraph { list-marker-type: none;
background-color: var(--first-color); /* Reset "my-counter" to 0 */ }
color: var(--second-color); counter-reset: my-counter;
} li::before {
counter-increment: section;
content: counters(section, ".") " ";
See also: CSS Variable See also: Counter set }

# Css 3 tricks
Scrollbar smooth

html {
scroll-behavior: smooth;
}

Click me, the page will scroll smoothly to Getting

started

# Also see
CSS selectors cheatsheet (frontend30.com)
MDN: Using CSS flexbox
Ultimate flexbox cheatsheet
GRID: A simple visual cheatsheet
CSS Tricks: A Complete Guide to Grid
Browser support

Related Cheatsheet Recent Cheatsheet

QuickRef.ME
HTML Cheatsheet JavaScript Cheatsheet Remote Work Revolution Homebrew Cheatsheet
Share quick reference and cheat sheet for
Quick Reference Quick Reference Quick Reference Quick Reference
developers.
 中文版 #Notes
jQuery Cheatsheet Laravel Cheatsheet PyTorch Cheatsheet Taskset Cheatsheet
Quick Reference Quick Reference Quick Reference Quick Reference

© 2025 QuickRef.ME, All rights reserved.