100px
100px
100px
100px
100px
100px
100px
100px
100px
100px
100px
100px
100px
100px
100px
100px
100px
100px
100px
100px
100px
100px
100px
100px

HTML

Templates

HTML Document

<!DOCTYPE html> <html> <head> <title>Title</title> <link href="style.css" type="text/css" rel="stylesheet"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta charset="utf-8"> </head> <body> ... </body> </html>

Elements

Headers

<h1>

<h2>

<h3>

<h4>
<h5>
<h6>

Paragraph

<p>content</p>

Line break

<br>

Horizontal rule

<hr>

Division

Block-level generic grouping element

<div class="kind"> content </div>

Span

Inline generic grouping element

<span class="kind"> content </span>

Article

A self-contained unit of content

<article> <h2>Header</h2> content </article>

Section

A unit of content

<section> <h2>Header</h2> content </section>

Figure

<figure> content <figcaption>Caption</figcaption> </figure>

Navigation

See navigation bar at the top.
<nav> <ul> <li><a href="#">First</a></li> <li><a href="#">Second</a></li> <li><a href="#">Third</a></li> </ul> </nav>

Text

strong
<strong>strong</strong>
emphasized
<em>emphasized</em>
semantic
<i>semantic</i>
strikethrough
<s>strikethrough</s>
abbr
<abbr title="abbreviation">abbr</abbr>
mark
<mark>mark</mark>
underline
<u>underline</u>
x sup
<sup>sup</sup>
x sub
<sub>sub</sub>
inline quote
<q>inline quote</q>
<time datetime="2017-05-18T13:30">
  May 18
</time>
block quote
<blockquote>block quote</blockquote>
term definition
<dfn>term</dfn>
citation
<cite>citation</cite>
data
<data value="42">data</data>

Code

code()
<code>code()</code>
sample output
<samp>sample output</samp>
Press Ctrl+ S
<kbd>Ctrl</kbd>
variable
<var>variable</var>

Forms

<form action="" method="get"> <label for="name">Name:</label> <input id="name" name="name"> <input type="submit" value="Save"> </form>
Title
<form action="" method="post"> <fieldset> <legend>Title</legend> <label for="fid">Label:</label> <input id="fid" name="field"> <input type="submit" value="Save"> </fieldset> </form>

UI elements

<button>button</button>
<meter value="0.6">
<select> <option>Value 1</option> <option>Value 2</option> <option>Value 3</option> </select>
<select> <optgroup label="Group 1"> <option>Value 1</option> <option>Value 2</option> </optgroup> <optgroup label="Group 2"> <option>Value 3</option> <option>Value 4</option> </optgroup> </select>
<progress value="0.6">
<textarea>content</textarea>
Summary

The gory details.

<details> <summary>Summary</summary> <p>The gory details.</p> </details>
<label>label <input></label>
<label for="name">label</label> <input id="name">

Input types

<input type="button" value="ok">
<input type="checkbox">
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
<input type="reset">
<input type="search">
<input type="submit">
<input type="tel">
<input type="text">
<input type="hidden">
<input type="time">
<input type="url">
<input type="week">
<input type="image">

Images

Image

<img src="URL">

Image with description

<img src="URL" alt="image description">

Lists

Unordered list

<ul> <li>Item 1</li> <li>Item 2</li> </ul>

Ordered list

<ol> <li>Item 1</li> <li>Item 2</li> </ol>

Description list

<dl> <dt>Term</dt> <dd>Definition</dd> </dl>

Comments

Comments

<!-- comment -->

Tables

Basic table

Also see display: table

data
<table> <tr> <td>data</td> </tr> </table>

Full Table

caption
name number
Footer Total
Andy 42
Kevin 1024
<table> <caption>caption</caption> <thead> <tr> <th>col-header</th> <th>col-header</th> </tr> </thead> <tfoot> <tr> <td>footer</td> <td>footer</td> </tr> </tfoot> <tbody> <tr> <th>row-header</th> <td>data</td> </tr> </tbody> </table>

Span columns

name number
Andy 42
Kevin
<td colspan="2">Kevin</td>

Span rows

name number
Andy 42
1024
<td rowspan="2">Andy</td>

Column groups

Operate on an entire column

Andy 42
Kevin 1024
<colgroup> <col style="..."></col> </colgroup>
Andy 42
Kevin 1024
<colgroup> <col span="2" style="..."></col> </colgroup>

Footers

Name Total
Andy 42
Kevin 1024
<tfoot> <tr> <td>Name</td> <td>Total</td> </tr> </tfoot>

CSS

Basic structure ( reference)

Selectors

<element>
element
<element class="a">
.a
<element id="id">
#id
<element class="a b">
element.a.b
<any>
*

Combinators

<parent> ⋮ <descendant>
parent descendant
<parent> <child>
parent > child
<sibling> <self>
sibling + self
<sibling> <self> ⋮ <self>
sibling ~ self

Attribute selectors

<div attr=*>
div[attr]
<div attr="value">
div[attr="value"]
<div attr="v1 v2">
div[attr~="v1"]
<div attr="value"> <div attr="value-*">
div[attr|="value"]
<div attr="value*">
div[attr^="value"]
<div attr="*value">
div[attr$="value"]
<div attr="*value*">
div[attr*="value"]
<div attr="VaLuE">
div[attr="value" i]

Variables

Limited platform support.

:root { --bg-color: white; } .class { background-color: var(--bg-color); }

Pseudo

Pseudo classes

Ordering matters for link, visited, hover, active.

There are many other pseudo-classes useful for creating CSS queries.

link one link two link three
a:link { background-color: yellow } a:visited { background-color: #ccc } a:hover { background-color: green } a:active { background-color: red }
I'm red when clicked
a:active { background-color: red }
I'm green when hovering
a:hover { background-color: green }
I'm red when I'm the active target. This links to the target above. This links to a nonexistent target.
a:target { background-color: red }

Pseudo elements

The element content.
a::after { content:" The added content. "; color: green; }
The element content.
a::before { content:" The added content. "; color: green; }
An underline.
.underline { position: relative; } .underline::after { position: absolute; content: " "; display: block; border-top: 1px solid #999; width: 70%; }
An overline.
.overline { position: relative; } .overline::before { position: absolute; content: " "; display: block; border-bottom: 1px solid #999; width: 70%; }

Fonts

font-family:

Additional google fonts

Aa Bb Cc
"Times New Roman", serif;
Aa Bb Cc
"Arial", sans-serif;
Aa Bb Cc
"Courier", monospace;
Aa Bb Cc
"Source Sans Pro", sans-serif;
Aa Bb Cc
"Source Code Pro", monospace;

font-size:

Browser default size 16px.

em and % are relative to parent font size.

rem is like em relative to html element font size.

Aa
xx-large;
Aa
x-large;
Aa
large;
Aa
medium;
Aa
small;
Aa
x-small;
Aa
32px;
Aa
24px;
Aa
18px;
Aa
16px;
Aa
13px;
Aa
10px;
Aa
8px;
Aa
2em;
Aa
1.5em;
Aa
1.125em;
Aa
1em;
Aa
0.813em;
Aa
0.625em;
Aa
0.5em;
Aa
200%;
Aa
150%;
Aa
112.5%;
Aa
100%;
Aa
81.3%;
Aa
62.5%;
Aa
50%;

font-weight:

Aa
lighter;
Aa
normal;
Aa
bolder;
Aa
300;
Aa
400;
Aa
700;

Misc font properties

Aa Bb Cc
font-style: italic;
Aa Bb Cc
font-variant: small-caps;
AVAVAV|AVAVAV|AVAVAV|AVAVAV
font-kerning: none;
AVAVAV|AVAVAV|AVAVAV|AVAVAV
font-kerning: normal;

Text and inline elements

text-align:

abc abc abc abc abc abc
left;
abc abc abc abc abc abc
center;
abc abc abc abc abc abc
right;
abc abc abc abc abc abc
justify;

line-height:

abc abc abc abc
abc abc abc abc
abc abc abc abc
0.8em;
abc abc abc abc
abc abc abc abc
abc abc abc abc
1em;
abc abc abc abc
abc abc abc abc
abc abc abc abc
1.5em;
abc abc abc abc
abc abc abc abc
abc abc abc abc
2em;

word-spacing:

abc abc abc abc
abc abc abc abc
abc abc abc abc
0.1em;
abc abc abc abc
abc abc abc abc
abc abc abc abc
0.3em;
abc abc abc abc
abc abc abc abc
abc abc abc abc
0.5em;
abc abc abc abc
abc abc abc abc
abc abc abc abc
1em;

letter-spacing:

abc abc
abc abc
abc abc
0.1em;
abc abc
abc abc
abc abc
0.3em;
abc abc
abc abc
abc abc
0.5em;
abc abc
abc abc
abc abc
1em;

text-transform:

abc ABC
none;
abc ABC
capitalize;
abc ABC
lowercase;
abc ABC
uppercase;

vertical-align:

Inline elements only. To align block elements, use flex. Also see section on table cells.

box
line-height = height
base

Inline block without text

box
base
baseline;
box
top
top;
box
middle
middle;
box
bottom
bottom;
base super
super;
base sub
sub;
base 50%
50%;
base -50%
-50%;

Lists

list-style:

Adjust list style type, position, and image.

  • first
  • second
  • third
none;
  • first
  • second
  • third
circle;
  • first
  • second
  • third
decimal;
  • first
  • second
  • third
disc;
  • first
  • second
  • third
lower-alpha;
  • first
  • second
  • third
lower-roman;
  • first
  • second
  • third
upper-alpha;
  • first
  • second
  • third
upper-roman;
  • first
  • second
  • third
inside lower-roman;
  • first
  • second
  • third
outside lower-roman;
  • first
  • second
  • third
url('...');

Box model

display:

Basic display modes

x
y
z
none;
x
y
z
block;
x
y
z
inline-block;
x
y
z
inline;

Inline elements have no padding or margin.

box-sizing:

margin
border
padding
content
content-box;
margin
border
padding
content
border-box;

width:

%-widths are relative to parent entity

100px;
50px;
20px;
8px;
10em;
4em;
1em;
0.5em;
100%;
40%;
20%;
10%;

height:

%-heights are tricky; use Flexbox

100px;
50px;
20px;
8px;
10em;
4em;
1em;
0.5em;

padding:

4px;
10px;
20px;
4px 0;
10px 0;
20px 0;
0 4px;
0 10px;
0 20px;

Other padding

padding-top: 20px;
padding-left:
20px;
padding-right:
20px;
padding-bottom: 20px;

margin:

Adjacent top and bottom margins may collapse.

4px;
10px;
20px;
4px 0;
10px 0;
20px 0;
0 4px;
0 10px;
0 20px;

Other margins

margin: 0 auto;

Center block elements

margin-top: 20px;
margin-left:
20px;
margin-right:
20px;
margin-bottom: 20px;

overflow:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer aliquam leo fringilla hendrerit efficitur. Maecenas bibendum iaculis purus eget placerat. Nunc aliquet tristique mauris, elementum suscipit ante congue sit amet.
scroll;
hidden;
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer aliquam leo fringilla hendrerit efficitur. Maecenas bibendum iaculis purus eget placerat. Nunc aliquet tristique mauris, elementum suscipit ante congue sit amet.
visible;

Positioning

position: static;

position: relative;

top: 10px;
bottom: 10px;
left: 10px;
right: 10px;

position: absolute;

Requires positioned parent element

(relative | absolute | fixed) ↘
static
position
Absolute
position
static
position
static
position
left:0; top:0;
right:0; top:0;
left:0; bottom:0;
right:0; bottom:0;
left:0; right:0;
top:0; bottom:0;
left:0; right:0; top:0; bottom:0;
left:10%; right:10%; top:10%; bottom:10%;

position: fixed;

Same rules as absolute positioning, but fixed relative to viewport.

viewport ↘

float:

left;
right;
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer aliquam leo fringilla hendrerit efficitur.
left;
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer aliquam leo fringilla hendrerit efficitur.
right;

clear:

Allow an element to avoid being adjacent to a floated element.

float:
left

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer aliquam leo fringilla hendrerit efficitur.

float:
right

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer aliquam leo fringilla hendrerit efficitur.

clear: left;
float:
left

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer aliquam leo fringilla hendrerit efficitur.

float:
right

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer aliquam leo fringilla hendrerit efficitur.

clear: right;
float:
left

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer aliquam leo fringilla hendrerit efficitur.

float:
right

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer aliquam leo fringilla hendrerit efficitur.

clear: both;

z-index:

For positioned elements only

20
0
0;
20
20
20;
20
100
100;

Flexbox containers

display:

Flexbox container mode

flex;
inline-flex;

flex-flow:

Flex direction and wrap

<flex-direction> <flex-wrap>;

flex-direction:

Direction of main axis

1
2
3
row;
1
2
3
row-reverse;
1
2
3
column;
1
2
3
column-reverse;

flex-wrap:

Wrap items across lines

1
2
3
4
5
6
7
8
9
10
wrap;
1
2
3
4
5
6
7
8
9
10
nowrap;
1
2
3
4
5
6
7
8
9
10
wrap-reverse;

justify-content:

Justification of items

flex-start;
center;
flex-end;
space-between;
space-around;

align-items:

Alignment on cross axis

flex-start;
center;
flex-end;
a
b
c
baseline;
stretch;

align-content:

Alignment of wrapped lines

flex-start;
center;
flex-end;
space-between;
space-around;
stretch;

Flexbox items

flex:

Combine grow, shrink, basis

<flex-grow> <flex-shrink>? || <flex-basis>;

flex-grow:

Item growth multiplier

0
0
0;

no grow

1
1
1;
10
20
10;
99
20
99;

flex-shrink:

Item shrink multiplier

0
0
0;

no shrink

1
1
1;
10
20
10;
99
20
99;

flex-basis:

Size of a flex item as the basis for grow and shrink factors.

abc
content;
abc
50px;
abc
50%;
abc
100%;

align-self:

Item-specific cross axis alignment

flex-start;
center;
flex-end;
a
b
c
baseline;
stretch;

order:

Display order of an item

<div class="first">1</div> <div class="second">2</div> <div class="third">3</div>
1
2
3
.first, .second { order: 1; }

Grid containers

Experimental. Limited support in Safari, Edge.

display:

Grid container mode

grid;
inline-grid;

grid-template-columns:

1fr 1fr;
1fr 2fr;
1fr 2fr 1fr;
50% 1fr 2fr;
repeat(12, 1fr);
fit
long content
auto auto;

grid-template-rows:

1fr 1fr;
1fr 2fr;
1fr 2fr 1fr;
repeat(4, 1fr);

grid-gap:

0;
2px;
4px;
8px;
0 2px;
0 4px;
0 8px;
2px 0;
4px 0;
8px 0;

Implicit row and column sizes

Size implicit rows and columns

grid-auto-rows: 100px;
grid-auto-columns: 100px;

grid-template:

Use grid-area to refer to named areas.

nav
left
body
right
foot
"nav nav nav" 1fr "left body right" 3fr "foot foot foot" 1fr / 1fr 2fr 1fr;
nav
side
body
"nav nav " 1fr "side body" 3fr / 1fr 2fr;
1
2
3
4
5
6
7
8
9
0
"d1 d2 d3" 1fr "d4 d5 d6" 1fr "d7 d8 d9" 1fr ". d0 ." 1fr / 1fr 1fr 1fr;
1fr 2fr
/ 1fr 2fr 1fr;

grid-auto-flow:

Highlighted grid cell has grid position explicitly set.

sparse
dense
1
2
3
4
5
6
row;
1
2
3
4
5
6
row;
1
2
3
4
5
6
row dense;
1
2
3
4
5
6
column;
1
2
3
4
5
6
column;
1
2
3
4
5
6
column dense;

Grid items

grid-column:

Negative starts from opposing side (explicit grid only)

grid-column: left / right

1/span 1;
2/span 1;
span 1/-1;
1/span 2;
1/-1;
span 2/-1;

grid-row:

Negative starts from opposing side (explicit grid only)

grid-row: top / bottom

1/span 1;
2/span 1;
span 1/-1;
1/span 2;
1/-1;
span 2/-1;

grid-area:

Negative starts from opposing side (explicit grid only)

Can also name grid area, see css-grid-template

grid-area: top / left / bottom / right;

span 2;
1/span 2;
1/1/span 2/span 2;
1/span 2/span 2/-1;
span 2/1/-1/span 2;
span 2/span 2/-1/-1;

Table display

display:

A B
C D
table;
A1 B1
A2 B2
table-row;
A1 B1
A2 B2
table-cell;
abc
A1 B1
A2 B2
def
inline-table;
A1 B1
A2 B2
A caption
table-caption;

Table borders

A1 B1
A2 B2
td { border: 2px solid black; }
A1 B1
A2 B2
table { border: 2px solid black; }
A1 B1
A2 B2
tr { border: 2px solid black; }
A1 B1
A2 B2
table td + td { border-left: 2px solid black; }
A1 B1
A2 B2
table tr + tr { border-top: 2px solid black; }

border-collapse:

collapse;
separate;

border-spacing:

Requires border-collapse: separate

0px;
2px;
4px;
8px;

caption-side:

Requires display: table-caption

A caption empty
top;
A caption
bottom;

vertical-align:

Works in table cells. Also works for inline elements.

abc
top;
abc
middle;
bottom
bottom;
ab cd
baseline;

Borders and Shadows

border:

none;
2px solid black;
2px dotted black;
2px dashed black;
8px double black;
8px groove lightgray;
8px ridge lightgray;
8px inset lightgray;
8px outset lightgray;

Border sides

border-top: 3px solid black;
border-right: 3px solid black;
border-bottom: 3px solid black;
border-left: 3px solid black;
border-top: 0;
border-right: 0;
border-bottom: 0;
border-left: 0;

border-width:

1px;
2px;
3px;
4px;

border-radius:

4px;
8px;
0px 16px;
100%;

box-shadow:

Shadow x and y position

-10px -10px gray;
-5px -5px gray;
-5px 5px gray;
-10px 10px gray;
10px -10px gray;
5px -5px gray;
5px 5px gray;
10px 10px gray;

box-shadow:

Shadow blur and spread

10px 10px gray;
10px 10px 5px gray;
10px 10px 10px gray;
10px 10px 20px gray;
0 0 20px 2px black;
0 0 20px 10px white;
inset 0 0 10px 8px gray;
0 0 20px 5px white,
10px 10px 20px gray;

Colors

color:

A
white;
A
black;
A
gray;
A
red;
A
green;
A
blue;
A
#fff;
A
#000;
A
#808080;
A
#f00;
A
#008000;
A
#00f;
A
rgb(255, 255, 255);
A
rgb(0, 0, 0);
A
rgb(128, 128, 128);
A
rgb(255, 0, 0);
A
rgb(0, 128, 0);
A
rgb(0, 0, 255);
A
hsl(0, 0%, 100%);
A
hsl(0, 0%, 0%);
A
hsl(0, 0%, 50%);
A
hsl(0, 100%, 50%);
A
hsl(120, 100%, 25%);
A
hsl(240, 100%, 50%);

color:

Grayscale

A
#000;
A
#222;
A
#555;
A
#777;
A
#999;
A
#bbb;
A
#ccc;
A
#eee;

background-color:

white;
black;
gray;
red;
green;
blue;
#fff;
#000;
#808080;
#f00;
#008000;
#00f;
rgb(255, 255, 255);
rgb(0, 0, 0);
rgb(128, 128, 128);
rgb(255, 0, 0);
rgb(0, 128, 0);
rgb(0, 0, 255);
hsl(0, 0%, 100%);
hsl(0, 0%, 0%);
hsl(0, 0%, 50%);
hsl(0, 0%, 50%);
hsl(120, 100%, 25%);
hsl(240, 100%, 50%);

background-color:

Grayscale

#000;
#222;
#555;
#777;
#999;
#bbb;
#ccc;
#eee;

background-color:

Transparent colors

rgba(255, 0, 0, 0.1);
rgba(255, 0, 0, 0.2);
rgba(255, 0, 0, 0.3);
rgba(255, 0, 0, 0.5);
rgba(255, 0, 0, 0.7);
rgba(255, 0, 0, 0.9);
hsla(0, 100%, 50%, 0.1);
hsla(0, 100%, 50%, 0.2);
hsla(0, 100%, 50%, 0.3);
hsla(0, 100%, 50%, 0.5);
hsla(0, 100%, 50%, 0.7);
hsla(0, 100%, 50%, 0.9);

background-image:

url(...);

background-image: linear-gradient

(to bottom, black, #ccc);
(to bottom, blue, black);
(to bottom, green, black);
(to bottom, red, black);
(to right bottom, red, black);
(to left bottom, red, black);

border-color:

white;
black;
gray;
red;
green;
blue;
#fff;
#000;
#808080;
#f00;
#008000;
#00f;
rgb(255, 255, 255);
rgb(0, 0, 0);
rgb(128, 128, 128);
rgb(255, 0, 0);
rgb(0, 128, 0);
rgb(0, 0, 255);
hsl(0, 0%, 100%);
hsl(0, 0%, 0%);
hsl(0, 0%, 50%);
hsl(0, 0%, 50%);
hsl(120, 100%, 25%);
hsl(240, 100%, 50%);

Transforms

transform: rotate

↑
(-45deg);
↑
(0);
↑
(45deg);
↑
(-90deg);
↑
(90deg);
↑
(-135deg);
↑
(180deg);
↑
(135deg);

transform:

Rotation in 3D

perspective: 100px;

↑
rotateX(45deg);
↑
rotateY(45deg);
↑
rotateZ(45deg);
↑
rotate3d(1, 0, 0, 45deg);
↑
rotate3d(0, 1, 0, 45deg);
↑
rotate3d(0, 0, 1, 45deg);

transform:

↑
scaleX(0.5);
↑
scaleY(0.5);
↑
translateZ(20px);
↑
scale(0.5, 1);
↑
scale(1, 0.5);
↑
scaleZ(2)
translateZ(10px);
↑
scale3d(0.5, 1, 1);
↑
scale3d(1, 0.5, 1);
↑
scale3d(1, 1, 2)
translateZ(10px);

transform: skew

↑
(20deg, 0deg);
↑
(-20deg, 0deg);
↑
(0deg, 20deg);
↑
(0deg, -20deg);

transform: translate

2D translation

translateX(0);
translateX(25px);
translateY(25px);
translateX(25px)
translateY(25px);
translate(0, 0);
translate(25px, 0);
translate(0, 25px);
translate(25px, 25px);
translate3d(0, 0, 0);
translate3d(25px, 0, 0);
translate3d(0, 25px, 0);
translate3d(25px, 25px, 0);

transform: translate

3D z-axis translation

perspective: 60px;
perspective-origin: top left;

translateZ(-25px);
translateZ(25px);
translate3d(0, 0, -25px);
translate3d(0, 0, 25px);

perspective:

See this tutorial on 3D transforms.

perspective-origin: 300% -200%;

F
T
R
L
B
K
1000px;
F
T
R
L
B
K
400px;
F
T
R
L
B
K
300px;
F
T
R
L
B
K
200px;

perspective-origin:

See this tutorial on 3D transforms.

perspective: 400px

Also top, bottom, left, right

F
T
R
L
B
K
50% 50%;
F
T
R
L
B
K
300% 200%;
F
T
R
L
B
K
-300% 200%;
F
T
R
L
B
K
300% -200%;
F
T
R
L
B
K
-300% -200%;

transform-origin:

perspective: 100px;

transform-origin:
rotateY(60deg);
↑
50%;
↑
left;
↑
right;
rotateY(-60deg);
↑
50%;
↑
left;
↑
right;
rotateX(60deg);
↑
50%;
↑
top;
↑
bottom;
rotateX(-60deg);
↑
50%;
↑
top;
↑
bottom;
rotateZ(45deg);
↑
50%;
↑
top left;
↑
bottom right;

Responsive design

See MDN on responsive design

Media queries

Observe nav bar when reducing screen width
@media(max-width: 600px) { element { display: none; } }