4/17/24, 2:25 PM CSS Cheat Sheet - Interactive, not a PDF | HTMLCheatSheet.

com

CSS CheatSheet
Basics

Syntax
Selectors
selector{
* all elements property: value;
div all div tags property2: value2;
div,p all divs and paragraphs }
div p paragraphs inside divs
div > p all p tags, one level deep in div Include external css file
div + p p tags immediately after div <link rel="stylesheet" type="text/css" href="/style.css" />
div ~ p p tags preceded by div
.classname all elements with class
Internal styles
#idname element with ID
div.classname divs with certain classname <style type="text/css">
div#idname div with certain ID div { color: #444;}
#idname * all elements inside #idname </style>

Pseudo classes Inline styles

a:link link in normal state <tag style="property: value"> </tag>
a:active link in clicked state
a:hover link with mouse over it Clearfix
a:visited visited link
p::after{content:"yo";} add content after p .clearfix:after {
p::before add content before p clear: both;
input:checked checked inputs content: " ";
input:disabled disabled inputs display: block;
input:enabled enabled inputs font-size: 0;
input:focus input has focus height: 0; al
input:in-range value in range visibility: hidden; al
input:out-of-range input value out of range } al
input:valid input with valid value .clearfix { display: inline-block; } al
input:invalid input with invalid value * html .clearfix { height: 1%; } an
input:optional no required attribute .clearfix { display: block; } an
input:required input with requred attribute an
input:read-only with readonly attribute Box model an
input:read-write no readonly attrib. an
div:empty element with no children margin an
p::first-letter first letter in p border an
p::first-line first line in p padding an
p:first-of-type first of some type an
content
p:last-of-type last of some type ba
p:lang(en) p with en language attribute ba
Ads
:not(span) element that's not a span ba
p:first-child first child of its parent ba
p:last-child last child of its parent ba
p:nth-child(2) second child of its parent ba
p:nth-child(3n+1) nth-child (an + b) formula Background ba
p:nth-last-child(2) second child from behind ba
p:nth-of-type(2) second p of its parent Co
ba
Image URL: https://htmlcheatsheet.com/images/logo-css.png
p:nth-last-of-type(2) ...from behind ba
p:only-of-type unique of its parent none ba
p:only-child only child of its parent Position: bo
:root documents root element bo
::selection portion selected by user X: 0 bo
:target highlight active anchor bo
Y: 0 bo
Attribute selectors bo
Repeat: no repeat repeat-x repeat-y
a[target] links with a target attribute bo
a[target="_blank"] links which open in new tab bo
Attachment: scroll fixed local bo
[title~="chair"] title element containing a word
[class^="chair"] class starts with chair bo
Color: bo
[class|="chair"] class starts with the chair word D0E4F5 1
[class*="chair"] class contains chair bo
[class$="chair"] class ends with chair bo
input[type="button"] specified input type bo
Box Shadow Preview bo
bo
1
bo
Right: 5 Light backg. bo
bo
Down: 5 One line bo
background: #D0E4F5 url("https://htmlcheatsheet.com/images/logo-css.png") no- bo
Spread: 5 Preview repeat scroll 0 0; bo
bo
Blur: 5 bo
bo
Opacity: 1 bo
bo
Inset bo
bo
Color: 000000 bo
bo
Button Generator bo
-webkit-box-shadow: 5px 5px 15px 5px #000000; bo
box-shadow: 5px 5px 15px 5px #000000; Color: bo
FFFFFF
bo
Size: bo
16 ca
Padding: cl
6 cl
Text Shadow Radius: co
10

https://htmlcheatsheet.com/css/ 1/3
4/17/24, 2:25 PM CSS Cheat Sheet - Interactive, not a PDF | HTMLCheatSheet.com
Change gradient, shadow, font and border in other panels. co
Light background co
co
PREVIEW CSS Button co
co
co
Right: 2 co
co
Down: 2 co
co
.myButton {
Blur: 2 co
color: rgb(255, 255, 255); font-size: 16px; line-height: 16px; padding: 6px;
co
border-radius: 10px; font-family: Georgia, serif; font-weight: normal; text-
Opacity: 1 co
decoration: none; font-style: normal; font-variant: normal; text-transform: none;
cu
b k di li di t(t i ht b(28 110 164) 0% b(35 136
Color: 1C6EA4 di
di
g em
Flaming Ghost Candy fil
Neon Flaming LLuuxx Ghost
Ghost
Ghost Candy Deep
Deep more...
L u x Ghost Deep
Deep Font Generator fle
LLuuxx Deep
Deep
fle
text-shadow: 2px 2px 2px #1C6EA4; fle
Light background
fle
Grumpy wizards make toxic brew for the evil Queen fle
and Jack. fle
fle
flo
fo
Transform @
Font: Georgia fo
fo
Scale: 1 1 x fo
Size: 16
fo
Rotate: 0 0 deg fo
Letter spc: 0
fo
X: 0 0 px fo
Word spc: 0
ha
Y: 0 0 px he
Color: 000000
ju
Skew X: 0 0 deg @
Weight: Normal Bold le
Skew Y: 0 0 deg le
Decoration: None Under Over Through lin
lis
Style: Normal Unset Italic Oblique lis
Preview lis
Variant: Normal Small caps lis
m
Case: m
none UPPER lower Capital
m
m
font-family: Georgia, serif; m
-moz-transform:none;
font-size: 16px; m
-webkit-transform:none;
letter-spacing: 2px; m
-o-transform:none; word-spacing: 2px;
-ms-transform:none; @
color: #000000; m
t f
font-weight: normal; m
text-decoration: none; na
na
na
Border Radius na
na
op
0 0 Media Queries or
All ou
Syntax ou
ou
@media not|only mediatype and (media feature) { ou
0 0 CSS Code } ou
Link external file: ov
<link rel="stylesheet" media=mediatype and|not|only (media feature href="myst ov
ov
Viewport is 480 pixels or smaller pa
Reset CSS pa
@media screen and (max-width: 480px) { }
pa
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a
pa
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section Viewport width smaller OR height smaller pa
body { line-height: 1;} @media screen and (max-width: 600px), (max-height: 500px) { pa
ol,ul { list-style: none;} pa
blockquote,q { quotes: none;} pa
Print style
blockquote:before,blockquote:after,q:before,q:after { content: ''; content: n pe
table { border-collapse: collapse; border-spacing: 0;} @media print { ... } pe
po
Night / dark mode qu
@media (prefers-color-scheme: dark) { ... } re
px - em rig
ta
Media types
Parent: 0 px ta
all, print, screen, speech te
desired px: 0 px te
Media features
te
desired em: 0 em width viewport width te
height viewport height te
orientation orientation of the viewport te
aspect-ratio ratio between width & height te
color number of bits per color to
color-index number of displayable colors tra
monochrome color on greyscale device tra
resolution resolution of the device tra

https://htmlcheatsheet.com/css/ 2/3
4/17/24, 2:25 PM CSS Cheat Sheet - Interactive, not a PDF | HTMLCheatSheet.com
scan scanning process of the device tra
grid device is a grid or bitmap tra
tra
tra
tra
un
us
ve
vi
w
w
w
w
w
z-

HTML Cheat Sheet is using cookies. | PDF | Terms and Conditions, Privacy Policy
© HTMLCheatSheet.com

https://htmlcheatsheet.com/css/ 3/3