5/21/24, 5:39 PM CSS Cheat Sheet - Interactive, not a PDF | HTMLCheatSheet.

com

CSS CheatSheet
Basics Usefu

Syntax CSS Ed
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 How t
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; Prope
input:enabled enabled inputs font-size: 0;
input:focus input has focus height: 0; align-conte
input:in-range value in range visibility: hidden; align-items
input:out-of-range input value out of range } align-self
input:valid input with valid value .clearfix { display: inline-block; } all
input:invalid input with invalid value * html .clearfix { height: 1%; } animation
input:optional no required attribute animation-d
.clearfix { display: block; }
input:required input with requred attribute animation-d
input:read-only with readonly attribute Box model animation-d
input:read-write no readonly attrib. animation-f
div:empty element with no children margin animation-i
p::first-letter first letter in p border animation-n
p::first-line first line in p padding animation-p
p:first-of-type first of some type animation-t
content backface-vi
p:last-of-type last of some type Color
background
p:lang(en) p with en language attribute
Ads
:not(span) element that's not a span background
p:first-child first child of its parent background
p:last-child last child of its parent background
p:nth-child(2) second child of its parent background
p:nth-child(3n+1) nth-child (an + b) formula
Background background
p:nth-last-child(2) second child from behind background
p:nth-of-type(2) second p of its parent Color picke
background
Image URL: https://htmlcheatsheet.com/images/logo-css.png
p:nth-last-of-type(2) ...from behind background
p:only-of-type unique of its parent none color: #1C
background
p:only-child only child of its parent border
Position: backgrou
:root documents root element border-bott
::selection portion selected by user X: 0 border-bott
border: 3p
:target highlight active anchor border-bott
Y: 0 border-bott
Attribute selectors text-shad
border-bott
Repeat: no repeat repeat-x repeat-y border-bott
a[target] links with a target attribute box-shad
a[target="_blank"] links which open in new tab border-colla
Attachment: scroll fixed local border-colo
[title~="chair"] title element containing a word
[class^="chair"] class starts with chair border-imag
Color: border-imag
[class|="chair"] class starts with the chair word D0E4F5 1
border-imag
[class*="chair"] class contains chair Gradi
border-imag
[class$="chair"] class ends with chair
input[type="button"] specified input type border-imag
Box Shadow Preview border-imag
border-left
1C6EA4
border-left-
Right: 5 Light backg. border-left-
border-left-
Middle tra
Down: 5 One line border-radi
background: #D0E4F5 url("https://htmlcheatsheet.com/images/logo-css.png") border-righ
Spread: 5 Preview no-repeat scroll 0 0; border-righ
border-righ
Blur: 5 border-righ
border-spac
Opacity: 1 backgrou
border-style
backgrou
border-top
Inset #144E75
border-top-
backgrou
border-top-
Color: 000000 #144E75
border-top-
Button Generator border-top-
border-top-
-webkit-box-shadow: 5px 5px 15px 5px #000000; border-widt
box-shadow: 5px 5px 15px 5px #000000; Color: bottom
FFFFFF
box-shadow
Size:
Ads
box-sizing
16
caption-sid
Padding: 6 clear
clip
Text Shadow Radius: 10 color
column-cou
Light background Change gradient, shadow, font and border in other panels. column-fill
column-gap
PREVIEW CSS Button
column-rule
column-rule
column-rule
column-rule

https://htmlcheatsheet.com/css/ 1/3
5/21/24, 5:39 PM CSS Cheat Sheet - Interactive, not a PDF | HTMLCheatSheet.com
Right: column-spa
2 column-wid
Down: .myButton { columns
2 content
color: rgb(255, 255, 255); font-size: 16px; line-height: 16px; padding: 6px;
Blur: border-radius: 10px; font-family: Georgia, serif; font-weight: normal; text- counter-inc
2 counter-res
decoration: none; font-style: normal; font-variant: normal; text-transform:
Opacity: b k di li di t(t i ht b(28 110 164) 0% cursor
1 direction
Color: display
1C6EA4 empty-cells
g filter
Flaming Ghost Candy Font Generator flex
Neon Flaming LLLuuuxxx Ghost Ghost
Ghost
Ghost Candy Deep more...
Deep
Deep flex-basis
Lux Deep
LL u x Deep
Light background flex-directio
text-shadow: 2px 2px 2px #1C6EA4; flex-flow
Grumpy wizards make toxic brew for the evil flex-grow
Queen and Jack. flex-shrink
flex-wrap
float
font
Transform @font-face
Font: Georgia font-family
font-size
Scale: 1 1 x
Size: 16 font-size-ad
font-stretch
Rotate: 0 0 deg
Letter spc: 0 font-style
font-variant
X: 0 0 px
Word spc: 0 font-weight
hanging-pu
Y: 0 0 px
Color: 000000 height
justify-cont
Skew X: 0 0 deg
Weight: @keyframe
Normal Bold
leftBorde
Skew Y: 0 0 deg
letter-spaci
Decoration: None Under Over Through line-height
list-style
Style: Normal Unset Italic Oblique list-style-im
Preview list-style-po
Variant: Normal Small caps list-style-ty
margin
Case: none UPPER lower Capital margin-bott
margin-left
margin-righ
font-family: Georgia, serif; margin-top
-moz-transform:none;
-webkit-transform:none;
font-size: 16px; max-heightW
letter-spacing: 2px; max-width
-o-transform:none;
word-spacing: 2px; @media
-ms-transform:none;
color: #000000; min-height
t f
font-weight: normal; min-width
text-decoration: none; nav-down
nav-index
nav-left C
Border Radius nav-right
nav-up Pos
0 0 Media Queries opacity
order
All outline
Syntax outline-colo
border: 2p
outline-offs
@media not|only mediatype and (media feature) {
0 0 outline-styl
CSS Code }
outline-widt
Link external file: overflow
<link rel="stylesheet" media=mediatype and|not|only (media feature href="m
overflow-x
overflow-y
Reset CSS Viewport is 480 pixels or smaller padding
@media screen and (max-width: 480px) { } padding-bo
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre
Ads
padding-lef
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,sect Viewport width smaller OR height smaller padding-rig
body { line-height: 1;} padding-top
@media screen and (max-width: 600px), (max-height: 500px) { page-break
ol,ul { list-style: none;}
blockquote,q { quotes: none;} page-break
page-break
blockquote:before,blockquote:after,q:before,q:after { content: ''; content Print style
@media print { ... }
perspective
table { border-collapse: collapse; border-spacing: 0;}
perspective
position
Night / dark mode quotes
px - em @media (prefers-color-scheme: dark) { ... } resize
right
Media types tab-size
Parent: 0 px table-layout
all, print, screen, speech text-align
desired px: 0 px text-align-la
Media features
text-decora
desired em: 0 em width viewport width text-indent
height viewport height text-overflo
orientation orientation of the viewport text-shadow
aspect-ratio ratio between width & height text-transfo
color number of bits per color top
color-index number of displayable colors transform
monochrome color on greyscale device transform-o
resolution resolution of the device transform-s
scan scanning process of the device transition
grid device is a grid or bitmap transition-d
transition-d
transition-p
transition-ti
unicode-bid
user-select
vertical-alig
visibility
white-space
width
word-break
word-spaci

https://htmlcheatsheet.com/css/ 2/3
5/21/24, 5:39 PM CSS Cheat Sheet - Interactive, not a PDF | HTMLCheatSheet.com
word-wrap
z-index

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

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