Learning and Referencing CSS for WordPress: 150+ Resources

When it comes to learning and remembering CSS, there’s no reason why you need to commit every property and class to memory when you can quickly look up anything you need to know in just a few seconds.

But while search engines (read: Google) offer a quick way to search for CSS answers, it can be difficult to know which ones are actually helpful and, more importantly, up-to-date.

In our recent member survey we asked you what your biggest hurdle is in learning WordPress and an overwhelming number of you said you wanted to level up your coding skills and become more proficient in HTML, CSS and PHP.

With that in mind, and to help you conquer CSS, we’ve curated this selection of some of our favorite resources for learning and referencing CSS and related languages and preprocessors, such as Bootstrap, SASS and LESS. So browse, bookmark and enjoy learning CSS!

CSS, SASS, LESS, Bootstrap

The resources are grouped into seven sections:

CSS – It’s a styling language used to add color and style to your site. While it’s not technically a programming language, it’s widely used all over the internet and is included in other languages such as Bootstrap.

SASS – This is a stylesheet language that’s an extension of CSS. It’s officially called a preprocessor and is designed to make CSS styles easy to write and organize.

LESS – Similar to SASS, LESS is another stylesheet language and preprocessor that’s designed to extend the functionality of CSS by adding new features such as variables and mixins.

Bootstrap – A front-end, open source framework designed to create websites with a basis of HTML, CSS and Javascript. Every site created using Bootstrap is responsive across mobile devices.

People of Note – There are many great people to follow on Twitter who that share fantastic CSS tips and tricks. Here are some of the best to follow and tweet.

Must-Have Resources – There are many sites that are well worth perusing at your leisure with tons of information to keep you up-to-date as CSS changes, as well as to give you a place to go to ask questions and get help. Also included are sites with a huge selection of tutorials as well as courses on CSS and all programming languages.

No matter what your learning style, you should be able to find resources that work for you with a combination of written lessons, tutorials and video courses.

Here’s the thing, there are truck loads of resources out there and this list is by no means exhaustive. Since this list can’t go on forever, there are likely some of your favorites that aren’t included. If you think of a link we would be remised if we left it out, feel free to post it in the comments below.

CSS Resources

If you’re new to CSS, it may seem like an overwhelming language to learn, but once you get into it, it’s quite manageable and pretty easy.

For the seasoned pro, it can be handy to have a list of all the selectors and properties since there are so many to remember and especially since CSS is a large part of Bootstrap and web design in general.

If you want to start learning about CSS or you want to brush up on your existing skills, here are some great resources:

There are many great reads out there that are a great and affordable way to learn just about everything you need to know. If you grab one or more of the books on this list, they also double as a quick reference at arm’s length.

LESS Resources

SASS is generally more popular, but there are lots of diehard LESS fans out there.

These helpful guides and tutorials should provide you with all the info you need to learn LESS from scratch or brush up on your skills. Either way, you should be able to decide which side of the fence you’re on.

People of Note

There are so many wonderful web developers out there, it’s difficult to pick just a handful. That’s why I squeezed in a few more since following the right people on Twitter can bring you a constant stream of useful information.

Must-Have Resources

In the world of the Internet, things change so fast before you can blink twice. That’s why I’ve compiled a special list of sites for you to bookmark so you can stay up-to-date on the latest and greatest.

Where to Learn Even More

When you’re ready to learn more and take the next step, you have many choices. These sites are all fantastic places to enroll in affordable courses to advance your knowledge and maybe even your career.

Treehouse – Quality courses on web design and development for individuals and businesses that are trusted by top companies.

Lynda.com – The creator of LinkedIn founded this tech education site with courses ranging from photography and music to web development and business. Since top companies are already on board, it shouldn’t be difficult to find a job after completing courses here.

SitePoint – There are tons of great guides for CSS and beyond here. It’s practically a one stop shop and a great reference for code.

SitePoint Premium – Formerly called Learnable, this is the home of Sitepoint’s courses on web design and development. It’s a trusted source for learning everything you need to get started or advance in your career.

Complete Web Developer Course (Rob Percival) – A down to earth course on Udemy for beginners on web design and development. A former teacher, Rob Percival does an excellent job making programming easy to understand.

Codecademy HTML and CSS – This is a quality HTML and CSS course.. What sets Codecademy apart from other course sites is their courses are interactive and they consider themselves to be modern in approach in comparison to the traditional school system in the US.

Coursera – There are free web development and design courses available as well as affordable course bundles created by real universities such as Brown, Harvard, Standford and many more. For a fee, you can enroll in a course bundle and receive a certificate upon completion. While it’s not an equivalent to a degree, it still looks great on a resume since your education would be from a highly trusted and recognized source.

Udacity – Google created this education site that provides both free and premium courses. You can also enroll for their nanodegree programs in web development and programming that are almost as good as a degree since it’s enough to qualify for a high-paying job at top tech companies around the world including Google.

CodePen – A community for front-end developers to showcase their work, get feedback and build a test case for bug testing. There are also so many really cool examples of what CSS can do, it’s downright inspirational.

Need Help?

“Pobody’s Nerfect.” Sometimes you may find you need an extra hand when some code doesn’t work out the way you had hoped.

Luckily, there are a couple excellent sites you can go to for peer advice and help for free:

A copywriter, copy editor, web developer, consultant, course instructor for The Academy and founder of WP Pros(e), Jenni McKinnon has spent over 15 years developing websites and almost as long for WordPress. A self-described WordPress nerd, she enjoys watching The Simpsons and names her test sites after references from the show.

Get fresh WP updates directly to your inbox.

18 Responses

As one other alternative on learning how to use Bootstrap, specifically to create WordPress themes built on top of Bootstrap, I’d recommend http://bootstrapwp.com/ Very well laid out and inexpensive site to learn with step by step videos.

As a perfectionist, I’m an opposed to Bootstrap… Because it’s bloated… then again it does feature everything you need and has compatibility across all browsers built-in. Easy does it, right?
But I see many theme and plugin authors using Bootstrap for only one or two features >.<. Ugh D:

The same goes for SASS, LESS, SCSS, etc. Pure CSS is the cleanest and fastest form of CSS for any browser. Please correct me if I'm wrong, I haven't looked into this subject for almost a year now :3.

IMHO: Can you achieve everything with CSS2? Then do so :D! From there try to slowly add CSS3 for fancy stuff, and finally: (last-)resort to Javascript if it's not possible with CSS3.

In my experience, pretty well any code can become bloated if you’re not careful. That’s the tricky part about learning to code since there are less efficient and more efficient ways of doing everything.

It also depends on a lot of other factors such as how many scripts or plugins you have loaded and how much memory your server has to load all of it, for example.

You have an excellent point there, though. I think it’s tempting to pump out a bunch of code and multiple scripts and plugins to do simple (albeit, cool-looking) things when in reality, you should use only what you need and try to cover all the features you need using as little plugins and scripts as possible.

I agree that using plugins, scripts, Bootstrap, etc. for just a couple tiny features isn’t really worth it. That’s so true.

You’re right, it’s a framework. I just lumped Bootstrap in with everything else and used languages as a sort of umbrella term because there isn’t really one … at least not one I’ve heard of or can think of at that moment.

I like foxes but the Firefox browser has become a pain. If I could get used to Chrome’s corresponding feature, I’d switch, but so far find it hard to understand & use. So I use Chrome for everything else, and Firefox for examining websites’ CSS..

While I understand your stance that this list is geared towards learning CSS, I feel that is even more reason to include tools like Firebug. I wouldn’t know half of what I do today without Firebug.

Being able to inspect CSS and manipulate it directly to see how my code interacts with the DOM is invaluable. It’s one of the best ways to non-destructively play around with a website, break it, push it, whatever it takes to help you understand CSS’s role in the web.