CSS Cheat Sheets

CSS is a big part of front-end design for the web. Designers can utilize CSS to design the entire presentation for a document written in HTML. An attractive feature of CSS is it’s ability to control the design and layout of multiple pages. It gives you the power to completely change your colors and layout for your entire website without even touching each individual page.

Browser support for CSS has never been better, even Microsoft’s browsers are somewhat standards compliant these days. Back in 2004, Mozilla Firefox was challenging Internet Explorer and currently Google Chrome has become more popular than both Firefox and Internet Explorer. In addition to those shifts in the desktop space, mobile devices now
vastly outnumber traditional desktop computers. The focus has definitely shifted towards mobile web browsers and mobile applications. Developers must accommodate the users and provide a seamless user experience no matter the device being used. CSS is the answer!

CSS has been around over twenty years now and during that time it has matured a lot. In this post I’m going to share 10 of my favorite CSS references and cheat sheets. I hope you find these resources useful and they help to increase your productivity. All of the resources listed below are completely FREE!

1. Code Unminifier – The first resource on the list is our Code Unminifier. Have you ever been working on a design that includes minified CSS or JavaScript libraries? If you have then you know how difficult it can be to read and work with minified code. You can quickly unminify your CSS, JavaScript and HTML markup using our Code Unminifier, I recommend adding this one to your bookmarks and/or speed dial.

2. Codepen.io – Codepen.io is an amazing online CSS/HTML/JS editor with live preview and embedding capabilities.

3. Media Queries – You can easily target mobile phones, tablet devices and desktop computers using the example media queries below:

The above examples are merely scratching the surface with media queries. For more information on this powerful technique, check out the Mozilla Developer Network media queries page, CSSMediaQueries.com, CSS-Tricks Media Queries for Standard Devices and W3Schools.com Media Queries page.

4. Flexbox – Check out ‘A Complete Guide to Flexbox‘ on Chris Coyier’s CSS-Tricks.com website for a useful guide on harnessing the power of the CSS flexbox layout module.

5. WordPress CSS Cheat Sheet – Gary Fox has put together a nice WordPress CSS Cheat Sheet.

6. CSS Almanac – Another valuable resource from CSS-Tricks.com is the CSS Almanac, a thorough reference of CSS properties and selectors that’s frequently updated.

7. 22 Creative CSS Hover Effects – 22 Cool and Creative CSS Hover Effects complete with demos.

8. Responsive Grid System – Responsive Grid System allows you to easily generate a responsive layout with two to twelve columns.

9. Responsify.it – The Responsify.it generates responsive layouts, includes an editor with preview and the ability to define breakpoints and more!

10. Can I Use – CanIUse.com is great for quickly determining the browser support of your CSS.