Best Free HTML & CSS Cheat Sheets for Web Designers
Developers often use HTML and CSS Cheatsheet during the workflow. It is pretty hard to remember each and every element of CSS or HTML so keeping a reference is always good. Cheat sheets are the best reference aid for your workflow.
These cheats contain the fundamental elements like HTML tags, CSS values, and properties. The advantage is that you will get all the essential elements at a glance. There are thousands of cheat sheets are available on the internet, we have picked the best among them.
HTML Cheat Sheets
20. HTML5 New Tags
This is a small cheat sheet containing the information about the new tags as well as non-supported tags.
19. HTML Cheat-Sheet for Beginners
We would highly recommend this cheat sheet to the beginners. Here you will find the cheat sheets in PNG format.
18. Periodic Table of HTML5 Elements
The table shows all valid elements in HTML5 specification. They are colored and grouped according to content-model. The red color signifies that the item has complex requirements.
17. HTML and CSS Cheat Sheets (Infographic)

16.HTML Color Codes

15. CSS Cheat Sheet (JPEG, PDF)

14. CSS Cheat Sheet Infographic

13. CSS3 Animation Cheat Sheet

12. CSS3, Media Queries Cheat Sheet

11. CSS2 and CSS3 Help Sheets (PDF)

10. CSS3 Animation Cheat Sheet

9. CSS Grid Cheat Sheet

8. HTML5 Element Flowchart
A flowchart sectioning HTML5 elements. It will help you better understand where to put opening and closing tags.

7. Canvas Cheat Sheet
Here you will find canvas element, 2D context, colors, styles, shadows, texts rectangles, transformation, line style and pixel manipulation.
6. OverAPI HTML
Although this cheat sheet looks fancy, it is quite simple to understand. It consists of numerous elements, including basic tags, form/table, formatting and HTTP status returned. Clicking on each element will take you to the new page that describes the element (the one you’ve clicked) along with the example.
5. WordPress CSS Cheat Sheet
You might be familiar with WordPress – it’s a state-of-the-art publishing platform with a focus on web standards, aesthetics, and usability. The cheat sheet contains details of its blog info, list, dropdown, post, comment, author, trackback and link manager tags/
4. CSS Click Chart
CSS click chart provides dozens on example code to manipulate your elements, for example, code for box-sizing, adding text shadow, keyframe animations, gradients, transforms and much more. It also gives you live demonstration and browser support information.
3. Flexbox
The Flexbox Layout (flexible box) module offers a more efficient way to lay out, align and distribute space among items present in a container, even if their size is dynamic or not known. This page gives a detail on how to implement these flexible boxes.
2. Mega CSS Cheat Sheet
This along, detailed CSS cheat sheet of total 29 pages, available in PDF and PNG format. You can treat it as a small book that comes with a neat table of content. All elements like backgrounds, fonts, texts, grid positioning, etc. are organized into different chapters to provide better readability.
1. Comprehensive CSS3 Cheat Sheet
This is an ultimate cheat sheet including all important CSS3 tags. It is designed as an eye-catching infographic that is available in both PNG and PDF format.
© 2021 www.focusoncode.com