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.