html-css-cheat-sheet

A simple, curated HTML5 and CSS cheat sheet.

Viewing the cheat sheet

Just open html-css-cheat-sheet.html in your browser. There are no external dependencies.

Features

Visual examples show you exactly how specific values of properties will display. Less guesswork.
Inline styles are used for the specific style properties being demonstrated, but not for container elements or scaffolding. This makes it very easy to use the browser's inspector to see exactly how the style is applied and on which element to achieve the desired presentation.
Property name headings describe the CSS property, and the specific visual examples have property values underneath.
Coverage of the latest standards including flexbox and native CSS grid layout.
Coverage of keyframe animations, transitions, and use of the popular library animate.css.
Uses responsive design and should view well on mobile devices, tablets, and large screens.

Not a tutorial

There are plenty of great resources to learn HTML and CSS. This cheat sheet doesn't attempt to teach everything from scratch. It is a refresher and visual assist for those who already understand HTML/CSS.

This cheat sheet doesn't cover JavaScript. Consider this tutorial, or this other one.

License

MIT.

Contributions

Pull requests, bug reports, and suggestions are welcome. I'll generally try to respond to issues quickly, though this is a personal project and I can make no guarantees about responsiveness.