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

About the author

Tomislav Bacinger, Croatia
member since May 1, 2014
Tomislav is a cartographer and geospatial software engineer with extensive experience in data manipulation and creation of immersive interactive map visualizations and charts. He has excellent knowledge of various GIS technologies and strong experience in design and development of web and mobile applications. Maps and visualizations are his passion. [click to continue...]
Hiring? Meet the Top 10 Freelance CSS Developers for Hire in December 2016

Comments

Andrei Smirnov
Good job!
Aderito
Great resource !!
Constantin
What about vertical alignment? :)
Trade Southwest
Kudos. Can't get too much more simpler than two pages. Was rather large file size for a pdf... not sure what caused this but it is transferable as a text file.
Mina Luke
This one is a complete guide for alignment https://css-tricks.com/centering-css-complete-guide/
Vedran Aberle Tokić
w00t... will there be more of this?.. been aching for a good bootstrap cheatsheet :)
Artem Mezhenin
There are two "max-height" in the "Dimensions" block.
Agustín Ullmer
You miss 'letter-spacing' in Text category. Great resource!
Luis Felipe Lopez G.
Nice cheatsheet, I'll save it.
comments powered by Disqus
Subscribe
The #1 Blog for Engineers
Get the latest content first.
No spam. Just great engineering and design posts.
The #1 Blog for Engineers
Get the latest content first.
Thank you for subscribing!
You can edit your subscription preferences here.
Trending articles
Relevant technologies
About the author
Tomislav Bacinger
JavaScript Developer
Tomislav is a cartographer and geospatial software engineer with extensive experience in data manipulation and creation of immersive interactive map visualizations and charts. He has excellent knowledge of various GIS technologies and strong experience in design and development of web and mobile applications. Maps and visualizations are his passion.