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.
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.
- Chapter 1 : Introduction to CSS »
- Chapter 2 : CSS Syntax »
- Chapter 3 : CSS Classes »
- Chapter 4 : CSS IDs »
- Chapter 5 : CSS Divisions »
- Chapter 6 : CSS Spans »
- Chapter 7 : CSS Margins »
- Chapter 8 : CSS Padding »
- Chapter 9 : CSS Text Properties »
- Chapter 10 : CSS Font Properties »
- Chapter 11 : CSS Anchors, Links and Pseudo Classes »
- Chapter 12 : CSS Backgrounds »
- Chapter 13 : CSS Borders »
- Chapter 14 : CSS Lists »
- Chapter 15 : CSS Width and Height Properties »
- Chapter 16 : CSS Classification »
- Chapter 17 : CSS Positioning »
- Chapter 18 : CSS Pseudo Elements »
- Click here to download all chapters in PDF format »
- Print all chapters »
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.
A brief overall introduction to the tutorial series and what you can expect to learn.
A little on why CSS came in to the world, and why it is clever to choose CSS over HTML for layout and design.
Learn the basic syntax of CSS and have to create your first stylesheet.
Learn how to apply colors and background colors to your website and how to use background images.
In this lesson you will learn about fonts and how they are applied using CSS.
In this lesson you will be introduced to the amazing opportunities CSS gives you to add layout to text.
About how you can add fancy and useful effects to links and work with pseudo-classes.
A closer look at how you can use
idto specify properties for selected elements.
A closer look at the use of span and div as exactly these two HTML elements are of central importance with regards to CSS
The box model in CSS describes the boxes which are being generated for HTML-elements.
Change the presentation of elements by setting the margin and padding properties.
Learn about the endless options when using borders in your pages with CSS
In this lesson, we will take a look at how you easily can define the height and width of an element.
An element can be floated to the right or to left by using the property float
With CSS positioning, you can place an element exactly where you want it on your page.
In this lesson, we will learn how to let different elements overlapping one another using layers.
This last lesson is about the W3C-standards and how to check your CSS is correct.
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.
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).
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.
This quick reference card summarizes the core features of version 2.1 of the cascading stylesheets standard.
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 Short Hand
CSS Framework Cheat Sheets
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.
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).
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.