3/7/23, 13:25 CSS 3 Cheat Sheet & Quick Reference

QuickRef.ME Stars 3.2k

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

# Getting Started
- Introduction

CSS is rich in capabilities and is more than simply laying out pages.

External stylesheet

<link href="./path/to/stylesheet/style.css" rel="stylesheet" type="text/css">

Internal stylesheet

<style>
body {
background-color: linen;
}
</style>

Inline styles

Crea impactantes contenidos

<h2 style="text-align: center;">Centered text</h2> de marca con la ayuda de
nuestro Creative Assistant
basado en IA. Empieza ya.
<p style="color: blue; font-size: 18px;">Blue, 18-point text</p>
SPONSORED BY MAILCHIMP

Add class

https://quickref.me/css3.html 1/17
3/7/23, 13:25 CSS 3 Cheat Sheet & Quick Reference

<div class="classname"></div>
<div class="class1 ... classn"></div>

Support multiple classes on one element.

!important

.post-title {
color: blue !important;
}

Overrides all previous styling rules.

Selector

h1 { }
#job-title { }
div.hero { }
div > p { }

See: Selectors

Text color

color: #2a2aff;
color: green;
color: rgb(34, 12, 64, 0.6);
color: hsla(30 100% 50% / 0.6);

See: Colors

Background

background-color: blue;
background-image: url("nyan-cat.gif");
background-image: url("../image.png");

See: Backgrounds

Font

.page-title {
font-weight: bold;
font-size: 30px;
font-family: "Courier New";
}

See: Fonts

Position

.box {
position: relative;
top: 20px;
left: 20px;
}
Crea impactantes contenidos
de marca con la ayuda de
nuestro Creative Assistant
See also: Position basado en IA. Empieza ya.
SPONSORED BY MAILCHIMP

Animation

https://quickref.me/css3.html 2/17
3/7/23, 13:25 CSS 3 Cheat Sheet & Quick Reference

animation: 300ms linear 0s infinite;

animation: bounce 300ms linear infinite;

Comment

/* This is a single line comment */

/* This is a
multi-line comment */

Flex layout

div {
display: flex;
justify-content: center;
}
div {
display: flex;
justify-content: flex-start;
}

See: Flexbox | Flex Tricks

Grid layout

#container {
display: grid;
grid: repeat(2, 60px) / auto-flow 80px;
}

#container > div {

background-color: #8ca0ff;
width: 50px;
height: 50px;
}

See: Grid Layout

Variable & Counter

counter-set: subsection;
counter-increment: subsection;
counter-reset: subsection 0;

:root {
--bg-color: brown;
}
element {
background-color: var(--bg-color);
}

Crea impactantes contenidos

See: Dynamic content de marca con la ayuda de
nuestro Creative Assistant
basado en IA. Empieza ya.
SPONSORED BY MAILCHIMP

https://quickref.me/css3.html 3/17
3/7/23, 13:25 CSS 3 Cheat Sheet & Quick Reference

# CSS Selectors
- Examples

Groups Selector

h1, h2 {
color: red;
}

Chaining Selector

h3.section-heading {
color: blue;
}

Attribute Selector

div[attribute="SomeValue"] {
background-color: red;
}

First Child Selector

p:first-child {
font-weight: bold;
}

No Children Selector

.box:empty {
background: lime;
height: 80px;
width: 80px;
}

Basic

* All elements

div All div tags

.classname All elements with class

#idname Element with ID

div,p All divs and paragraphs

#idname * All elements inside #idname

See also: Type / Class / ID / Universal selectors

Combinators

div.classname Div with certain classname

div#idname Div with certain ID

div p Paragraphs inside divs

Crea impactantes contenidos
de marca con la ayuda de
All p tags
nuestro Creative Assistant
div > p
one
basado level
en IA. deepya.in div
Empieza
SPONSORED BY MAILCHIMP

div + p P tags immediately after div

https://quickref.me/css3.html 4/17
3/7/23, 13:25 CSS 3 Cheat Sheet & Quick Reference

div ~ p P tags preceded by div

Attribute selectors

a[target] With a target attribute

a[target="_blank"] Open in new tab

a[href^="/index"] Starts with /index

[class|="chair"] Starts with chair

[class*="chair"] containing chair

[title~="chair"] Contains the word chair

a[href$=".doc"] Ends with .doc

[type="button"] Specified type

See also: Attribute selectors

User action pseudo classes

a:link Link in normal state

a:active Link in clicked state

a:hover Link with mouse over it

a:visited Visited link

Pseudo classes

p::after Add content after p

p::before Add content before p

p::first-letter First letter in p

p::first-line First line in p

::selection Selected by user

::placeholder Placeholder attribute

:root Documents root element

:target Highlight active anchor

div:empty Element with no children

p:lang(en) P with en language attribute

:not(span) Element that's not a span

Input pseudo classes

input:checked Checked inputs

Crea impactantes contenidos

input:disabled Disabled inputs
de marca con la ayuda de
nuestro Creative Assistant
input:enabled basado en IA.Enabled
Empieza ya.inputs
SPONSORED BY MAILCHIMP

input:focus Input has focus

https://quickref.me/css3.html 5/17
3/7/23, 13:25 CSS 3 Cheat Sheet & Quick Reference

input:in-range Value in range

input:out-of-range Input value out of range

input:valid Input with valid value

input:invalid Input with invalid value

input:optional No required attribute

input:required Input with required attribute

input:read-only With readonly attribute

input:read-write No readonly attribute

input:indeterminate With indete minate state

Structural pseudo classes

p:first-child First child

p:last-child Last child

p:first-of-type First of some type

p:last-of-type Last of some type

p:nth-child(2) Second child of its parent

p:nth-child(3n42) Nth-child (an + b) formula

p:nth-last-child(2) Second child from behind

p:nth-of-type(2) Second p of its parent

p:nth-last-of-type(2) ...from behind

p:only-of-type Unique of its parent

p:only-child Only child of its parent

# CSS Fonts
Properties

font-family: <font>

font-size: <size>

letter-spacing: <size>

line-height: <number>

font-weight: <number> / bold / normal

font-style: italic / normal

Crea impactantes contenidos
text-decoration: underline / none de marca con la ayuda de
nuestro Creative Assistant
basado en IA. Empieza ya.
left / right
text-align:
center / justify SPONSORED BY MAILCHIMP

text-transform: capitalize / uppercase / lowercase

https://quickref.me/css3.html 6/17
3/7/23, 13:25 CSS 3 Cheat Sheet & Quick Reference

See also: Font

Shorthand

font: italic 400 14px / 1.5 sans-serif

style weight size (required) line-height family (required)

Example

font-family: Arial, sans-serif;

font-size: 12pt;
letter-spacing: 0.02em;

Case

/* Hello */
text-transform: capitalize;

/* HELLO */
text-transform: uppercase;

/* hello */
text-transform: lowercase;

@font-face

@font-face {
font-family: 'Glegoo';
src: url('../Glegoo.woff');
}

# CSS Colors
Named color

color: red;
color: orange;
color: tan;
color: rebeccapurple;

Hexadecimal color

color: #090;
color: #009900;
color: #090a;
color: #009900aa;

rgb() Colors

color: rgb(34, 12, 64, 0.6);

Crea impactantes contenidos
color: rgba(34, 12, 64, 0.6);
de marca con la ayuda de
color: rgb(34 12 64 / 0.6); nuestro Creative Assistant
color: rgba(34 12 64 / 0.3); basado en IA. Empieza ya.
SPONSORED BY MAILCHIMP
color: rgb(34.0 12 64 / 60%);
color: rgba(34.6 12 64 / 30%);

https://quickref.me/css3.html 7/17
3/7/23, 13:25 CSS 3 Cheat Sheet & Quick Reference

HSL Colors

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

color: hsla(30, 100%, 50%, 0.6);
color: hsl(30 100% 50% / 0.6);
color: hsla(30 100% 50% / 0.6);
color: hsl(30.0 100% 50% / 60%);
color: hsla(30.2 100% 50% / 60%);

Other

color: inherit;
color: initial;
color: unset;
color: transparent;

color: currentcolor; /* keyword */

# CSS Backgrounds
Properties

background: (Shorthand)

background-color: See: Colors

background-image: url(...)

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

background-size: cover X Y

border-box
background-clip: padding-box
content-box

no-repeat
background-repeat: repeat-x
repeat-y

background-attachment: scroll/fixed/local

Shorthand

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

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

color image posX posY size repeat attach..

Examples

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

Crea impactantes contenidos

background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat; de marca con la ayuda de
nuestro Creative Assistant
basado en IA. Empieza ya.
background: rgb(2,0,36);
SPONSORED BY MAILCHIMP
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(13,232,230,1) 35%, rgba(0,212,255,1) 100%);

https://quickref.me/css3.html 8/17
3/7/23, 13:25 CSS 3 Cheat Sheet & Quick Reference

# CSS The Box Model

Maximums/Minimums

.column {
max-width: 200px;
width: 500px;
}

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

Margin / Padding

.block-one {
margin: 20px;
padding: 10px;
}

See also: Margin / Padding

Box-sizing

.container {
box-sizing: border-box;
}

See also: Box-sizing

Visibility

.invisible-elements {
visibility: hidden;
}

See also: Visibility

Auto keyword

div {
margin: auto;
}

See also: Margin

Overflow

.small-block {
overflow: scroll;
}

See also: Overflow

Crea impactantes contenidos

de marca con la ayuda de
nuestro Creative Assistant
basado en IA. Empieza ya.
SPONSORED BY MAILCHIMP

# CSS Animation
Shorthand

https://quickref.me/css3.html 9/17
3/7/23, 13:25 CSS 3 Cheat Sheet & Quick Reference

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

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

Properties

animation: (shorthand)

animation-name: <name>

animation-duration: <time>ms

animation-timing-function: ease / linear / ease-in / ease-out / ease-in-out

animation-delay: <time>ms

animation-iteration-count: infinite / <number>

animation-direction: normal / reverse / alternate / alternate-reverse

animation-fill-mode: none / forwards / backwards / both / initial / inherit

animation-play-state: normal / reverse / alternate / alternate-reverse

See also: Animation

Example

/* @keyframes duration | timing-function | delay |

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

/* @keyframes duration | timing-function | delay | name */

animation: 3s linear 1s slidein;

/* @keyframes duration | name */

animation: 3s slidein;

animation: 4s linear 0s infinite alternate move_eye;

animation: bounce 300ms linear 0s infinite normal;
animation: bounce 300ms linear infinite;
animation: bounce 300ms linear infinite alternate-reverse;
animation: bounce 300ms linear 2s infinite alternate-reverse forwards normal;

Javascript Event

.one('webkitAnimationEnd oanimationend msAnimationEnd animationend')

# CSS Flexbox
Simple example

.container {
display: flex;
Crea impactantes contenidos
} de marca con la ayuda de
nuestro Creative Assistant
basado en IA. Empieza ya.
.container > div { SPONSORED BY MAILCHIMP

flex: 1 1 auto;
}

https://quickref.me/css3.html 10/17
3/7/23, 13:25 CSS 3 Cheat Sheet & Quick Reference

- Container

.container {

display: flex;
display: inline-flex;

flex-direction: row; /* ltr - default */

flex-direction: row-reverse; /* rtl */
flex-direction: column; /* top-bottom */
flex-direction: column-reverse; /* bottom-top */

flex-wrap: nowrap; /* one-line */

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

align-items: flex-start; /* vertical-align to top */

align-items: flex-end; /* vertical-align to bottom */
align-items: center; /* vertical-align to center */
align-items: stretch; /* same height on all (default) */

justify-content: flex-start; /* [xxx ] */

justify-content: center; /* [ xxx ] */
justify-content: flex-end; /* [ xxx] */
justify-content: space-between; /* [x x x] */
justify-content: space-around; /* [ x x x ] */
justify-content: space-evenly; /* [ x x x ] */

- Child

.container > div {

/* This: */
flex: 1 0 auto;

/* Is equivalent to this: */
flex-grow: 1;
flex-shrink: 0;
flex-basis: auto;

order: 1;

align-self: flex-start; /* left */

margin-left: auto; /* right */

# CSS Flexbox Tricks Crea impactantes contenidos

de marca con laVertical
ayuda decenter
nuestro Creative Assistant
basado en IA. Empieza ya.
.container {
SPONSORED BY MAILCHIMP
display: flex;
}

https://quickref.me/css3.html 11/17
3/7/23, 13:25 CSS 3 Cheat Sheet & Quick Reference
.container > div {
width: 100px;
height: 100px;
margin: auto;
}

Vertical center (2)

.container {
display: flex;

/* vertical */
align-items: center;

/* horizontal */
justify-content: center;
}

Reordering

.container > .top {

order: 1;
}

.container > .bottom {

order: 2;
}

Mobile layout

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

.container > .top {

flex: 0 0 100px;
}

.container > .content {

flex: 1 0 auto;
}

A fixed-height top bar and a dynamic-height content area.

Table-like

.container {
display: flex;
}

/* the 'px' values here are just suggested percentages */

.container > .checkbox { flex: 1 0 20px; }
.container > .subject { flex: 1 0 400px; }
.container > .date { flex: 1 0 120px; } Crea impactantes contenidos
de marca con la ayuda de
nuestro Creative Assistant
This creates columns that have different widths, but size accordingly according to the circumstances. basado en IA. Empieza ya.
SPONSORED BY MAILCHIMP

Vertical

https://quickref.me/css3.html 12/17
3/7/23, 13:25 CSS 3 Cheat Sheet & Quick Reference

.container {
align-items: center;
}

Left and right

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

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

# CSS Grid Layout

Grid Template Columns

#grid-container {
display: grid;
width: 100px;
grid-template-columns: 20px 20% 60%;
}

fr Relative Unit

.grid {
display: grid;
width: 100px;
grid-template-columns: 1fr 60px 1fr;
}

Grid Gap

/*The distance between rows is 20px*/

/*The distance between columns is 10px*/
#grid-container {
display: grid;
grid-gap: 20px 10px;
}

CSS Block Level Grid

#grid-container {
display: block;
}

- CSS grid-row

CSS syntax:

grid-row: grid-row-start / grid-row-end;

Example
Crea impactantes contenidos
.item { de marca con la ayuda de
nuestro Creative Assistant
grid-row: 1 / span 2;
basado en IA. Empieza ya.
} SPONSORED BY MAILCHIMP

CSS Inline Level Grid

https://quickref.me/css3.html 13/17
3/7/23, 13:25 CSS 3 Cheat Sheet & Quick Reference

#grid-container {
display: inline-grid;
}

minmax() Function

.grid {
display: grid;
grid-template-columns: 100px minmax(100px, 500px) 100px;
}

- grid-row-start & grid-row-end

CSS syntax:

grid-row-start: auto|row-line;

grid-row-end: auto|row-line|span n;

Example

grid-row-start: 2;
grid-row-end: span 2;

CSS grid-row-gap

grid-row-gap: length;

Any legal length value, like px or %. 0 is the default value

CSS grid-area

.item1 {
grid-area: 2 / 1 / span 2 / span 3;
}

Justify Items

#container {
display: grid;
justify-items: center;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 10px;
}

CSS grid-template-areas

.item {
grid-area: nav;
}
.grid-container {
display: grid;
grid-template-areas:
'nav nav . .'
Crea impactantes contenidos
'nav nav . .'; de marca con la ayuda de
} nuestro Creative Assistant
basado en IA. Empieza ya.
SPONSORED BY MAILCHIMP

Justify Self

https://quickref.me/css3.html 14/17
3/7/23, 13:25 CSS 3 Cheat Sheet & Quick Reference

#grid-container {
display: grid;
justify-items: start;
}

.grid-items {
justify-self: end;
}

Align Items

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

# CSS Dynamic Content

- Variable

Define CSS Variable

:root {
--first-color: #16f;
--second-color: #ff7;
}

Variable Usage

#firstParagraph {
background-color: var(--first-color);
color: var(--second-color);
}

See also: CSS Variable

Counter

/* Set "my-counter" to 0 */
counter-set: my-counter;

/* Increment "my-counter" by 1 */
counter-increment: my-counter;

/* Decrement "my-counter" by 1 */
counter-increment: my-counter -1;

Crea impactantes contenidos

/* Reset "my-counter" to 0 */ de marca con la ayuda de
counter-reset: my-counter; nuestro Creative Assistant
basado en IA. Empieza ya.
SPONSORED BY MAILCHIMP

See also: Counter set

https://quickref.me/css3.html 15/17
3/7/23, 13:25 CSS 3 Cheat Sheet & Quick Reference
Using counters

body { counter-reset: section; }

h3::before {
counter-increment: section;
content: "Section." counter(section);
}

ol {
counter-reset: section;
list-marker-type: none;
}

li::before {
counter-increment: section;
content: counters(section, ".") " ";
}

# 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

Vende tu casa rápido

Crea impactantes contenidos
Recibe hasta cuatro ofertas y compara los mejores de marca con la ayuda de
precios. nuestro Creative Assistant
basado en IA. Empieza ya.
Sponsored By Inmobiliarias.es SPONSORED BY MAILCHIMP

https://quickref.me/css3.html 16/17
3/7/23, 13:25 CSS 3 Cheat Sheet & Quick Reference
SEE MORE

Related Cheatsheet

HTML Cheatsheet JavaScript Cheatsheet

Quick Reference Quick Reference

jQuery Cheatsheet Laravel Cheatsheet

Quick Reference Quick Reference

Recent Cheatsheet

Homebrew Cheatsheet PyTorch Cheatsheet

Quick Reference Quick Reference

Taskset Cheatsheet EJS Cheatsheet

Quick Reference Quick Reference

© 2023 QuickRef.ME, All rights reserved.

Crea impactantes contenidos

de marca con la ayuda de
nuestro Creative Assistant
basado en IA. Empieza ya.
SPONSORED BY MAILCHIMP

https://quickref.me/css3.html 17/17