CSS Cheatsheet

In rough order of how much we use them:

Width & Height

width: 10px
min-width: 10px; /* Can never get skinnier than this */
max-width: 10px; /* Can never get wider than this */

height: 10px
min-height: 10px /* Can never get shorter than this */
max-height: 10px /* Can never get taller than this */

Margin

/* set all four at once: */
margin: 10px 10px 10px 10px;
margin: 10px;
margin: auto;
margin: 0

/* or one at a time */
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;

Padding

/* set all four at once: */
padding: 10px 10px 10px 10px;
padding: 10px;
padding: auto;
padding: 0

/* or one at a time */
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;

Colors

color

<p style="color: red;">Hello</p>

color: red;
color: #FFFFFF;
color: RGB(255,255,255);
color: RGBA(255,255,255, 0.4);

background-color

<div style="background-color: red;"></div>

background-color: red;
background-color: #FFFFFF;
background-color: RGB(255,255,255);
background-color: RGBA(255,255,255, 0.4);

Borders

<div style="border: 2px solid black;"></div>

Which is the same as:

<div style="border-width: 2px; border-style: solid; border-color: black;"></div>

border-style: solid;
border-style: dotted;
border-style: dashed;
border-style: none;

Fonts

font-size

<p style="font-size: 30pt;">Hello</p>

Also accepts em and px as units.

font-family

<p style="font-family: Cinzel;">Hello</p>

Also lets you set fonts to fall back to, in case a font can't be loaded / isn't installed:

<p style="font-family: NotARealFont, Cinzel;">Hello</p>

font-weight

<p style="font-weight: bolder;">Hello</p>

font-weight: normal;
font-weight: bold;
font-weight: bolder;
font-weight: lighter;
font-weight: 100;
font-weight: 200;
...
font-weight: 900;

text-align

<p style="text-align: left;">Hello</p>

<p style="text-align: right;">Hello</p>

<p style="text-align: center;">Hello</p>

line-height

Increases the space between each line of text.

<p style="line-height: 40px;">Hello there! Lots of text wrapping to next line.</p>

letter-spacing

Increases the space between each character of text.

<p style="letter-spacing: 10px;">Hello there!</p>

text-decoration

<p style="text-decoration: none;">Hello</p>

<p style="text-decoration: underline;">Hello</p>

<p style="text-decoration: line-through;">Hello</p>

text-transform

<p style="text-transform: uppercase;">hello</p>

<p style="text-transform: capitalize;">hello</p>

<p style="text-transform: lowercase;">HELLO</p>

Flexbox

display: flex;

To turn flexbox on.

flex-direction: column

<div style="display: flex; flex-direction: column;">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

flex-direction: row

<div style="display: flex; flex-direction: row;">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

/* And also: */
flex-direction: row-reverse;
flex-direction: column-reverse;

flex

flex: 0
flex: 1
flex: 2

Watch the video

justify-content and align-items

justify-content: flex-start;
justify-content: flex-end;
justify-content: center;
justify-content: space-between;
justify-content: space-around;
justify-content: space-evenly;

align-items: flex-start;
align-items: flex-end;
align-items: center;
align-items: stretch;
align-items: baseline;

Watch the video

flex-wrap

'wraps' elements round to the next line when space runs out.

<div style="display: flex; flex-wrap: wrap;">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

Z-Index

If two elements are overlapping. The one with the higher z-index will be on top.

z-index: 1;
z-index: 300;
z-index: -10;