CSS Selectors Cheat Sheet

In CSS, selectors are patterns used to select the element(s) you want to style.

* {}Universal Selector
#id {}ID Selector
.class {}Class Selector
h1, h2 ,h3 {}Type Selector
h1 + p {}Adjacent Sibling Selector
ul > li {}Child Selector
h1 ~ p {}General Sibling Selector
p a {}Descendant Selector
div[attribute="SomeValue"] {}Attribute Selector

CSS Pseudo Selectors & Elements

A CSS pseudo-element is a keyword added to a selector that lets you style a specific part of the selected element(s).

a:hover {}Mouse Over Selector
a:active {}Active Link Selector
input:focus {}Focus Selector
a:visited {}Visited Links Selector
.class:link {}Link Selector
input:checked {}Checked elements selector
input:disabled {}Disabled elements selector
input:enabled {}Enabled elements selector
:not(p) {}Not a Specified Element Selector
p::first-line {}First Line Selector
p::first-letter {}First Letter Selector
p:first-child {}First Child Selector
p:last-child {}Last Child Selector
p:only-child {}Only Child Selector
p:nth-child() {}:nth-child Selector
p:first-of-type {}First Element of its Parent Selector
p:empty {}Elements that have no Children Selector
.class::before {}Before Element
.class::after {}After Element

CSS List Styling Cheat Sheet

In HTML, there are two main types of lists:

  • unordered lists (<ul>) – the list items are marked with bullets
  • ordered lists (<ol>) – the list items are marked with numbers or letters

The CSS list properties allow you to:

  • Set different list item markers for ordered lists
  • Set different list item markers for unordered lists
  • Set an image as the list item marker
  • Add background colors to lists and list items
list-style-type: disc | circle | square | noneList Type
list-style-position: inside | outsideList Position
list-style-image: url()List Image

CSS Background Cheat Sheet

The background shorthand CSS property sets all background style properties at once, such as color, image, origin and size, or repeat method.

background-image: url()Background Image
background-repeat: repeat-x | repeat-y | repeat | space | round | no-repeatBackground Repeat
background-attachment: scroll | fixed | local | initial | inheritBackground Attachment
background-color: #2AA9E0Background Color
background-position: top | right | bottom | left | centerBackground Position

CSS Text Styling Cheat Sheet

This text is styled with some of the text formatting properties. The heading uses the text-align, text-transform, and color properties.

font-style: normal | italic | obliqueFont style
font-variant: normal | small-capsFont Variant
font-weight: normal | bold | bolder | lighter | 100 - 900Font Weight
vertical-align: baseline | 10px | sub | super | top | text-top | middle | bottom | text-bottom | initialVertical Alignment
text-transform: capitalise | lowercase | uppercaseText Transform
font-size: 12px | 0.8em | 80%Font Size
letter-spacing: normal | 4pxSpace Between Characters
line-height: normal | 3em | 34%Line Height
text-align: left | right | center | justifyHorizontal Alignment
text-align-last: auto | left | right | center | justify | start | end | initial | inheritText Align Last
text-decoration: none | underline | overline | line-throughText Decoration
text-indent: 25pxIndent First Line
font-family: 'Open Sans', sans-serifFont Family
text-justify: auto | inter-word | inter-character | none | initial | inheritText Justify
text-overflow: clip | ellipsis | string | initial | inheritText Overflow
text-shadow: h-shadow v-shadow blur-radius color | none | initial | inheritText Shadow

CSS Grid Cheat Sheet

The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning.

grid-template-columns: 40px 50px auto 50px 40pxGrid Template Columns
grid-template-rows: 25% 100px autoGrid Template Rows
grid-template-areas: "a b c" | noneGrid Template Areas
grid-template: "a a a" 20% "b b b" auto | 100px 1fr / 50px 1frGrid Template
grid-column-gap: 10pxGrid Column Gap
grid-row-gap: 10pxGrid Row Gap
justify-items: start | end | center | stretchJustify Items
align-items: start | end | center | stretchAlign Items
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenlyJustify Content
align-content: flex-start | flex-end | center | space-between | space-around | stretchAlign Content
grid-auto-columns: 100px | max-content | min-contentGrid Auto Columns
grid-auto-rows: 100px | max-content | min-contentGrid Auto Rows
grid-auto-flow: row | column | row dense | column denseGrid Auto Flow
grid-column-start: 2 | areaname | span 2 | span areaname | autoGrid Column Start
grid-column-end: 2 | areaname | span 2 | span areaname | autoGrid Column End
grid-row-start: 2 | areaname | span 2 | span areaname | autoGrid Row Start
grid-row-end: 2 | areaname | span 2 | span areaname | autoGrid Row End
grid-column: 3 / span 2Grid Column
grid-row: 3 / span 2Grid Row
justify-self: start | end | center | stretchJustify Self
align-self: start | end | center | stretchAlign Self

CSS Box Properties Cheat Sheet

The CSS box model is essentially a box that wraps around every HTML element.

box-sizing: border-box | content-boxBox Sizing
margin: 2px 4px 6px 8px | 0 autoMargin
padding: 2px 4px 6px 8pxPadding
border-color: #2AA9E0Border Color
border-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outsetBorder Style
border-width: 10pxBorder Width

CSS Position Cheat Sheet

The position property specifies the type of positioning method used for an element (static, relative, fixed, absolute or sticky).

position: static | relative | absolute | fixed | stickyPosition
top | right | bottom | leftPosition Properties
float: left | right | noneFloat Element
clear: none | left | right | bothClear Floating Elements
z-index: 3 | auto | inheritIndex

CSS Dynamic Content Cheat Sheet

Attribute Dynamic Valuecontent: attr(name-of-attribute)

--variable-name: valueCSS Variable
var(--variable-name)Variable Usage
counter-reset: name-of-counterCounter Reset
counter-increment: name-of-counterCounter Increment
content: counter(name-of-counter)Counter Dynamic Value

CSS Flexbox Cheat Sheet

Before the Flexbox Layout module, there were four layout modes:

  • Block, for sections in a webpage
  • Inline, for text
  • Table, for two-dimensional table data
  • Positioned, for explicit position of an element

The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without using float or positioning.

flex-direction: row | row-reverse | column | column-reverseFlex Direction
flex-wrap: nowrap | wrap | wrap-reverseFlex Wrap
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenlyJustify Content
align-items: flex-start | flex-end | center | baseline | stretchAlign Items
align-content: flex-start | flex-end | center | space-between | space-around | stretchAlign Content
order: 0Order
flex-grow: 0Flex Grow
flex-shrink: 1Flex Shrink
flex-basis: 3px | autoFlex Basis
align-self: auto | flex-start | flex-end | center | baseline | stretchAlign Self