30 Handy Cheat Sheets and Reference Guides for Web Professionals
6. XHTML Cheat Sheet v1.03
This XHTML cheat sheet is excellent for XHTML coders. Along with many basic attributes, this two-page grid includes references that even experienced web professionals would find useful.
Three types of elements are defined in this cheat sheet: block, inline and table elements. The miscellaneous section includes 22 additional elements. Each row contains the name, description and attributes of each of the elements available for use.
More references are on the side, including %attrs, %focus, input types, link types, deprecated elements, HTML ASCII entities and more. Being so detailed, this is a great tool for anyone who uses XHTML frequently.
Download the XHTML Cheat Sheet v1.03
7. CSS Cheat Sheet
The CSS Cheat Sheet is a two-page PDF and is the most detailed CSS reference guide available. It contains a lot of information and is great as a printed reference.
Sections you may find useful are the ones on the CSS box model, selectors, pseudo-elements and pseudo-classes, colors, text properties and layout properties.
8. Blueprint Framework and Blueprint CSS Cheat Sheet
The Blueprint CSS framework is a great shortcut for designers. The developers of this tool explain:
“Blueprint is a CSS framework that aims to cut down on your development time. It gives you a solid foundation to build your project on top of, with an easy-to-use grid, sensible typography, useful plug-ins and even a style sheet for printing.”
To download the blueprint framework, go to BlueprintCSS.org
Paired with the framework is the Blueprint CSS cheat sheet to help shorten development time. The cheat sheet is well laid out, nicely color-coded and detailed. It works in sync with the framework and was made with designers in mind, featuring a visual representation of a 950 pixel-wide grid system, a detailed list of Blueprint features and call and syntax examples.
Download the Blueprint CSS Cheat Sheet.
9. Mixing Typefaces
This PDF is an excellent reference for designers who don’t want to spend a lot of time figuring out whether two or more fonts will work well together. This tool enables designers to choose the perfect typography combination.
Although the cheat sheet was created in 1992, most of the widely used web fonts are present. As the image above shows, a list of fonts is repeated along the top and left side.
A number from 1 to 3 appears where each pair intersects. 1 means that the two fonts are compatible, 2 means that with proper implementation the two fonts could work well together, and 3 means that they will clash.
Download the Mixing Typefaces PDF
10. Common Fonts for all Versions of Windows, and Mac Equivalents
While this guide isn’t exhaustive, it’s a perfect quick reference tool for choosing the typography for a new website. All 18 font groups listed are web safe and cross-browser compatible.
All of the fonts are grouped together with syntax: Windows version, Mac version, font family. The bottom of the page has very specific information on using fonts on different operating systems and browsers and even has a screenshot of each scenario.
Although this web page is already well known in the web designer community, we felt it was important to include on this list.
Download Common Fonts for all Versions of Windows, and Mac Equivalents
