Complete CSS Cheat Sheet (with new CSS3 tags)

Complete-CSS-Cheat-Sheet-PDF Using CSS day-to-day? Whether you’re a super savvy web developer or just someone who wants to learn web development, this CSS cheat sheet should help you out.

I originally made it for myself, but eventually wanted to share this on WebsiteSetup.

So here you have it – a total of 29 pages, structured into different paragraphs: backgrounds, borders, fonts, texts, Column, Colours, Grid positioning and a lot more (including UI).

And oh! I’ve also listed out all the new CSS3 tags/divs, too.

Enjoy!

If you wish to download .pdf, click here

CSS Cheat sheet in .pdf

CSS Cheat Sheet as an image

CSS Cheat Sheet P1

CSS Cheat Sheet P2

CSS Cheat Sheet P3

css-cheat-sheet-p4

If you wish to download image files, click here

Need more help?

I’ve also written this HTML Guide for Beginners and put together this HTML cheat sheet.
If you’re interested in alternative ways of building a website (i.e. using WordPress), feel free to check out my website building guide with WordPress.

Want to Ask a Question or Leave a Comment?

Ask a question

Ask Me Anything

30 comments

Leave a Reply Cancel Reply

Natalie

June 29, 2020 at 7:29 pm

Thank you very much for creating and compiling all these cheat sheets!

Benny Goodman

May 3, 2020 at 6:21 am

Thank you for all you do and all you share.

Ilya Streltsyn

July 30, 2019 at 3:58 pm

Hello Nick! You did a great work at composing this cheat sheet. Unfortunately, it seems that some of the sources you used were seriously outdated or not completely reliable, so there are some things in this cheat sheet that are not exactly complete or correct. Here are some of them I noticed:

background-image: CSS gradients are also values of this property. Maybe it’s worth to add them?
background-attachment: maybe it’s worth to mention the new `local` keyword?
background-clip: according to the CSS specs, length, %, and no-clip are not valid options for this property
border: wouldn’t it worth to mention that is also resets background-image?
display: there is a missing hyphen in some values (inline-block, table-header-group). Also, maybe it’s worth to add other modern values – (inline-)flex, (inline-)grid, and contents?
marquee-*: does it really belong to Box Model? Also, this CSS module is abandoned and deprecated in favor of CSS animations.
rotation: it should probably be placed in Transforms section, together with other separate transform properties.
font-family: its valid keywords are either generic names like serif, sans-serif, monospace, fantasy etc., or names of specific fonts like “helvetica”
letter-spacing: missing hyphen
word-wrap: valid values are “normal” and “nowrap”, not length & %
Grid Positioning: this module is actually outdated (as well as Template Layout module). Their modern (and well-supported) replacement is CSS Grid Layout
Template Layout: same as above. Also, “box-*” properties actually belong to the old draft of the CSS Flexbox module, not Template Layout.
:nth-last-of-type: missing hyphen
::before and ::after: these pseudo-elements insert content before/after the *content* of the element, not the element itself (i.e. inside the element, as its virtual first/last child)
px unit: in CSS, is defined as absolute unit equal to 1/96 in and has (almost) nothing to do with “pixels of viewing device”

I wish your cheat sheet to become a really useful tool for CSS beginners, and hope that good modern resources like MDN and the “official definition of CSS” from W3C, which includes the list of all CSS properties currently in use (https://www.w3.org/TR/css/#properties), will help you to fix these issues!

Nick Schäferhoff

November 19, 2019 at 12:02 pm

Thanks for your detailed feedback! We have made changes accordingly.

Reply

Laura R

June 17, 2019 at 2:10 pm

Thank you Nick! This was exactly what I needed and helps fit my learning style. It’s nice to see the layout and also to be able to refer back to it as needed.
Faith in humanity restored. 🙂