From its beginnings in the late 1990s, CSS has vastly expanded in scope. It’s now a mature, robust technology, widely supported by desktop and mobile browsers—but there’s a lot to learn. Whether you’ve been left behind by recent developments or are looking to learn CSS for the first time, this checklist should help, with practical tips, general advice, and top-quality resources.
1Make Sure You Know HTML First
The first thing you should know before you start learning CSS is HTML. This may sound obvious, but there are some important concepts to shore up before you dive into styling your content.
Your learning journey will emphasize the separation between semantics (HTML) and style (CSS). Ensure you’re using good clean markup, and drop any stylistic HTML tags likethat you may be used to.
Mozilla’s HTML documentationis excellent (as are all its materials covering the web platform), so begin there if you’re not confident in your HTML ability.
2Start With the Absolute Basics of CSS
Stay on the Mozilla site and dive into theirintroduction to CSS.
At this point, there are two key things to learn: how to write basic CSS and connect it to your HTML files. The Mozilla docs start with a simple introduction to CSS using this example:
Even if you may’t write CSS, you can probably understand what this excerpt does: it makes h1 elements red and sets a specific font size.
Mozilla’s Getting started with CSS articledescribes the second part of the puzzle, explaining how you apply CSS like the above to your HTML files. Internal style sheets are probably the quickest and easiest way to get started, but external style sheets have many benefits, so it’s a good idea to try both out.
3Play Some Games
Although there aremany great games to help you learn CSS, they tend to cover more advanced techniques like grid layout.CSS Dineris more appropriate for beginners, and it should help you to understand CSS selectors which identify specific parts of your document for styling. The example above shows a simple “h1” selector, but they can get much more complicated:
CSS Speedrunis another good test of your selector skills, although—as the name suggests—it can be a more stressful experience!
4Use Chrome/Safari/Firefox Developer Tools
Once you know the basics, you’re about ready to start writing your own style sheets. However, you can start experimenting with CSS directly in your browser, avoiding the need to open up a text editor and start messing around with files.
For example, the element inspector in Google’s Developer Tools lets you view the CSS that applies to anything on any page you’re looking at:
Moreover, you’re able to use the Styles panel to edit any CSS—or even create new styles—and see the results in real time.
These tools work slightly differently in each browser, but you should be able to use them to reinforce your learning. Chrome has excellent auto-complete support to suggest both property names and acceptable values. With experimentation, you can learn about various properties and learn more about them via direct links to the Mozilla Developer Network (MDN) documentation:
5Try an Online Editor
Before you break out that text editor, there’s one more way you can try out your CSS skills without dealing with local files. There are several web apps, likeCodePenorJSFiddle. These tools are a bit like some of the games you saw earlier, minus the game part. They present text boxes you can use to edit HTML and CSS, with a preview showing the final result.
While these tools typically include a JavaScript section for you to flex your coding skills, it’s entirely optional. Just ignore any “JS” or “JavaScript” sections and focus on the HTML and CSS instead.
These editors include useful features like syntax highlighting and code formatting. JSFiddle has good error reporting, drawing your attention to CSS values that are invalid, for example. They also let you save your work for later use, and you can always copy & paste your HTML or CSS into a local file if you want to use it in your own projects.
6Use the Best Reference Material
As you’ve seen, many of these resources reference the MDN. This source of information on the web platform is first-rate and comprehensive; it should be your first port of call when you need to look up details about any CSS issue:
You may come across theW3Schoolssite when searching for CSS topics—or any other web-related subjects. The site’s name makes it sound like it’s affiliated withW3C, the creators of standards for web technologies. But it isn’t; it’s a set of documentation from a third party. Although the quality has improved, it is still far from perfect, and MDN is a much more reliable source.
There’s a wealth of CSS material on MDN, from tutorials to interactive tests. All aspects of CSS are covered, including selectors, the box model, colors, and debugging. Every CSS property has a corresponding reference page that tells you pretty much everything you’ll need to know about it:
Each property reference page includes explanations of different values, examples of how to use them, and a browser compatibility table. The latter is vital to distinguish between well-supported properties and more experimental ones that may only work in some specific browsers.
If you’re looking for a quality alternative, theCSS resources at W3Care authoritative. Beware, though, they are far from beginner-friendly and you should only really consult them once you’ve exhausted the excellent info at MDN.
7Keep Up-to-Date
Although it’s a mature and stable technology, CSS is still changing. Members of various organizations continue to propose changes, fixes, and new features.
As a designer, your challenge often goes beyond knowing how to do something and, instead, focuses on what you may actually achieve. You can change the color of text, but can you change its outline, or can you use a gradient instead of a color?
To stay on the cutting edge, and answer these kinds of questions, you should find a good source of CSS news, whether it’s a podcast, a blog, or a particularly knowledgeable social media account.
CSS-Tricksis one of the best sources of cutting-edge CSS news. It features articles on all aspects of CSS and has some excellent reference material too, particularly on features like Flexbox and grid.
The CSS Podcastis a seasonal show that has now been running for five years. Its two co-hosts are engaging enough that they can dive into the details of CSS without making the subject too dry or inaccessible.
Dr Lea Verou, an industry expert, regularly posts on X about CSS and the web platform.Jen Simmonsworks for Apple on the Safari browser and posts on Bluesky about CSS issues. TheCSS Working Groupaccount is as official as it gets. It only posts occasionally, to promote spec updates and other relevant articles from w3.org, but following it is a great way of keeping up with bleeding-edge developments.
8Validate Your CSS
Now that you’re creating style sheets by the dozen, it’s wise to ensure they are error-free. Errors in CSS can easily go hidden and are notoriously hard to debug, so make sure you get all the help you may.
TheW3C validatorhas long been the gold standard in CSS error checking. You can supply a URL, file, or a text copy of your styles to check their validity.
If your style sheets are error-free, you’ll see a friendly message of congratulations and a badge you can use on your web pages to advertise their correctness. It’s no longer de rigueur to display these, but you’re welcome to do so if you want to show off your skills on a portfolio or personal website.
If, on the other hand, there are problems with your styling, the validator will show detailed error messages explaining them. Like most errors, they can be tricky to understand if you’re not familiar with them, so review the affected code to determine what’s wrong with it before you attempt to fix it.
9Check Browser Compatibility
Another important aspect of style sheet correctness is browser compatibility. This is far less of an issue than it once was, but newer updates to CSS—including experimental features—are not always widely supported. Fortunately,Caniusewill tell you exactly which CSS properties will work in each browser.
The information here is dense, but presented in a way that’s easy to consume. You’ll need to decide which browsers you’re willing to support, including Edge’s previous life as Internet Explorer and the mobile/desktop distinction. The good news is that most CSS is optional and you can design your pages so that they will degrade gracefully if viewed on non-supporting browsers.
10Master CSS Typography
An important element of all design, typography wasn’t taken too seriously on the web until the arrival of CSS fonts. The language has always been flexible, supporting a font stack that lets you express a preferred order of fonts to use, according to what’s available. But real web fonts give you more control of the experience, and let all viewers see your font even if they don’t have it installed.
Google Fontsis one of the best providers of free fonts and the selection available is vast: nearly 2,000 font families at the time of writing.
There are many variations and configurations available, from different weights to multiple-language support and icon fonts. Once you’ve customized a font to your liking, just copy the embed code and add it to your HTML. Alternatively, you’re able to download the font files and host them locally if you prefer.
