CSS References, Cheat Sheets, Conversion Tables and Short Codes

Whether you’re a CSS guru or a CSS novice you will always need some help, some resources, some tutorials, some references and, of course, some cheat sheets.

In this article we have collected the best resources for answering all possible CSS questions as well as how to understand CSS and how to use it properly. There are also CSS property references, cheat sheets, not only typical cheat sheets, but also cheat sheets for CSS frameworks, conversion tables and CSS short-hand.

CSS Reference and Learning

Most people have learned CSS the same way they’ve learned HTML—by viewing source, copying template codes, reading books and articles. While this “bootstrap” method of learning is often the best way to find great techniques, it may not be the best for knowing how to manage, debug, customize and even advance those techniques.
What our training hasn’t necessarily provided are the core concepts within CSS. This is why the Core CSS series may contain simple examples of things you already know. In this foundational reference card, you’ll find not only a bit of history and rationale for use, rule structure and syntax, but also a thorough resource as to the Cascade, inheritance and specificity – core principles of CSS that will expand and strengthen your professional ability to work with CSS.

Core CSS: Part II covers CSS 2.0/2.1 selectors. To assist in visualizing how these selectors actually match, for each example you’ll see an element, the corresponding CSS, and a document tree that visualizes what is selected within a sample document. Also provided are some useful examples.

To understand and manage attractive design and layouts, gaining an appreciation for the how to manage the CSS Box Model, Floats and Positioning is paramount. In this third and final refcard in the Core CSS series you will learn all about the visual models that exist within CSS, you’ll also learn not only about how visual models work, but how to troubleshoot and repair common problems too.

SitePoint CSS Reference

CSS Basics is a fantastic CSS learning and reference resource. It is split into 18 chapters, from An Introduction to CSS all the way down to the tricky CSS Pseudo Elements. Each chapter is downloadable and printable, you also have the option to download the entire series in a single PDF file.
Below we have listed all the available chapters, all can be viewed in HTML format or you can download each individual chapter in PDF.

16 CSS Beginner Tutorials from HTML.net

Theis resource, from HTML.net, offers 16 basic lessons for learning CSS. It is not as polished as CSS Basics (above) nor can you download each chapters. It is still a fairly easy read that explains what CSS is, how it works and how to use it.

Introduction »
A brief overall introduction to the tutorial series and what you can expect to learn.

Lesson 1: What is CSS? »
A little on why CSS came in to the world, and why it is clever to choose CSS over HTML for layout and design.

Lesson 2: How does CSS work? »
Learn the basic syntax of CSS and have to create your first stylesheet.

Lesson 3: Colors and backgrounds »
Learn how to apply colors and background colors to your website and how to use background images.

Lesson 4: Fonts »
In this lesson you will learn about fonts and how they are applied using CSS.

Lesson 5: Text »
In this lesson you will be introduced to the amazing opportunities CSS gives you to add layout to text.

Lesson 6: Links »
About how you can add fancy and useful effects to links and work with pseudo-classes.

Lesson 7: Identification and grouping of elements (class and id) »
A closer look at how you can use class and id to specify properties for selected elements.

Lesson 8: Grouping of elements (span and div) »
A closer look at the use of span and div as exactly these two HTML elements are of central importance with regards to CSS

Lesson 9: The box model »
The box model in CSS describes the boxes which are being generated for HTML-elements.

W3 schools is another great resource for learning CSS, you will not learn the basics of how to use CSS to control the style and layout of multiple Web pages, it also offers an indepth look at all CSS values and how to use them.

Cheat Sheets

This cheat sheet contains a complete listing of all the properties, selectors types and allowed values in the current CSS 3 specification from the W3C. Each property is provided in a section that attempts to match it with the section (module) that it is most actively associated within the W3C specification. Next to each property is a listing of the expected values that that property takes (normal text shows named values it accepts and italics shows value types it will accept).

Cascading Style Sheet Level 2 Visual Cheat Sheet from woorkup.com

This cheat sheet (3 pages) contains an essential reference to CSS2 properties with detailed descriptions and some sample code. The simple visual style used to design this sheet allows you to find anything you need at a glance.

CSS2.1 Quick Reference Card/Cheatsheet

This quick reference card summarizes the core features of version 2.1 of the cascading stylesheets standard.

CSS2 Cheat Sheet from Refcards

The CSS cheat sheet is a one-page reference sheet, listing all selectors (as of CSS 2.1) and properties. It includes a visual example of the box model, unit reference for CSS units and the various media types CSS makes allowance for.

CSS Framework Cheat Sheets

YUI Library: CSS Reset, Base, Fonts, and Grids Cheat Sheet

Blueprint Cheat Sheet

Specific Cheat Sheet

You're a web developer and you're ready to tear your hair out because you have to support Internet Explorer 6, but, to put it tactfully, IE6 doesn't support you. The author of this cheat sheet has scoured the web for resources and also included some of his own fixes for IE6 and put it all together in this cheatsheet/reference manual as a resource for anyone who has to deal with Internet Explorer 6.

CSS Properties to JavaScript Reference

The RGB Hex colour chart is a very large (183kB) PNG file, and is sized to fit on a standard A4 piece of paper. It shows the 216 so-called "web safe" or "non-dithering" colours (there are actually only 22 web safe colours, but those are revolting).

Convert em,px,pt and % in CSS

This chart converts points to pixels (and ems and %). It’s an approximation, which will depend on font, browser and OS, but it’s a great starting point.

Comments

Weekly Newsletter

Join 40,000+ subscribers and get the latest web design resources and tips directly in your inbox every Sunday morning.