CSS References, Cheat Sheets, Conversion Tables and Short Codes

By on CSS, Web Design

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

Core CSS: Part I

CSS Reference
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

CSS Reference
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.

Core CSS: Part III

CSS Reference
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 Reference

CSS Basics

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

CSS Reference
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.
  • Lesson 10: The box model – margin & padding »
    Change the presentation of elements by setting the margin and padding properties.
  • Lesson 11: The box model – borders »
    Learn about the endless options when using borders in your pages with CSS
  • Lesson 12: The Box model – Height and width »
    In this lesson, we will take a look at how you easily can define the height and width of an element.
  • Lesson 13: Floating elements (floats) »
    An element can be floated to the right or to left by using the property float
  • Lesson 14: Positioning of elements »
    With CSS positioning, you can place an element exactly where you want it on your page.
  • Lesson 15: Layer on layer with z-index (Layers) »
    In this lesson, we will learn how to let different elements overlapping one another using layers.
  • Lesson 16: Web-standards and validation »
    This last lesson is about the W3C-standards and how to check your CSS is correct.
CSS Introduction from W3 Schools

CSS Reference
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

CSS 3 Cheat Sheet (PDF) from Smashing Magazine

CSS Reference
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

CSS Reference
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

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

CSS2 Cheat Sheet from Refcards

CSS Reference

CSS Cheat Sheet (V2) from Added Bytes

CSS Reference
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 Help Sheet from gosquared.com

CSS Reference

CSS Cheat Sheet (V1) from Added Bytes

CSS Reference

CSS1 Cheat Sheet from Refcards

CSS Reference

CSS Cheat Sheet Wallpaper in Helvetica

CSS Reference

CSS (Cascading Style Sheets) All on One Page

CSS Reference

CSS Short Hand

CSS Shorthand Cheat Sheet from leigeber.com

CSS Reference

CSS Shorthand Cheat Sheet from Catch My Fame

CSS Reference

CSS Shorthand Guide from Dustin Diaz

CSS Reference

Properties Indexes

CSS Properties Index from Jens Meiert

CSS Reference
This fantastic resource is a continuously updated index of all properties specified in CSS 1, CSS 2, CSS 2.1, and even CSS 3, including all initial values as well.

All CSS Properties Listed Alphabetically from blooberry.com

CSS Reference

CSS Framework Cheat Sheets

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

CSS Reference

Blueprint Cheat Sheet

CSS Reference

Specific Cheat Sheet

Ultimate IE6 Cheatsheet

CSS Reference
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

CSS Reference

RGB Hex Colour Chart

CSS 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

CSS Reference
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.