CSS Cheat Sheet

A quick go to guide for CSS goodness. Checkout the pretty version.

Contributing

If you have a bug to report about the pretty CSS Cheat Sheet or something to add onto the CSS Cheat Sheet follow the contribution guidelines.

CSSCS Nav

Selectors

Universal Selector * {}

Type Selector h1, h2 ,h3 {}

Child Selector ul > li {}

Descendant Selector p a {}

Class Selector .class {}

ID Selector #id {}

Adjacent Sibling Selector h1 + p {}

General Sibling Selector h1 ~ p {}

Attribute Selector [attribute="SomeValue"] {}

Pseudo Selectors

Mouse Over Selector a:hover {}

Active Link Selector a:active {}

Focus Selector input:focus {}

Visited Links Selector a:visited {}

Link Selector .class:link {}

First Line Selector p::first-line {}

First Letter Selector p::first-letter {}

First Child Selector p:first-child {}

Last Child Selector p:last-child {}

:nth-child Selector p:nth-child() {}

First Element of its Parent Selector p:first-of-type {}

Checked elements selector input:checked {}

Disabled elements selector input:disabled {}

Enabled elements selector input:enabled {}

Elements that have no Children Selector (including text nodes) p:empty {}

Not a Specified Element Selector :not(p) {}

Font Styling

Font style font-style: normal | italic | oblique

Font Variant font-variant: normal | small-caps

Font Weight font-weight: normal | bold | bolder | lighter | 100 - 900

Font Size font-size: 12px | 0.8em | 80%

Text Transform text-transform: capitalise | lowercase | uppercase

Space Between Characters letter-spacing: normal | 4px

Line Height line-height: normal | 3em | 34%

Horizontal Alignment text-align: left | right | center | justify

Text Decoration text-decoration: none | underline | overline | line-through

Indent First Line text-indent: 25px

Font Family font-family: 'Open Sans', sans-serif

Position

Position position: static | relative | absolute | fixed | sticky

Position Properties top | right | bottom | left

Float Element float: left | right | none

Clear Floating Elements clear: none | left | right | both

Z Index z-index: 3 | auto | inherit

Background

Background Image background-image: url()

Background Color background-color: #2AA9E0

Background Position background-position: top | right | bottom | left | center

Background Attachment background-attachment: scroll | fixed | local | initial | inherit

Box properties

Box Sizing box-sizing: border-box | content-box

Margin margin: 2px 4px 6px 8px | 0 auto

Padding padding: 2px 4px 6px 8px

Border Color border-color: #2AA9E0

Border Width border-width: 10px

List Styling

List Type list-style-type: disc | circle | square | none

List Position list-style-position: inside | outside

List Image list-style-image: url()

Flexbox

Flex Direction flex-direction: row | row-reverse | column | column-reverse

Flex Wrap flex-wrap: nowrap | wrap | wrap-reverse

Align Items align-items: flex-start | flex-end | center | baseline | stretch

Order order: 0

Flex Grow flex-grow: 0

Flex Shrink flex-shrink: 1

Flex Basis flex-basis: 3px | auto

CSS Grid

Grid Template Columns grid-template-columns: 40px 50px auto 50px 40px

Grid Template Rows grid-template-rows: 25% 100px auto

Grid Template Areas lgrid-template-areas: "a b c" | none

Grid Template grid-template: "a a a" 20% "b b b" auto | 100px 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 | end | center | stretch

Grid Auto Columns grid-auto-columns: 100px | max-content | min-content

Grid Auto Rows grid-auto-rows: 100px | max-content | min-content

Grid Auto Flow grid-auto-flow: row | column | row dense | column dense

Grid Column Start grid-column-start: 2 | areaname | span 2 | span areaname | auto

Grid Column End grid-column-end: 2 | areaname | span 2 | span areaname | auto

Grid Row Start grid-row-start: 2 | areaname | span 2 | span areaname | auto

Grid Row End grid-row-end: 2 | areaname | span 2 | span areaname | auto

Grid Column grid-column: 3 / span 2

Grid Row grid-row: 3 / span 2

Justify Self justify-self: start | end | center | stretch

Align Self align-self: start | end | center | stretch

Credits

Built & Maintained by Adam Marsden

License

Creative Commons Attribution-ShareAlike

cyrke / css-cheat-sheet Goto Github PK

css-cheat-sheet's Introduction