11 Tips for Getting Started With Modern CSS
Related
8 Cool Tricks You Can Do With Your Browser’s Element Inspector
These 10 Fun Games Will Teach You Modern CSS
Google Messages Just Made It Easier to Get Rid of Spam
Sign in to your How-To Geek account
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.
1
Make 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 like that you may be used to.
Mozilla’s HTML documentation is excellent (as are all its materials covering the web platform), so begin there if you’re not confident in your HTML ability.
2
Start With the Absolute Basics of CSS
Stay on the Mozilla site and dive into their introduction 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 can’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 article describes 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.
3
Play Some Games
Although there are many great games to help you learn CSS, they tend to cover more advanced techniques like grid layout. CSS Diner is 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:
a#selected > .icon,
.box h2 + p {
font-weight: bold;
}
CSS Speedrun is another good test of your selector skills, although—as the name suggests—it can be a more stressful experience!
4
Use 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.
Related
8 Cool Tricks You Can Do With Your Browser’s Element Inspector
No coding lessons required.
6
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 can 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:
5
Try 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, like CodePen or JSFiddle. 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.
6
Use 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 the W3Schools site when searching for CSS topics—or any other web-related subjects. The site’s name makes it sound like it’s affiliated with W3C, 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, the CSS resources at W3C are 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.
7
Keep 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 can 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-Tricks is 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 Podcast is 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 Simmons works for Apple on the Safari browser and posts on Bluesky about CSS issues. The CSS Working Group account 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.
8
Validate 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 can.
The W3C validator has 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.
9
Check 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, Caniuse will 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.
10
Master 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 Fonts is 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 can download the font files and host them locally if you prefer.
“Hey there, just a heads-up: We’re part of the Amazon affiliate program, so when you buy through links on our site, we may earn a small commission. But don’t worry, it doesn’t cost you anything extra and helps us keep the lights on. Thanks for your support!”
