Logo

CSS Basics Cheat Sheet

Show more Hide more
Print

Dimensions and appearance

Box model

display:block, inline-block, inline Documentation
width:em, px, % // Width Documentation
heigth:em, px, % // Height Documentation
inline-size:em, px, % // Size depends writing mode,inline Documentation
block-size:em, px, % // Size depends writing mode,block Documentation
writing-mode:horizontal-tb, vertical-rl/lr // Text → ↓ Documentation
padding-top:em, px, % // Space inside element Documentation
padding-right:em, px, % Documentation
padding-bottom:em, px, % Documentation
padding-left:em, px, % Documentation
padding:em, px // Shorthand: top(,right),bottom(,left) Documentation
margin-top:em, px, % // Space outside element Documentation
margin-right:em, px, % Documentation
margin-bottom:em, px, % Documentation
margin-left:em, px, % Documentation
margin:em, px // Shorthand: top(,right),bottom(,left) Documentation
box-sizing:border-box/content-box // w/h incl. pad./bord. Documentation

Content

content:'', 'text', url(), etc. Documentation

Background & border & shadow

background-color:purple Documentation
background-image:url('img.png'), linear-gradient(dir,from,to) Documentation
background-origin:border, padding, content-box Documentation
background-position:top, bottom, left, right, center, px, em, % Documentation
background-repeat:no-repeat, repeat, repeat-x/y, space, round Documentation
background-size:200px 90px, cover, contain, 30%, etc. Documentation
background:blue // Shorthand: color img orig size repeat Documentation
border-width:px, em, etc. // top(,right),bottom(,left) Documentation
border-style:solid, dotted, none // top,right,bottom,left Documentation
border-color:red #ff0000 (color) // top,right,bottom,left Documentation
border:1px solid red // Shorthand: width style color Documentation
border-*:* top/right/bottom/left // e.g. border-top Documentation
border-*-**:** width/style/color // e.g. border-top-width Documentation
box-shadow:2px 2px 4px #000 // x y blur-radius color Documentation

Overflow

overflow-x:hidden/visible/scroll/auto Documentation
overflow-y:hidden/visible/scroll/auto Documentation
overflow:hidden/visible/scroll/auto // Shorthand: x & y Documentation

Floats

float:left, right, none // Preferably use flex/grid Documentation

Positioning

position:relative, absolute, sticky Documentation
top/bottom/left/right:0, 4em, 10%, 20px, etc. Documentation

Table

table-layout:auto, fixed Documentation
border-collapse:collapse, separate Documentation

Styling text

Fonts

color:purple, 37474f etc Documentation
font-family:Georgia, serif/Helvetiva, sans-serif Documentation
font-size:em, px, %, etc. Documentation
font-style:normal, italic Documentation
font-weight:normal, bold, 400, 700, etc. Documentation
font-variant:common-ligatures small-caps tabular-nums Documentation
font-stretch:condensed, expanded // ultra-,extra-,semi- Documentation
text-transform:uppercase, lowercase, capitalize, etc. Documentation
text-decoration:none, underline, underline wavy green, etc. Documentation
text-shadow:1px 1px 2px #000 // x y blur-radius color Documentation

Text layout

text-align:left, center, right, justify Documentation
text-align-last:left, center, right, justify Documentation
text-indent:0, 2em, 30% // x y blur-radius color Documentation
text-overflow:ellipsis, clip, etc. // x y blur-radius color Documentation
text-orientation:mixed, upright, sideways-right, sideways, etc. Documentation
line-height:1.6, 2em, 150%, 24px Documentation
letter-spacing:0.3em, 1px, etc. Documentation
word-spacing:1em, 2rem, 4px, 120%, etc. Documentation
white-space:normal, nowrap, pre-line, break-spaces, etc. Documentation
word-break:normal, break-all, break-word, etc. Documentation
direction:ltr, rtl Documentation
hyphens:none, manual, auto // Use ­ for hyphen – Documentation
line-break:auto, anywhere, normal, loose, etc. Documentation
overflow-wrap:normal, break-word, anywhere Documentation
writing-mode:horizontal-tb, vertical-rl, vertical-lr Documentation

Styling links

Link states

a:hover { … }Apply styling // :visited,:active etc. Documentation

Styling lists

Lists

list-style-type:none, disc, circle, square, decimal Documentation
list-style-position:inside, outside Documentation
list-style-image:none, url() Documentation
etc. // See overview Documentation

Pseudo-elements

Overview

::before { … }content: … // Inside element on start Documentation
::after { … }content: … // Inside element on end Documentation
etc. // See overview Documentation

Pseudo-classes

Tree-structural

:root { … }Apply styling/variables // Root of doc. Documentation
:first-child { … }Apply styling // First el. of siblings Documentation
:last-child { … }Apply styling // Last el. of siblings Documentation
:nth-child(2) { … }Apply styling // Pattern matched el. Documentation
:first-of-type { … }Apply styling // First type el. of siblings Documentation
:last-of-type { … }Apply styling // Last type el. of siblings Documentation
:nth-of-type(2) { … }Apply styling // Pattern type matched el. Documentation
etc. // See overview Documentation

Functional

:is():is(section, article) h1 Documentation
:where():where(section, article) a [overridable] Documentation
:not()p:not(.warn) Documentation
:has()label:has(input[type=radio]) Documentation
etc. // See overview Documentation

Input

:enabled { … }Apply styling // Enabled state Documentation
:disabled { … }Apply styling // Disabled state Documentation
:checked { … }Apply styling // Checked state (checkbox/radio) Documentation
:required { … }Apply styling // Required state Documentation
:optional { … }Apply styling // Optional state Documentation
:valid { … }Apply styling // Valid state Documentation
:invalid { … }Apply styling // Invalid state Documentation
etc. // See overview Documentation

Colors

Functions

color-mix()color-mix(in srgb, red, #FFF 50%) // Lighten Documentation
color-mix(in srgb, red, #000 50%) // Darken Documentation

Units

Values

Absolute length unitpx Documentation
Relative length unitsem, rem, vw, vh Documentation

CSS Flex & Grid

See Flex & Grid Cheat sheet