Web Front-end10 minute read

Toptal's Quick and Practical CSS Cheat Sheet

As software engineers, we’re always searching for the best tools and guides that will help us to be more productive while spending less time searching and reading long technical specifications.

Today, Toptal is pleased to present an entirely new resource to the community as a free download: a CSS Cheat Sheet. Toptal’s CSS Cheat Sheet is a quick CSS reference guide, and includes CSS syntax, the most important selectors, properties, sizes, and units, and other useful CSS details, all in a short, easily understandable format.


Toptalauthors are vetted experts in their fields and write on topics in which they have demonstrated experience. All of our content is peer reviewed and validated by Toptal experts in the same field.

As software engineers, we’re always searching for the best tools and guides that will help us to be more productive while spending less time searching and reading long technical specifications.

Today, Toptal is pleased to present an entirely new resource to the community as a free download: a CSS Cheat Sheet. Toptal’s CSS Cheat Sheet is a quick CSS reference guide, and includes CSS syntax, the most important selectors, properties, sizes, and units, and other useful CSS details, all in a short, easily understandable format.


Toptalauthors are vetted experts in their fields and write on topics in which they have demonstrated experience. All of our content is peer reviewed and validated by Toptal experts in the same field.
Tomislav Bacinger

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

Share

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. We also offer CSS3 Maker, a visual tool for rapidly generating CSS snippets.

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

Hire a Toptal expert on this topic.
Hire Now

About the author

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

World-class articles, delivered weekly.

Subscription implies consent to our privacy policy

World-class articles, delivered weekly.

Subscription implies consent to our privacy policy

Join the Toptal® community.