http://simplecheatsheet.com/tag/css-cheat-sheet/

1. CSS Cheat Sheet
Cascading Style Sheets (CSS) is a style sheet language used for describing the
presentation of a document written in a markup language like HTML. CSS Cheat
Sheets are a reference for CSS goodness.
by lam
󰅂Selectors
Universal Selector
* {}
ID Selector
#id {}
Class Selector
.class {}
Type Selector
h1, h2 ,h3 {}
Adjacent Sibling Selector
h1 + p {}
Child Selector
ul > li {}
General Sibling Selector
h1 ~ p {}
Descendant Selector
p a {}
Attribute Selector
div[attribute="SomeValu
e"] {}
󰅂
Pseudo Selectors
& Elements
Mouse Over Selector
a:hover {}
Visited Links Selector
a:visited {}
Disabled elements selector
input:disabled {}
First Line Selector
p::first-line {}
Last Child Selector
p:last-child {}
First Element of its Parent
Selector
p:first-of-type {}
After Element
.class::after {}
Active Link Selector
a:active {}
Link Selector
.class:link {}
Enabled elements selector
input:enabled {}
First Letter Selector
p::first-letter {}
󰅂Text Styling
Font style
font-style: normal | it
alic | oblique
Vertical Alignment
vertical-align: baselin
e | 10px | sub | super
| top | text-top | midd
le | bottom | text-bott
om | initial
Space Between Characters
letter-spacing: normal
| 4px
Text Align Last
text-align-last: auto
| left | right | cente
r | justify | start | e
nd | initial | inherit
Font Family
font-family: 'Open San
s', sans-serif
Text Shadow
text-shadow: h-shadow v
-shadow blur-radius col
or | none | initial | i
nherit
Font Variant
font-variant: normal |
small-caps
Text Transform
text-transform: capital
ise | lowercase | upper
󰅂Position
Position
position: static | rela
tive | absolute | fixe
d | sticky
󰏪
󰅢

2. Only Child Selector
p:only-child {}
Elements that have no
Children Selector
p:empty {}
Focus Selector
input:focus {}
Checked elements selector
input:checked {}
Not a Speci ed Element
Selector
:not(p) {}
First Child Selector
p:first-child {}
:nth-child Selector
p:nth-child() {}
Before Element
.class::before {}
case
Line Height
line-height: normal | 3
em | 34%
Text Decoration
text-decoration: none
| underline | overline
| line-through
Text Justify
text-justify: auto | in
ter-word | inter-charac
ter | none | initial |
inherit
Font Weight
font-weight: normal | b
old | bolder | lighter
| 100 - 900
Font Size
font-size: 12px | 0.8e
m | 80%
Horizontal Alignment
text-align: left | righ
t | center | justify
Indent First Line
text-indent: 25px
Text Over ow
text-overflow: clip | e
llipsis | string | init
ial | inherit
Clear Floating Elements
clear: none | left | ri
ght | both
Position Properties
top | right | bottom |
left
Z Index
z-index: 3 | auto | inh
erit
Float Element
float: left | right | n
one
󰅂Background
Background Image
background-image: url()
Background Color
background-color: #2AA9
E0
Background Repeat
background-repeat: repe
at-x | repeat-y | repea
t | space | round | no-
repeat
Background Attachment
background-attachment:
scroll | fixed | local
| initial | inherit
Background Position
background-position: to
p | right | bottom | le
ft | center
󰅂Box Properties
Box Sizing
box-sizing: border-box
| content-box
Border Color
border-color: #2AA9E0
Margin
margin: 2px 4px 6px 8p
x | 0 auto
Border Style
border-style: none | hi
dden | dotted | dashed
| solid | double | groo
ve | ridge | inset | ou
tset
Padding
󰅂List Styling
List Type
list-style-type: disc
| circle | square | non
e
List Position
list-style-position: in
side | outside
󰅂
Flex Direction
flex-direction: row | r
ow-reverse | column | c
olumn-reverse
󰏪
󰅢

3. padding: 2px 4px 6px 8p
x
Border Width
border-width: 10px
List Image
list-style-image: url()
Flex Wrap
flex-wrap: nowrap | wra
p | wrap-reverse
Justify Content
justify-content: flex-s
tart | flex-end | cente
r | space-between | spa
ce-around | space-evenl
y
Align Items
align-items: flex-star
t | flex-end | center
| baseline | stretch
Align Content
align-content: flex-sta
rt | flex-end | center
| space-between | space
-around | stretch
Order
order: 0
Flex Grow
flex-grow: 0
Flex Shrink
flex-shrink: 1
Flex Basis
flex-basis: 3px | auto
Align Self
align-self: auto | flex
-start | flex-end | cen
ter | baseline | stretc
h
󰅂CSS Grid
Grid Template Columns
grid-template-columns:
40px 50px auto 50px 40p
x
Grid Template Rows
grid-template-rows: 2
5% 100px auto
Grid Template Areas
grid-template-areas:
"a b c" | none
Grid Template
grid-template: "a a a"
20% "b b b" auto | 100p
x 1fr / 50px 1fr
Grid Column Gap
grid-column-gap: 10px
Grid Row Gap
grid-row-gap: 10px
Justify Items
justify-items: start |
end | center | stretch
Align Items
align-items: start | en
d | center | stretch
Justify Content
justify-content: flex-s
tart | flex-end | cente
r | space-between | spa
ce-around | space-evenl
y
Align Content
align-content: flex-sta
󰅂Dynamic Content
CSS Variable
--variable-name: value
Variable Usage
var(--variable-name)
Counter Reset
counter-reset: name-of-
counter
Counter Increment
counter-increment: name
-of-counter
Counter Dynamic Value
content: counter(name-o
f-counter)
Attribute Dynamic Value
content: attr(name-of-a
ttribute)
󰏪
󰅢

4. rt | flex-end | center
| space-between | space
-around | stretch
Grid Auto Columns
grid-auto-columns: 100p
x | max-content | min-c
ontent
Grid Auto Rows
grid-auto-rows: 100px
| max-content | min-con
tent
Grid Auto Flow
grid-auto-flow: row | c
olumn | row dense | col
umn dense
Grid Column Start
grid-column-start: 2 |
areaname | span 2 | spa
n areaname | auto
Grid Column End
grid-column-end: 2 | ar
eaname | span 2 | span
areaname | auto
Grid Row Start
grid-row-start: 2 | are
aname | span 2 | span a
reaname | auto
Grid Row End
grid-row-end: 2 | arean
ame | span 2 | span are
aname | auto
Grid Column
grid-column: 3 / span 2
Grid Row
grid-row: 3 / span 2
Justify Self
justify-self: start | e
nd | center | stretch
󰏪
󰅢

5. CheatSheetMaker.com SimpleCheatSheet.com
Align Self
align-self: start | en
d | center | stretch
󰏪
󰅢