Skip to content

/html-css-cheat-sheet

A simple, curated HTML and CSS cheat sheet. Work in progress.
  1. HTML 91.0%
  2. CSS 9.0%
Branch: master
Find File
Clone or download

Clone with HTTPS

Use Git or checkout with SVN using the web URL.

Open in Desktop Download ZIP

Launching GitHub Desktop...

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop...

If nothing happens, download GitHub Desktop and try again.

Launching Xcode...

If nothing happens, download Xcode and try again.

Launching Visual Studio...

If nothing happens, download the GitHub extension for Visual Studio and try again.

Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
LICENSE Create LICENSE Oct 25, 2017
README.md
_config.yml
animate.css Add nav bar, adjust links. May 23, 2017
animation.html Add simple matrix tool Mar 16, 2018
fixed-position-example.html Use utf-8 encoding for consistency across browsers. Fixes Safari bugs… Aug 11, 2017
github.svg Add github link, update "open in new tab" example to avoid vuln, upda… Oct 25, 2017
html-css-cheat-sheet.html Add simple matrix tool Mar 16, 2018
style.css Add padding to pull header below nav Oct 25, 2017
tools.html

README.md

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.

You can’t perform that action at this time.