Selectors
Universal Selector
* {}
ID Selector
#id {}
Class Selector.class {}
Type Selectorh1, h2 ,h3 {}
Adjacent Sibling Selectorh1 + p {}
Child Selectorul > li {}
General Sibling Selectorh1 ~ p {}
Descendant Selectorp a {}
Attribute Selectordiv[attribute="SomeValue"] {}
Pseudo Selectors & Elements
Mouse Over Selectora:hover {}
Active Link Selectora:active {}
Focus Selectorinput:focus {}
Visited Links Selectora:visited {}
Link Selector.class:link {}
Checked elements selectorinput:checked {}
Disabled elements selectorinput:disabled {}
Enabled elements selectorinput:enabled {}
Not a Specified Element Selector:not(p) {}
First Line Selectorp::first-line {}
First Letter Selectorp::first-letter {}
First Child Selectorp:first-child {}
Last Child Selectorp:last-child {}
Only Child Selectorp:only-child {}
:nth-child Selectorp:nth-child() {}
First Element of its Parent Selectorp:first-of-type {}
Elements that have no Children Selectorp:empty {}
Before Element.class::before {}
After Element.class::after {}
Text Styling
Font stylefont-style: normal | italic | oblique
Font Variantfont-variant: normal | small-caps
Font Weightfont-weight: normal | bold | bolder | lighter | 100 - 900
Vertical Alignmentvertical-align: baseline | 10px | sub | super | top | text-top | middle | bottom | text-bottom | initial
Text Transformtext-transform: capitalise | lowercase | uppercase
Font Sizefont-size: 12px | 0.8em | 80%
Space Between Charactersletter-spacing: normal | 4px
Line Heightline-height: normal | 3em | 34%
Horizontal Alignmenttext-align: left | right | center | justify
Text Align Lasttext-align-last: auto | left | right | center | justify | start | end | initial | inherit
Text Decorationtext-decoration: none | underline | overline | line-through
Indent First Linetext-indent: 25px
Font Familyfont-family: 'Open Sans', sans-serif
Text Justifytext-justify: auto | inter-word | inter-character | none | initial | inherit
Text Overflowtext-overflow: clip | ellipsis | string | initial | inherit
Text Shadowtext-shadow: h-shadow v-shadow blur-radius color | none | initial | inherit
Position
Positionposition: static | relative | absolute | fixed | sticky
Position Propertiestop | right | bottom | left
Float Elementfloat: left | right | none
Clear Floating Elementsclear: none | left | right | both
Z Indexz-index: 3 | auto | inherit
Background
Background Imagebackground-image: url()
Background Repeatbackground-repeat: repeat-x | repeat-y | repeat | space | round | no-repeat
Background Attachmentbackground-attachment: scroll | fixed | local | initial | inherit
Background Colorbackground-color: #2AA9E0
Background Positionbackground-position: top | right | bottom | left | center
Box Properties
Box Sizingbox-sizing: border-box | content-box
Marginmargin: 2px 4px 6px 8px | 0 auto
Paddingpadding: 2px 4px 6px 8px
Border Colorborder-color: #2AA9E0
Border Styleborder-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
Border Widthborder-width: 10px
List Styling
List Typelist-style-type: disc | circle | square | none
List Positionlist-style-position: inside | outside
List Imagelist-style-image: url()
Flexbox
Flex Directionflex-direction: row | row-reverse | column | column-reverse
Flex Wrapflex-wrap: nowrap | wrap | wrap-reverse
Justify Contentjustify-content: flex-start | flex-end | center | space-between | space-around | space-evenly
Align Itemsalign-items: flex-start | flex-end | center | baseline | stretch
Align Contentalign-content: flex-start | flex-end | center | space-between | space-around | stretch
Orderorder: 0
Flex Growflex-grow: 0
Flex Shrinkflex-shrink: 1
Flex Basisflex-basis: 3px | auto
Align Selfalign-self: auto | flex-start | flex-end | center | baseline | stretch
CSS Grid
Grid Template Columnsgrid-template-columns: 40px 50px auto 50px 40px
Grid Template Rowsgrid-template-rows: 25% 100px auto
Grid Template Areasgrid-template-areas: "a b c" | none
Grid Templategrid-template: "a a a" 20% "b b b" auto | 100px 1fr / 50px 1fr
Grid Column Gapgrid-column-gap: 10px
Grid Row Gapgrid-row-gap: 10px
Justify Itemsjustify-items: start | end | center | stretch
Align Itemsalign-items: start | end | center | stretch
Justify Contentjustify-content: flex-start | flex-end | center | space-between | space-around | space-evenly
Align Contentalign-content: flex-start | flex-end | center | space-between | space-around | stretch
Grid Auto Columnsgrid-auto-columns: 100px | max-content | min-content
Grid Auto Rowsgrid-auto-rows: 100px | max-content | min-content
Grid Auto Flowgrid-auto-flow: row | column | row dense | column dense
Grid Column Startgrid-column-start: 2 | areaname | span 2 | span areaname | auto
Grid Column Endgrid-column-end: 2 | areaname | span 2 | span areaname | auto
Grid Row Startgrid-row-start: 2 | areaname | span 2 | span areaname | auto
Grid Row Endgrid-row-end: 2 | areaname | span 2 | span areaname | auto
Grid Columngrid-column: 3 / span 2
Grid Rowgrid-row: 3 / span 2
Justify Selfjustify-self: start | end | center | stretch
Align Selfalign-self: start | end | center | stretch
Dynamic Content
CSS Variable--variable-name: value
Variable Usagevar(--variable-name)
Counter Resetcounter-reset: name-of-counter
Counter Incrementcounter-increment: name-of-counter
Counter Dynamic Valuecontent: counter(name-of-counter)
Attribute Dynamic Valuecontent: attr(name-of-attribute)
