CSS Cheat Sheet
A reference for CSS goodness.
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="SomeValue"] {}Pseudo Selectors & Elements
Mouse Over Selector
a:hover {}Active Link Selector
a:active {}Focus Selector
input:focus {}Visited Links Selector
a:visited {}Link Selector
.class:link {}Checked elements selector
input:checked {}Disabled elements selector
input:disabled {}Enabled elements selector
input:enabled {}Not a Specified Element Selector
:not(p) {}First Line Selector
p::first-line {}First Letter Selector
p::first-letter {}First Child Selector
p:first-child {}Last Child Selector
p:last-child {}Only Child Selector
p:only-child {}:nth-child Selector
p:nth-child() {}First Element of its Parent Selector
p:first-of-type {}Elements that have no Children Selector
p:empty {}Before Element
.class::before {}After Element
.class::after {}Text Styling
Font style
font-style: normal | italic | obliqueFont Variant
font-variant: normal | small-capsFont Weight
font-weight: normal | bold | bolder | lighter | 100 - 900Vertical Alignment
vertical-align: baseline | 10px | sub | super | top | text-top | middle | bottom | text-bottom | initialText Transform
text-transform: capitalise | lowercase | uppercaseFont Size
font-size: 12px | 0.8em | 80%Space Between Characters
letter-spacing: normal | 4pxLine Height
line-height: normal | 3em | 34%Horizontal Alignment
text-align: left | right | center | justifyText Align Last
text-align-last: auto | left | right | center | justify | start | end | initial | inheritText Decoration
text-decoration: none | underline | overline | line-throughIndent First Line
text-indent: 25pxFont Family
font-family: 'Open Sans', sans-serifText Justify
text-justify: auto | inter-word | inter-character | none | initial | inheritText Overflow
text-overflow: clip | ellipsis | string | initial | inheritText Shadow
text-shadow: h-shadow v-shadow blur-radius color | none | initial | inheritPosition
Position
position: static | relative | absolute | fixed | stickyPosition Properties
top | right | bottom | leftFloat Element
float: left | right | noneClear Floating Elements
clear: none | left | right | bothZ Index
z-index: 3 | auto | inheritBackground
Background Image
background-image: url()Background Repeat
background-repeat: repeat-x | repeat-y | repeat | space | round | no-repeatBackground Attachment
background-attachment: scroll | fixed | local | initial | inheritBackground Color
background-color: #2AA9E0Background Position
background-position: top | right | bottom | left | centerBox Properties
Box Sizing
box-sizing: border-box | content-boxMargin
margin: 2px 4px 6px 8px | 0 autoPadding
padding: 2px 4px 6px 8pxBorder Color
border-color: #2AA9E0Border Style
border-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outsetBorder Width
border-width: 10pxList Styling
List Type
list-style-type: disc | circle | square | noneList Position
list-style-position: inside | outsideList Image
list-style-image: url()Flexbox
Flex Direction
flex-direction: row | row-reverse | column | column-reverseFlex Wrap
flex-wrap: nowrap | wrap | wrap-reverseJustify Content
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenlyAlign Items
align-items: flex-start | flex-end | center | baseline | stretchAlign Content
align-content: flex-start | flex-end | center | space-between | space-around | stretchOrder
order: 0Flex Grow
flex-grow: 0Flex Shrink
flex-shrink: 1Flex Basis
flex-basis: 3px | autoAlign Self
align-self: auto | flex-start | flex-end | center | baseline | stretchCSS Grid
Grid Template Columns
grid-template-columns: 40px 50px auto 50px 40pxGrid Template Rows
grid-template-rows: 25% 100px autoGrid Template Areas
grid-template-areas: "a b c" | noneGrid Template
grid-template: "a a a" 20% "b b b" auto | 100px 1fr / 50px 1frGrid Column Gap
grid-column-gap: 10pxGrid Row Gap
grid-row-gap: 10pxJustify Items
justify-items: start | end | center | stretchAlign Items
align-items: start | end | center | stretchJustify Content
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenlyAlign Content
align-content: flex-start | flex-end | center | space-between | space-around | stretchGrid Auto Columns
grid-auto-columns: 100px | max-content | min-contentGrid Auto Rows
grid-auto-rows: 100px | max-content | min-contentGrid Auto Flow
grid-auto-flow: row | column | row dense | column denseGrid Column Start
grid-column-start: 2 | areaname | span 2 | span areaname | autoGrid Column End
grid-column-end: 2 | areaname | span 2 | span areaname | autoGrid Row Start
grid-row-start: 2 | areaname | span 2 | span areaname | autoGrid Row End
grid-row-end: 2 | areaname | span 2 | span areaname | autoGrid Column
grid-column: 3 / span 2Grid Row
grid-row: 3 / span 2Justify Self
justify-self: start | end | center | stretchAlign Self
align-self: start | end | center | stretchDynamic Content
CSS Variable
--variable-name: valueVariable Usage
var(--variable-name)Counter Reset
counter-reset: name-of-counterCounter Increment
counter-increment: name-of-counterCounter Dynamic Value
content: counter(name-of-counter)Attribute Dynamic Value
content: attr(name-of-attribute)