HTML5 and CSS Cheat Sheet Guide
Uploaded by
hoangsinh84HTML5 and CSS Cheat Sheet Guide
Uploaded by
hoangsinh841/7/26, 8:23 PM HTML5 and CSS cheat sheet
HTML CSS Animation Tools
HTML
Templates
HTML Document
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<link href="[Link]" 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 Paragraph Line break
<h1>
<p>content</p> <br>
<h2>
<h3>
Horizontal rule
<h4>
<hr>
<h5>
<h6>
Division Span
Block-level generic grouping element Inline generic grouping element
<div class="kind"> <span class="kind">
content content
</div> </span>
Article Section
A self-contained unit of content A unit of content
<article> <section>
<h2>Header</h2> <h2>Header</h2>
content content
</article> </section>
Figure
<figure>
content
<figcaption>Caption</figcaption>
</figure>
Navigation
See navigation bar at the top.
<nav>
[Link] 1/28
1/7/26, 8:23 PM HTML5 and CSS cheat sheet
<ul>
HTML CSS<li><a Animation Tools
href="#">First</a></li>
<li><a href="#">Second</a></li>
<li><a href="#">Third</a></li>
</ul>
</nav>
Text
strong emphasized semantic
<strong>strong</strong> <em>emphasized</em> <i>semantic</i>
strikethrough abbr mark
<s>strikethrough</s> <abbr title="abbreviation">abbr</abbr> <mark>mark</mark>
underline x sup x sub
<u>underline</u> <sup>sup</sup> <sub>sub</sub>
“inline quote” May 18
block quote
<q>inline quote</q> <time datetime="2017-05-18T13:30">
May 18
</time> <blockquote>block quote</blockquote>
term definition citation data
<dfn>term</dfn> <cite>citation</cite> <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
Name: Save
<form action="" method="get">
<label for="name">Name:</label>
<input id="name" name="name">
<input type="submit" value="Save">
</form>
Title
Label: Save
<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>
[Link] 2/28
1/7/26, 8:23 PM HTML5 and CSS cheat sheet
HTML CSS
UI elements Animation Tools
button Value 1
<button>button</button> <meter value="0.6"> <select>
<option>Value 1</option>
<option>Value 2</option>
<option>Value 3</option>
</select>
Value 1
<select> <progress value="0.6">
<optgroup label="Group 1">
<option>Value 1</option>
<option>Value 2</option>
</optgroup> content Summary
<optgroup label="Group 2">
<option>Value 3</option> <details>
<option>Value 4</option> <summary>Summary</summary>
</optgroup> <p>The gory details.</p>
<textarea>content</textarea>
</select> </details>
label labelled ui element label labelled ui element
<label>label <input></label> <label for="name">label</label>
<input id="name">
Input types
ok
<input type="button" value="ok"> <input type="checkbox">
<input type="color">
dd/mm/yyyy dd/mm/yyyy --:-- -- andy@[Link]
<input type="date"> <input type="datetime-local"> <input type="email">
Choose File No file chosen --------- ---- 123
<input type="file"> <input type="month"> <input type="number">
••••••••
<input type="password"> <input type="radio"> <input type="range">
Reset search term Submit
<input type="reset"> <input type="search"> <input type="submit">
415-123-4567 input <input type="hidden">
<input type="tel"> <input type="text">
--:-- -- [Link] Week --, ----
<input type="time"> <input type="url"> <input type="week">
<input type="image">
Links
Link
<a href="URL">open link</a>
[Link] 3/28
1/7/26, 8:23 PM HTML5 and CSS cheat sheet
HTML CSStab
Link in new Animation Tools
See this article on the need for "noopener noreferrer"
<a href="URL" target="_blank" rel="noopener noreferrer">open link in new tab</a>
Images
Image
<img src="URL">
Image with description
<img src="URL" alt="image description">
Lists
Unordered list Ordered list
<ul> <ol>
<li>Item 1</li> <li>Item 1</li>
<li>Item 2</li> <li>Item 2</li>
</ul> </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 <table>
<caption>caption</caption>
name number
<thead>
Andy <tr>
42
<th>col-header</th>
<th>col-header</th>
</tr>
</thead>
Footer Total <tfoot>
[Link] 4/28
1/7/26, 8:23 PM HTML5 and CSS cheat sheet
name number <tr>
HTML CSS Animation Tools
<td>footer</td>
<td>footer</td>
</tr>
</tfoot>
<tbody>
<tr>
<th>row-header</th>
<td>data</td>
</tr>
</tbody>
Kevin 1024 </table>
Span columns Span rows
name number name number
Andy 42 42
Andy
Kevin 1024
<td colspan="2">Kevin</td> <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
Andy 42
Kevin 1024
Name Total
<tfoot>
<tr>
<td>Name</td>
<td>Total</td>
</tr>
</tfoot>
CSS
Basic structure ( reference)
Selectors Combinators
<element> <parent>
⋮
element
<descendant>
parent descendant
<element class="a">
.a
<parent>
<child>
[Link] 5/28
1/7/26, 8:23 PM HTML5 and CSS cheat sheet
parent > child
HTML CSS id="id">
<element Animation Tools
#id
<sibling>
<self>
<element class="a b"> sibling + self
element.a.b
<sibling>
<any> <self>
⋮
* <self>
sibling ~ self
Attribute selectors
<div attr=*> <div attr="value*">
div[attr] div[attr^="value"]
<div attr="value"> <div attr="*value">
div[attr="value"] div[attr$="value"]
<div attr="v1 v2"> <div attr="*value*">
div[attr~="v1"] div[attr*="value"]
<div attr="value"> <div attr="VaLuE">
<div attr="value-*"> div[attr="value" i]
div[attr|="value"]
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
[Link] 6/28
1/7/26, 8:23 PM HTML5 and CSS cheat sheet
a:hover { background-color: green }
HTML CSS Animation Tools
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. The added content. The added [Link] element content.
a::after { a::before {
content:" The added content. "; content:" The added content. ";
color: green; color: green;
} }
An underline. An overline.
.underline { .overline {
position: relative; position: relative;
} }
.underline::after { .overline::before {
position: absolute; position: absolute;
content: " "; content: " ";
display: block; display: block;
border-top: 1px solid #999; border-bottom: 1px solid #999;
width: 70%; 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 Aa Aa Aa
[Link] 7/28
1/7/26, 8:23 PM HTML5 and CSS cheat sheet
HTML CSS
Animation
Tools
Aa Aa Aa Aa
1.5em; 150%;
x-large; 24px;
Aa Aa
Aa Aa 1.125em; 112.5%;
large; 18px;
Aa Aa
Aa Aa 1em; 100%;
medium; 16px;
Aa Aa
Aa Aa 0.813em; 81.3%;
small; 13px;
Aa Aa
Aa Aa 0.625em; 62.5%;
x-small; 10px;
Aa Aa
Aa 0.5em; 50%;
8px;
font-weight: Misc font properties
Aa Aa Aa Bb Cc
lighter; 300; font-style: italic;
Aa Aa Aa Bb Cc
normal; 400; font-variant: small-caps;
Aa Aa AVAVAV|AVAVAV|AVAVAV|AVAVAV
font-kerning: none;
bolder; 700;
AVAVAV|AVAVAV|AVAVAV|AVAVAV
font-kerning: normal;
Text and inline elements
text-align: line-height:
abc abc abc abc abc abc abc abc
abc abc abc abc
abc abc abc abc abc abc
left; 0.8em;
abc abc abc abc abc abc abc abc
abc abc abc abc
abc abc abc abc abc abc
center; 1em;
abc abc abc abc abc abc abc abc
abc abc abc abc abc abc
right;
abc abc abc abc
1.5em;
abc abc abc abc
abc abc
justify; abc abc abc abc
abc abc abc abc
abc abc abc abc
[Link] 8/28
1/7/26, 8:23 PM HTML5 and CSS cheat sheet
2em;
HTML CSS Animation Tools
word-spacing: letter-spacing:
abc abc abc abc abc abc
abc abc abc abc abc abc
abc abc abc abc abc abc
0.1em; 0.1em;
abc abc abc abc abc abc
abc abc abc abc abc abc
abc abc abc abc abc abc
0.3em; 0.3em;
abc abc abc abc a b c a b c
abc abc abc abc a b c a b c
abc abc abc abc a b c a b c
0.5em; 0.5em;
abc abc abc abc a b c a b c
abc abc abc abc a b c a b c
abc abc abc abc a b c a b c
1em; 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
base
line-height = height
Inline block without text
top
box base box box middle
baseline; top; middle;
base super base sub
box sub;
super;
bottom
bottom;
50% base
base -50%
50%; -50%;
[Link] 9/28
1/7/26, 8:23 PM HTML5 and CSS cheat sheet
HTML CSS Animation Tools
Lists
list-style:
Adjust list style type, position, and image.
first first 1. first
second second 2. second
third third 3. third
none; circle; decimal;
first a. first i. first
second b. second ii. second
third c. third iii. third
disc; lower-alpha; lower-roman;
A. first I. first i. first
B. second II. second ii. second
C. third III. third iii. third
upper-alpha; upper-roman; inside lower-roman;
i. first first
ii. second second
iii. third third
outside lower-roman; url('...');
Box model
display: box-sizing:
Basic display modes
margin
border
padding
none; content
content-box;
x
y margin
z border
padding
content
block;
border-box;
x y z
inline-block;
xyz
inline;
width:
%-widths are relative to parent entity
100px; 10em; 100%;
50px; 4em; 40%;
[Link] 10/28
1/7/26, 8:23 PM HTML5 and CSS cheat sheet
HTML CSS Animation Tools
20px; 1em; 20%;
8px; 0.5em; 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: padding-right:
20px; 20px;
padding-bottom: 20px;
margin:
Adjacent top and bottom margins may collapse.
[Link] 11/28
1/7/26, 8:23 PM HTML5 and CSS cheat sheet
HTML CSS Animation Tools
4px;
10px;
20px;
4px 0;
10px 0;
20px 0;
0 4px; 0 10px; 0 20px;
Other margins
margin: 0 auto;
margin-top: 20px;
margin-left: margin-right:
20px; 20px;
margin-bottom: 20px;
overflow:
Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, consectetur
consectetur adipiscing elit. Integer adipiscing elit. Integer aliquam leo fringilla
aliquam leo fringilla hendrerit efficitur. hendrerit efficitur. Maecenas bibendum
Maecenas bibendum iaculis purus eget iaculis purus eget placerat. Nunc aliquet
tristique mauris, elementum suscipit ante
scroll;
congue sit amet.
visible;
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
hidden;
Positioning
position: static;
position: relative;
[Link] 12/28
1/7/26, 8:23 PM HTML5 and CSS cheat sheet
HTML CSS Animation Tools
bottom: 10px;
top: 10px;
left: 10px; right: 10px;
position: absolute;
Requires positioned parent element
(relative | absolute | fixed)
↘
Absolute
static static
position static
position position 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; left:10%; right:10%;
top:0; bottom:0; top:10%; bottom:10%;
position: fixed;
Same rules as absolute positioning, but fixed relative to viewport.
viewport
↘
left:0; right:0;
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer aliquam leo fringilla hendrerit efficitur.
Maecenas top:0;
bibendum iaculis purus eget placerat. Nunc aliquet tristique mauris, elementum top:0;
suscipit
ante congue sit amet. Mauris tempus tellus vitae felis volutpat sodales. Vestibulum a luctus neque. Ut
malesuada lectus accumsan nibh laoreet, sit amet hendrerit nisl commodo. Nullam vel ultrices mauris.
Vivamus malesuada auctor mollis. Nulla ultricies nisl rutrum sagittis condimentum. Aliquam sit amet
tempus libero. Aenean iaculis arcu vel sapien pulvinar rhoncus. Etiam pellentesque eu risus vel
euismod. Nullam efficitur euismod arcu, varius rhoncus sem elementum quis. Nunc in placerat orci, sit
amet porttitor
left:0; ex. Nunc varius tempor mattis. Aenean nunc nibh, bibendum vel facilisis vel, right:0;
pellentesque sit
bottom:0; amet mi. Phasellus venenatis venenatis turpis non pretium. Nulla malesuada justo eu
bottom:0;
elit sagittis, egestas aliquam nibh consequat. Vestibulum volutpat magna enim, ut eleifend eros
float:
left;
right;
[Link] 13/28
1/7/26, 8:23 PM HTML5 and CSS cheat sheet
HTML CSS Animation Tools
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.
clear:
right;
Allow an element to avoid being adjacent to a floated element.
float: Lorem ipsum dolor float:
left sit amet, right
consectetur
Lorem ipsum dolor sit amet,
adipiscing elit. Integer aliquam
consectetur adipiscing elit.
leo fringilla hendrerit efficitur.
Integer aliquam leo fringilla
hendrerit efficitur.
clear: left;
float: Lorem ipsum dolor float:
left sit amet, right
consectetur
Lorem ipsum dolor sit amet,
adipiscing elit. Integer aliquam
consectetur adipiscing elit.
leo fringilla hendrerit efficitur.
Integer aliquam leo fringilla
hendrerit efficitur.
clear: right;
float: float:
left right
Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet,
consectetur adipiscing elit. consectetur adipiscing elit.
Integer aliquam leo fringilla Integer aliquam leo fringilla
hendrerit efficitur. hendrerit efficitur.
clear: both;
z-index:
For positioned elements only
20
0;
20
20
20;
20
100
[Link] 14/28
1/7/26, 8:23 PM HTML5 and CSS cheat sheet
100;
HTML CSS Animation Tools
Flexbox containers
display:
Flexbox container mode
flex;
inline-flex;
flex-flow:
Flex direction and wrap
<flex-direction> <flex-wrap>;
flex-direction: flex-wrap:
Direction of main axis Wrap items across lines
1 2 3 3 2 1 1 2 3 4
row; row-reverse; 5 6 7 8
9 10
wrap;
1 3
2 2
3 1 1 2 3 4
column; column-reverse;
nowrap;
9 10
5 6 7 8
1 2 3 4
wrap-reverse;
justify-content:
Justification of items
flex-start;
center;
flex-end;
space-between;
[Link] 15/28
1/7/26, 8:23 PM HTML5 and CSS cheat sheet
HTML CSS Animation Tools
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: flex-shrink: flex-basis:
Item growth multiplier Item shrink multiplier Size of a flex item as the basis for grow and shrink
factors.
0 0 0
abc
0; 0;
content;
1 1 1 1
abc
1; 1;
50px;
10 20 10 20
abc
10; 10;
50%;
99 20 99 20
abc
99; 99;
100%;
align-self:
[Link] 16/28
1/7/26, 8:23 PM HTML5 and CSS cheat sheet
Item-specific cross axis alignment
HTML CSS Animation Tools
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>
3 1 2
.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);
[Link] 17/28
1/7/26, 8:23 PM HTML5 and CSS cheat sheet
HTML CSS Animation
fit Tools 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 1 2 3
left body right
4 5 6
7 8 9
foot
[Link] 18/28
1/7/26, 8:23 PM HTML5 and CSS cheat sheet
"nav nav nav" 1fr
HTML "leftCSS Animation Tools 0
body right" 3fr
"foot foot foot" 1fr "d1 d2 d3" 1fr
/ 1fr 2fr 1fr; "d4 d5 d6" 1fr
"d7 d8 d9" 1fr
". d0 ." 1fr
/ 1fr 1fr 1fr;
nav
side body
"nav nav " 1fr
1fr 2fr
"side body" 3fr
/ 1fr 2fr 1fr;
/ 1fr 2fr;
grid-auto-flow:
Highlighted grid cell has grid position explicitly set.
sparse dense
1 2 3 1 2 2 1 3
4 5 6 3 4 5 4 5 6
6
row; row; row dense;
1 4 3 6 2 4
2 5 1 4 1 5
3 6 2 5 3 6
column; column; 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)
[Link] 19/28
1/7/26, 8:23 PM HTML5 and CSS cheat sheet
Can also name grid area, see css-grid-template
HTML CSS Animation Tools
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 A1 B1
C D A2 B2
table; table-row;
A1 B1 abc A1 B1 def
A2 B2 A2 B2
table-cell; inline-table;
A caption
A1 B1
A2 B2
table-caption;
Table borders
A1 B1 A1 B1
A2 B2 A2 B2
td { table {
border: 2px solid black; border: 2px solid black;
} }
A1 B1 A1 B1
A2 B2 A2 B2
table td + td {
tr {
border-left: 2px solid black;
border: 2px solid black;
}
}
A1 B1
A2 B2
table tr + tr {
[Link] 20/28
1/7/26, 8:23 PM HTML5 and CSS cheat sheet
border-top: 2px solid black;
HTML} CSS Animation Tools
border-collapse: border-spacing:
Requires border-collapse: separate
collapse;
0px;
2px;
separate;
4px;
8px;
caption-side:
Requires display: table-caption
A caption
A caption
bottom;
top;
vertical-align:
Works in table cells. Also works for inline elements.
cd
abc
abc ab
bottom
top; middle; bottom; baseline;
Borders and Shadows
border:
none; 8px groove lightgray;
2px solid black;
8px ridge lightgray;
2px dotted black;
8px inset lightgray;
2px dashed black;
8px outset lightgray;
[Link] 21/28
1/7/26, 8:23 PM HTML5 and CSS cheat sheet
HTML CSS Animation Tools
8px double black;
Border sides
border-top: 3px solid black; border-top: 0;
border-right: 3px solid black;
border-right: 0;
border-bottom: 3px solid black;
border-bottom: 0;
border-left: 3px solid black;
border-left: 0;
border-width: border-radius:
1px; 4px;
8px;
2px;
0px 16px;
3px;
100%;
4px;
box-shadow:
Shadow x and y position
-10px -10px gray; 10px -10px gray;
-5px -5px gray; 5px -5px gray;
-5px 5px gray; 5px 5px gray;
[Link] 22/28
1/7/26, 8:23 PM HTML5 and CSS cheat sheet
-10px 10px gray; 10px 10px gray;
HTML CSS Animation Tools
box-shadow:
Shadow blur and spread
10px 10px gray; 0 0 20px 2px black;
10px 10px 5px gray; 0 0 20px 10px white;
10px 10px 10px gray; inset 0 0 10px 8px gray;
10px 10px 20px gray; 0 0 20px 5px white,
10px 10px 20px gray;
Colors
color:
A A A A
white; #fff; rgb(255, 255, 255); hsl(0, 0%, 100%);
A A A A
black; #000; rgb(0, 0, 0); hsl(0, 0%, 0%);
A A A A
gray; #808080; rgb(128, 128, 128); hsl(0, 0%, 50%);
A A A A
red; #f00; rgb(255, 0, 0); hsl(0, 100%, 50%);
A A A A
green; #008000; rgb(0, 128, 0); hsl(120, 100%, 25%);
A A A A
blue; #00f; rgb(0, 0, 255); hsl(240, 100%, 50%);
color:
Grayscale
A A
#000; #999;
A A
[Link] 23/28
1/7/26, 8:23 PM HTML5 and CSS cheat sheet
HTML CSS Animation Tools
A A
#555; #ccc;
A A
#777; #eee;
background-color:
white; #fff; rgb(255, 255, 255); hsl(0, 0%, 100%);
black; #000; rgb(0, 0, 0); hsl(0, 0%, 0%);
gray; #808080; rgb(128, 128, 128); hsl(0, 0%, 50%);
red; #f00; rgb(255, 0, 0); hsl(0, 0%, 50%);
green; #008000; rgb(0, 128, 0); hsl(120, 100%, 25%);
blue; #00f; rgb(0, 0, 255); hsl(240, 100%, 50%);
background-color:
Grayscale
#000; #999;
#222; #bbb;
#555; #ccc;
#777; #eee;
background-color:
Transparent colors
rgba(255, 0, 0, 0.1); hsla(0, 100%, 50%, 0.1);
rgba(255, 0, 0, 0.2); hsla(0, 100%, 50%, 0.2);
[Link] 24/28
1/7/26, 8:23 PM HTML5 and CSS cheat sheet
HTML CSS Animation Tools
rgba(255, 0, 0, 0.3); hsla(0, 100%, 50%, 0.3);
rgba(255, 0, 0, 0.5); hsla(0, 100%, 50%, 0.5);
rgba(255, 0, 0, 0.7); hsla(0, 100%, 50%, 0.7);
rgba(255, 0, 0, 0.9); hsla(0, 100%, 50%, 0.9);
background-image:
url(...);
background-image: linear-gradient
(to bottom, black, #ccc); (to bottom, red, black);
(to bottom, blue, black); (to right bottom, red, black);
(to bottom, green, black); (to left bottom, red, black);
border-color:
white; #fff; rgb(255, 255, 255); hsl(0, 0%, 100%);
black; #000; rgb(0, 0, 0); hsl(0, 0%, 0%);
gray; #808080; rgb(128, 128, 128); hsl(0, 0%, 50%);
red; #f00; rgb(255, 0, 0); hsl(0, 0%, 50%);
green; #008000; rgb(0, 128, 0); hsl(120, 100%, 25%);
blue; #00f; rgb(0, 0, 255); hsl(240, 100%, 50%);
[Link] 25/28
1/7/26, 8:23 PM HTML5 and CSS cheat sheet
HTML CSS Animation Tools
Transforms
transform: rotate
↑
↑
(-45deg); (0); (45deg);
↑
↑
(-90deg); (90deg);
↑
↑
↑
(-135deg); (180deg); (135deg);
transform:
Rotation in 3D
perspective: 100px;
rotateX(45deg); rotate3d(1, 0, 0, 45deg);
rotateY(45deg); rotate3d(0, 1, 0, 45deg);
↑
rotateZ(45deg); rotate3d(0, 0, 1, 45deg);
transform:
↑ ↑ ↑
scaleX(0.5); scale(0.5, 1); scale3d(0.5, 1, 1);
↑ ↑ ↑
scaleY(0.5); scale(1, 0.5); scale3d(1, 0.5, 1);
↑ ↑ ↑
translateZ(20px); scaleZ(2) scale3d(1, 1, 2)
translateZ(10px); translateZ(10px);
transform: skew
↑
(20deg, 0deg);
↑
(-20deg, 0deg);
[Link] 26/28
1/7/26, 8:23 PM HTML5 and CSS cheat sheet
HTML CSS Animation Tools
↑
(0deg, 20deg);
↑
(0deg, -20deg);
transform: translate
2D translation
translateX(0); translate(0, 0); translate3d(0, 0, 0);
translateX(25px); translate(25px, 0); translate3d(25px, 0, 0);
translateY(25px); translate(0, 25px); translate3d(0, 25px, 0);
translateX(25px) translate(25px, 25px); translate3d(25px, 25px, 0);
translateY(25px);
transform: translate perspective:
3D z-axis translation See this tutorial on 3D transforms.
perspective: 60px; perspective-origin: 300% -200%;
perspective-origin: top left;
FK K
F
1000px; 400px;
translateZ(-25px);
translate3d(0, 0, -25px);
K K
F F
300px;
200px;
translateZ(25px); translate3d(0, 0, 25px);
perspective-origin:
See this tutorial on 3D transforms.
perspective: 400px
Also top, bottom, left, right
FK
50% 50%;
[Link] 27/28
1/7/26, 8:23 PM HTML5 and CSS cheat sheet
HTML FK
CSS300% 200%;
Animation Tools
KF
-300% 200%;
K K
F F
300% -200%; -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;
}
}
[Link] 28/28
You might also like
- Advanced HTML5: Key Concepts and FeaturesNo ratings yetAdvanced HTML5: Key Concepts and Features6 pages
- HTML Basics: Structure, Tags, and UsageNo ratings yetHTML Basics: Structure, Tags, and Usage18 pages
- Session - 5 Introduction To Html/Css AssignmentNo ratings yetSession - 5 Introduction To Html/Css Assignment17 pages
- Understanding HTML5 Features and StructureNo ratings yetUnderstanding HTML5 Features and Structure260 pages
- Understanding HTML5 and SGML RelationshipsNo ratings yetUnderstanding HTML5 and SGML Relationships14 pages
- CSE 154: Web Programming Final Exam "Cheat Sheet" HTML: Tags Used in The SectionNo ratings yetCSE 154: Web Programming Final Exam "Cheat Sheet" HTML: Tags Used in The Section19 pages
- HTML Basics: Structure, Tags, and EditorsNo ratings yetHTML Basics: Structure, Tags, and Editors149 pages
- Understanding HTML Structure and SemanticsNo ratings yetUnderstanding HTML Structure and Semantics52 pages
- HSC XII Computer Science Exam QP & SolutionsNo ratings yetHSC XII Computer Science Exam QP & Solutions15 pages
- Configuring Email Notifications in ServiceNowNo ratings yetConfiguring Email Notifications in ServiceNow20 pages
- Web Development and Design Foundations With HTML5 8th Edition Available Any Format100% (4)Web Development and Design Foundations With HTML5 8th Edition Available Any Format113 pages
- Understanding HTML Frames and FramesetsNo ratings yetUnderstanding HTML Frames and Framesets33 pages
- Comprehensive Guide to Programming and Software DevelopmentNo ratings yetComprehensive Guide to Programming and Software Development15 pages
- XML DTD Design, Architecture and Implementation: Standard Guide ForNo ratings yetXML DTD Design, Architecture and Implementation: Standard Guide For14 pages
- 2023 Web Development Concepts ExplainedNo ratings yet2023 Web Development Concepts Explained30 pages
- Comprehensive Guide to HTML, CSS, and JavaScriptNo ratings yetComprehensive Guide to HTML, CSS, and JavaScript6 pages
- Web Technology Lab: JavaScript CalculatorNo ratings yetWeb Technology Lab: JavaScript Calculator7 pages