Technology
10 minute read

Toptal's Quick and Practical CSS Cheat Sheet

Tomislav (MSc) has spent more than 15 years in full-stack development and data analysis, but geospatial visualizations are his favorite.

Cascading Style Sheets, or CSS for short, is a style sheet language written in a markup language. CSS defines the presentation, look and formatting elements of Web documents, such as the layout, colors and fonts.

CSS syntax is comprehensive, and it is not easy to always know the exact syntax, or know all the available CSS properties and corresponding values. To help CSS developers and designers, Toptal created a quick reference guide and offered it to the community as a free download. The CSS reference guide includes CSS syntax, the most important selectors, properties, sizes and units, and other useful CSS information in a short and informative format. We hope you will find the CSS cheat sheet a valuable resource.

You can also check the Toptal resource pages for additional information on common CSS mistakes, a CSS hiring guide, CSS interview questions and CSS tips and best practices.

Download CSS Cheat Sheet

Click Here To Download CSS Cheat Sheet

CSS Cheat Sheet

Syntax

Box Model

/* Comments */

@media type {

  selector {

    property: value;

  }

}

Note: media type is optional

CSS Box Model

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
margin-right
margin-bottom
margin-left

Selectors

padding

padding-top
padding-right
padding-bottom
padding-left

*

All elements

tag

All tag elements

border

border-top
border-right
border-bottom
border-left

tag *

All elements within tag

tag tag2

tag2 elements within tag

border-color

border-top-color
border-right-color
border-bottom-color
border-left-color

tag, tag2

All tag and tag2 elements

tag > tag2

tag2 is a child of tag

border-style

border-top-style
border-right-style
border-bottom-style
border-left-style

tag + tag2

tag2 preceded by tag

.class

Elements with class ‘class’

border-width

border-top-width
border-right-width
border-bottom-width
border-left-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,
bottom, left

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