The Ultimate CSS Cheat Sheet

selector {
    property: value;
}

/* Element Selector: Targets all <p> elements */
p { color: pink }
 
/* Class Selector: Targets all elements with class "classname" */
.classname { color: pink }
 
/* ID Selector: Targets the element with ID "idname" */
#idname { color: pink }
 
/* Attribute Selector: Targets elements with the specified attribute */
[attribute] { color: pink }
 
/* Descendant Selector: Targets <p> elements inside <div> elements */
div p { color: pink }
 
/* Child Selector: Targets <p> elements that are direct children of <div> elements */
div > p { color: pink }
 
/* Adjacent Sibling Selector: Targets <p> elements immediately following an <h1> element */
h1 + p { color: pink }
 
/* General Sibling Selector: Targets <p> elements that follow <h1> elements (not necessarily immediately) */
h1 ~ p { color: pink }
 
/* Universal Selector: Targets all elements */
* { color: pink }
 
/* Grouping Selector: Targets all elements specified (comma-separated) */
h1, p, .classname { color: pink }
 
/* Pseudo-class Selector: Targets elements in a specific state (e.g., :hover) */
a:hover { color: pink }
 
/* Pseudo-element Selector: Targets a specific part of an element (e.g., ::before) */
p::before { color: pink }
 
/* Attribute Selector with Value: Targets elements with a specific attribute value */
input[type="text"] { color: pink }

/* This is a CSS comment */

width: auto | <length> | <percentage> | max-content | min-content | fit-content | fill-available
height: auto | <length> | <percentage> | max-content | min-content | fit-content | fill-available
min-width: <length> | <percentage> | auto | max-content | min-content | fit-content | fill-available
min-height: <length> | <percentage> | auto | max-content | min-content | fit-content | fill-available
max-width: <length> | <percentage> | none | max-content | min-content | fit-content | fill-available
max-height: <length> | <percentage> | none | max-content | min-content | fit-content | fill-available

margin: <length> | <percentage> | auto
margin-top: <length> | <percentage> | auto
margin-right: <length> | <percentage> | auto
margin-bottom: <length> | <percentage> | auto
margin-left: <length> | <percentage> | auto

padding: <length> | <percentage>
padding-top: <length> | <percentage>
padding-right: <length> | <percentage>
padding-bottom: <length> | <percentage>
padding-left: <length> | <percentage>

border: <border-width> <border-style> <border-color>
border-width: thin | medium | thick | <length>
border-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
border-color: <color>
border-top: <border-width> <border-style> <border-color>
border-right: <border-width> <border-style> <border-color>
border-bottom: <border-width> <border-style> <border-color>
border-left: <border-width> <border-style> <border-color>
border-radius: <length> | <percentage>
border-image: <'border-image-source'> || <'border-image-slice'> [ / <'border-image-width'> | / <'border-image-width'>? / <'border-image-outset'> ]? || <'border-image-repeat'>

box-sizing: content-box | border-box;

font-family: <family-name> | <generic-family>
font-size: <absolute-size> | <relative-size> | <length> | <percentage>
font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
font-style: normal | italic | oblique
font-variant: normal | small-caps
line-height: normal | <number> | <length> | <percentage>

text-align: left | right | center | justify | justify-all
text-decoration: none | underline | overline | line-through
text-transform: none | capitalize | uppercase | lowercase | full-width
text-indent: <length> | <percentage>
letter-spacing: normal | <length>
word-spacing: normal | <length>
white-space: normal | nowrap | pre | pre-wrap | pre-line
word-break: normal | break-all | keep-all | break-word
word-wrap: normal | break-word
text-overflow: clip | ellipsis | <string>

color: <color>;

background-color: <color>
background-image: url(<url>) | none
background-repeat: repeat | repeat-x | repeat-y | no-repeat
background-position: left | center | right | top | bottom | <percentage> | <length>
background-size: auto | cover | contain | <length> | <percentage>
background-attachment: scroll | fixed | local
background-clip: border-box | padding-box | content-box | text
background-origin: border-box | padding-box | content-box

display: inline | block | inline-block | flex | inline-flex | grid | inline-grid
  | none;

position: static | relative | absolute | fixed | sticky
top: <length> | <percentage> | auto
right: <length> | <percentage> | auto
bottom: <length> | <percentage> | auto
left: <length> | <percentage> | auto
z-index: auto | <integer>

float: left | right | none;

clear: none | left | right | both;

flex-direction: row | row-reverse | column | column-reverse
flex-wrap: nowrap | wrap | wrap-reverse
flex-flow: <flex-direction> || <flex-wrap>
flex: <flex-grow> <flex-shrink> <flex-basis>
flex-grow: <number>
flex-shrink: <number>
flex-basis: auto | <length> | <percentage>
align-items: stretch | flex-start | flex-end | center | baseline
align-self: auto | stretch | flex-start | flex-end | center | baseline
align-content: flex-start | flex-end | center | space-between | space-around | stretch
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly

grid-template-columns: <track-size> ... | <line-name> <track-size> ...
grid-template-rows: <track-size> ... | <line-name> <track-size> ...
grid-template-areas: <grid-area-name> | . | none | ...
grid-column: <start> / <end>
grid-row: <start> / <end>
grid-column-gap: <length> | <percentage>
grid-row-gap: <length> | <percentage>
grid-gap: <length> | <percentage>
grid-auto-columns: <track-size> | auto
grid-auto-rows: <track-size> | auto
grid-auto-flow: row | column | dense

transition: <property> <duration> <timing-function> <delay>
transition-property: <property> | all
transition-duration: <time>
transition-timing-function: ease | linear | ease-in | ease-out | ease-in-out | <cubic-bezier>
transition-delay: <time>

animation: <name> <duration> <timing-function> <delay> <iteration-count> <direction> <fill-mode> <play-state>
animation-name: <keyframes> | none
animation-duration: <time>
animation-timing-function: ease | linear | ease-in | ease-out | ease-in-out | <cubic-bezier>
animation-delay: <time>
animation-iteration-count: <number> | infinite
animation-direction: normal | reverse | alternate | alternate-reverse
animation-fill-mode: none | forwa | backward | both
animation-play-state: running | paused

@media <media-feature> {
  /* CSS rules */
}
@media (min-width: <length>) {
  /* CSS rules for devices with a minimum width */
}
@media (max-width: <length>) {
  /* CSS rules for devices with a maximum width */
}
@media (orientation: portrait | landscape) {
  /* CSS rules for portrait or landscape orientation */
}

<meta name="viewport" content="width=device-width, initial-scale=1" />

:root {
  --main-bg-color: #f0f0f0;
}
.element {
  background-color: var(--main-bg-color);
}

clip-path: <shape> | polygon(<points>) | circle(<radius> at <position>) |
  ellipse(<radius-x> <radius-y> at <position>);

object-fit: fill | contain | cover | none | scale-down;

transform: <transform-function> ...
transform-origin: <length> | <percentage>

filter: none | <filter-function>...;

outline: <outline-width> <outline-style> <outline-color>
outline-width: thin | medium | thick | <length>
outline-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
outline-color: <color>
outline-offset: <length>

resize: none | both | horizontal | vertical;

visibility: visible | hidden | collapse;

clip: rect(<top> <right> <bottom> <left>);

will-change: auto | <property>...;

grid-template-columns: <track-size> ... | <line-name> <track-size> ...
grid-template-rows: <track-size> ... | <line-name> <track-size> ...
grid-template-areas: <grid-area-name> | . | none | ...