Cascading Style Sheets, or CSS in short, is a style sheet language used within markup languages. It dictates how web documents are presented visually, including their layout, color schemes, and font choices.
Given the complexity of CSS syntax, it’s challenging to memorize every rule and available property. To assist CSS developers and designers, Toptal has compiled a concise reference guide, free for anyone to download. This CSS guide encompasses essential syntax, key selectors, properties, size and unit information, and other valuable CSS knowledge, all presented clearly and succinctly. We believe this CSS cheat sheet will prove to be a useful asset.
For further information, explore Toptal’s resource pages covering frequent CSS errors, a guide for hiring CSS professionals, CSS interview questions, and best practices and tips. Additionally, we provide CSS3 Maker, a visual tool designed for quick generation of CSS code snippets.
Click Here To Download CSS Cheat Sheet
CSS Cheat Sheet
Syntax | Box Model | |||
/* Comments */ @media type { selector { property: value; } } Note: media type is optional |  | |||
Inline Style <tag style="property: value;"> | ||||
Embedded Style <head> <style type="text/css"> selector { property: value; } </style> </head> | ||||
External Style Sheet <head> <link rel="stylesheet" type="text/css" href="style.css" /> </head> | Boxes | |||
margin | margin-top | |||
Selectors | padding | padding-top | ||
* | All elements | |||
tag | All tag elements | border | border-top | |
tag * | All elements within tag | |||
tag tag2 | tag2 elements within tag | border-color | border-top-color | |
tag, tag2 | All tag and tag2 elements | |||
tag > tag2 | tag2 is a child of tag | border-style | border-top-style | |
tag + tag2 | tag2 preceded by tag | |||
.class | Elements with class ‘class’ | border-width | border-top-width | |
tag.class | All tags with class ‘class’ | |||
#id | Element with id ‘id’ | Size and colors | ||
tag#id | Tag with id ‘id’ | Relative sizes | em | rem | ex | ch vw | vh | vmin | vmax | % | |
Pseudo-selectors | ||||
:active | Adds style to active element | Absolute sizes | cm | mm | in px | pt | pc | |
:after | Adds content after element | |||
:before | Ads content before element | Colors | Hex #ff00ff | |
:first-child | Adds style to first child | RGB rgb(255,0,255) | ||
:first-letter | Adds style to first character | Positioning | ||
:first-line | Adds style to first line | position | absolute | fixed | relative | static | inherit | |
:focus | Adds style to focused element | |||
:hover | Adds style when mouse is over | float | left | right | none | inherit | |
:link | Adds style to unvisited link | |||
:visited | Adds style to visited link | top, right, | Sets the offset from the edge | |
Text | ||||
font-family | Specifies the font family | clear | left | right | both | none | inherit | |
font-size | Specifies the font size | |||
font-style | normal | italic | oblique | inherit | display | Specifies element placing in the document flow | |
font-variant | normal | small-caps | inherit | overflow | visible | hidden | scroll | auto | inherit | |
font -weight | normal | bold | bolder | lighter | int (100- 900) | inherit | |||
visibility | visible | hidden | collapse | inherit | |||
color | Sets the color of text | |||
line-height | normal | int | % | inherit | z-index | auto | int | inherit | |
text-align | left | right | center | justify | inherit | Dimensions | ||
height | auto | int | % | inherit | |||
text- decoration | none | underline | overline | line-through | blink | inherit | max-height | none | int | % | inherit | |
max-width | none | int | % | inherit | |||
text-indent | int | % | inherit | min-height | int | % | inherit | |
text- transform | none | capitalize | uppercase | lowercase | inherit | min-width | int | % | inherit | |
width | auto | int | % | inherit | |||
vertical -align | int | % | baseline | sub | super | top | text-top middle | bottom | text-bottom | inherit | Other | ||
background | Format: background (color) (image) (repeat) (position) | |||
white -space | normal | nowrap | pre | pre-line | pre-wrap| inherit | |||
cursor | Set the type of cursor | |||
word-spacing | normal | length | inherit | quotes | Set type of quotation marks | |