The Ultimate Guide to CSS + Cheat Sheets 📑

by Bradley Nice, Content Manager at ClickHelp.com — professional technical writing tool

CSS is a language that describes the style of an HTML document and its elements. Learn how to use CSS to create beautiful web pages. For those of you still learning CSS, or wanting to go a little deeper into specific CSS subjects, I’d put together a list of learning resources that I’ve come across in recent months.

I might have missed something important, so please suggest your categories and resources in the comments and I’ll make the edits in the following list!

CSS Selectors

CSS selectors define the elements to which a set of CSS rules apply. From there you can move into advanced selectors and pseudoselectors. This is a starting point of CSS learning.

• Beginner Concepts: How CSS Selectors Work
• Level up your CSS selector skills
• CSS selectors | MDN Web Docs

CSS Box Model

CSS box model explains how to manipulate elements on your page. It is essential knowledge for CSS newbies.

• Opening the Box Model | ShayHowe
• The box model | MDN web docs
• The CSS Box Model | CSS-Tricks

CSS Layout

Layout involves manipulating how elements lay out on the page. Learn how to manipulate this to create exactly the design you desire.

• Getting Started With CSS Layout | Smashing Magazine
• The Ultimate Guide to Flexbox — Learning Through Examples by Ohans Emmanuel
• A Complete Guide to Grid | CSS-Tricks
• Grid Layout Cheat Sheet (PDF)

Styling Text with CSS

Text is a fundamental block of any web site. Learn how to apply some design to it via CSS.

• Fundamental text and font styling | MDN Web Docs
• Styling lists | MDN Web Docs

CSS Units

Units are used to define the positioning, size and other parameters.

• CSS values and units | MDN web docs
• A Look at CSS Viewport Units | Alligator.io
• Calc() function with Use Cases | Pineco

CSS Colors and Gradients

• Color | MDN web docs
• CSS Gradients | CSS-Tricks

CSS Transitions and Animations

• CSS Transitions explained | Zell
• CSS Transitions | CSS3 = Awesome

40+ CSS3 Button Examples With Effects & Animations

Amazing CSS Animation Libraries

CSS Pseudo-classes and Pseudo-elements

• Learning To Use The :after And :before Pseudo-Elements In CSS | Smashing Magazine
• A Whole Bunch of Amazing Stuff Pseudo Elements Can Do | CSS-Tricks
• How CSS pseudo-classes work, explained with code and lots of diagrams by Nash Vail
• A Whole Bunch of Amazing Stuff Pseudo Elements Can Do | CSS-Tricks

CSS Preprocessors

• Sass Basics | sass-lang.com
• Learn LESS in 10 Minutes (or Less) | Tutorialzine

CSS Naming Systems and Architecture

• BEM For Beginners: Why You Need BEM | Smashing Magazine

CSS Cheat Sheets

• Comprehensive CSS Cheat Sheet + PDF | OnBlastBlog
• The Mega CSS3 Cheat Sheet
• CSS Cheat Sheet | Hostinger Tutorials
• CSS Cheat Sheat Infographic | CSS Author
• CSS Almanac | CSS-Tricks

MORE

Free Apps & Tools For Working With CSS

100+ CSS Resources For Web Designers And Developers

Top 20 Best Free CSS3 Frameworks for Web Development

148 Resources to Help You Become a CSS Expert

Best CSS Books

What are other essential CSS resources for newbies? What categories does this list lack? Any suggestions? Please, share you favorite CSS websites and resources and I’ll add them to the list.

Have a nice day!

Bradley Nice,
Content Manager at ClickHelp.com — best online documentation tool for SaaS vendors