So you want to learn CSS?
If you want to be a successful web designer, a solid grasp of CSS is a must. Even if you don't do the coding yourself, understanding how it works will help you design for the web. We've built a comprehensive guide to help you learn CSS online, whether you're just getting started with the basics or you want to explore more advanced CSS. This Learning Guide will help you:
- Learn CSS and HTML from scratch.
- Build on your CSS experience to write better code faster.
- Explore the most recent developments in CSS.
We'll start with a basic explanation of what CSS is and how it works. Then we'll get into the fundamentals of CSS, such as typography, layout, colors, and backgrounds. After that, we'll explore some more complex areas of CSS and take a peek at what the future of CSS may hold. And we'll finish by looking at CSS preprocessors and animation.
In each section, we'll provide plenty of resources for you to use to learn more about a particular area. With this CSS guide and the courses and tutorials we link to within it, you have all the information you need to go from CSS novice to pro.
1. What Is CSS?
CSS stands for Cascading Style Sheets, documents that contain styling rules that describe how HTML elements are displayed. CSS allows you to control the layout of multiple web pages all at once.
How Does It Work?
CSS works hand in hand with HTML; HTML sorts out the page structure, while CSS adds style, makes it look pretty, and allows you to introduce subtle levels of interaction.
Multiple style rules can point to one HTML element, in which case there needs to be a way to determine which rule should take effect. The term cascading describes the process of filtering down from general rules, until the most specific rule is encountered. That rule is then chosen to do its work.
CSS is read by web browsers. They take the HTML markup document, and then they apply the CSS styling rules to the elements within that document.
Learn HTML Basics
This guide assumes that you already have a basic understanding of HTML. If you don't, you can get up to speed quickly in our short course on HTML basics. By the end of this short course you’ll know what HTML is, how it works, and how to use its most common elements.
- HTMLStart Here: Learn HTML BasicsKezz Bracey
- HTMLA Short Guide to Using HTML Tables in the Modern AgeAdi Purdila
2. The Fundamentals of CSS
CSS Specificity and Selectors
CSS is all about targeting elements and styling them. These two tutorials will get you started on the right foot:
- Web DevelopmentThe 30 CSS Selectors You Must MemorizeJeffrey Way
- CSSWhat is CSS Specificity and How Does it Work?Kingsley Silas Chijioke
Typography, Layout, Colors, and Backgrounds
It's time to master the fundamentals of CSS: typography, layout, colors, and backgrounds.
In Start Here: Learn CSS Typography, you'll start by learning how CSS affects the way a website displays, what CSS selectors are, what CSS properties are, and the coding syntax you’ll need to know to write your own CSS.
In our Start Here series of courses, Kezz Bracey will go on to show you how to build the typographic foundation of your site, how to create the most common types of layouts in web design, and how to breathe some life into the site you’ve been creating using CSS colors and backgrounds.
Once you've got to grips with the basics of backgrounds, check out this tutorial for an in-depth look at the upgraded background property and the new capabilities beyond just adding a CSS background image or color.
CSS positioning is arguably the most fundamental skill in web design; it powers layouts and hence forms the foundation of everything inside those layouts. That said, it can be quite tricky to wrap your head around when you are first starting out.
By the time you’ve finished this course, you’ll have a firm grasp of the essential principles you need to drive your layouts. You’ll learn each of the four types of positioning used in CSS, as well as how to work around some of the oddities that can pop up when using them.
Keep Learning CSS
Follow the Masters
CSS is constantly evolving, and the best way to stay on top of your game is to immerse yourself. Pay attention to what CSS celebrities are doing and you will learn plenty. Here are just a few people on Twitter you should be following:
Make sure you're also subscribed to our weekly digests to get a comprehensive summary of all our new web design tutorials each week, delivered straight to your inbox.
Learn in a Community
Why not find your own heroes on a social coding site like GitHub or CodePen? The best thing about networks like these is the advice everybody gives each other; if you have a CSS problem, someone will have had it before you and will be willing to lend a hand. Remember, you can always ask for help in our forum!
Get to Grips With Browser Support
Browsers don't always interpret style rules the same as each other, and as browsers develop, so too does their support of newer styling proposals. It's important to understand how the major desktop and mobile browsers will treat your CSS.
It's often the browser manufacturers themselves who experiment with CSS properties, in the hope that their suggestions will be adopted by users. Ultimately, it's down to the World Wide Web Consortium (W3C) whether CSS properties are standardized or not.
Fortunately, all modern browsers (such as Google Chrome, Mozilla Firefox, Apple Safari, Opera, and Microsoft Edge) have proactive updating management, which should stop older versions floating around for too long.
However, there are differences between each of these browsers, irrespective of how up-to-date they happen to be. Some CSS will be well supported in one browser but interpreted differently in another, so for this reason it's sound advice to pay attention to browsers.
Here are some useful resources which will help you on your way:
- BrowserStack is quite simply the best cross-browser testing tool available today. Use it to see how different browsers and platforms mess with your CSS.
- Can I Use... is an invaluable website for checking which CSS properties are supported in which browsers.
3. Next-Level CSS
Once you've mastered the fundamentals, there's still lots to learn to really make the most out of everything CSS has to offer, from frameworks that help you organise your CSS to CSS libraries and creating flexible grid-based layouts using the box model.
SMACSS (Scalable and Modular Architecture for CSS) is a set of CSS guidelines which organizes your CSS rules into reusable modules. In this course, Adi Purdila will introduce you to this great front-end framework!
Essential CSS Libraries
In this next course, you’ll learn how to use ten essential CSS libraries for web designers. You’ll learn about resets, animations, transitions, and typography related libraries. You’ll be using Bower to manage your projects, to make sure that everything stays up to date and is easily maintainable.
CSS was never really intended for laying out complex interfaces; it was created with simple documents in mind. As such, its journey has been a difficult one.
Nowadays, however, CSS is capable of a great many things where layout is concerned, as these courses will testify. Follow our instructors to master the box model, take control of grid-based layouts, and use Flexbox to create flexible interfaces.
- CSSUnderstanding the CSS Box ModelCraig Campbell
- FlexboxCSS: Flexbox EssentialsCraig Campbell
- CSS3 CSS Grid Projects for Web DesignersCraig Campbell
- CSSGrids and Layout Tricks With “postcss-ant”Kezz Bracey
- CSSBringing CSS Grid Layout and Flexbox TogetherCraig Campbell
- CSS Grid LayoutBreaking the Grid With CSS Grid LayoutCraig Campbell
- CSSGetting Started With CSS Multi-Column LayoutAdi Purdila
- UI DesignUI Design: A Practical Guide to TabsAdi Purdila
CSS Grid Layout
How we approach layout on the web is changing, and at the forefront of that change is CSS Grid Layout. This quick start guide will skip the details and nuances, instead helping you get stuck in, right now.
The New CSS Layout
If you want to get ahead with CSS Grid Layout, this new book from Rachel Andrew and A Book Apart is exactly what you need. Take advantage of this pivotal moment in the evolution of layout with The New CSS Layout.
Now it's time to build on what you've learned by trying some practical projects! These three courses use CodePen so you can easily follow along.
- CSS310 CSS3 Projects: UI and LayoutKezz Bracey
- CSS310 CSS3 Projects: Branding and PresentationKezz Bracey
- CSS6 Flexbox Projects for Web DesignersCraig Campbell
- Navigation DesignPractical CSS: Build a Dropdown MenuAdi Purdila
- HTMLBuild a Classic Five-Page WebsiteKezz Bracey
- CSSPractical CSS: Desktop to Mobile Navigation PatternsAdi Purdila
- CSS5 CSS Projects: Image Hover EffectsAdi Purdila
Take some time to explore the incredible results you can achieve using next-level CSS. These CSS courses and tutorials are perfect for expanding your knowledge and digging further into clipping, masking, grids, blending modes, counters, and units.
- CSS8 CSS Tricks You Never UseCraig Campbell
- CSSClipping and Masking in CSSAdi Purdila
- CSSStructuring Stylesheets With RSCSSCraig Campbell
- CSSA Visual Guide to “em” and “rem” UnitsKezz Bracey
- Google Material DesignBuilding Websites With MaterializeCraig Campbell
FREEWeb TypographyUp and Running With Variable FontsKezz Bracey
- CSSIntroduction to Text Masking on the WebAdi Purdila
- Front-EndStyle Your Apps With the Tailwind CSS FrameworkJeremy McPeak
- CSSCalc() Grids Are the Best GridsCory Simmons
- ColorBlending Modes in CSS: Color Theory and Practical ApplicationJonathan Cutrell
- CSSQuick Tip: Using CSS Counters to Style Incremental ElementsGeorge Martsoukos
- CSS7 CSS Units You Might Not Know AboutJonathan Cutrell
The Future of CSS
CSS is constantly evolving, and you can remain current and ahead of the field by knowing what the future is likely to look like. In these courses and tutorials, you'll learn about some of the bleeding-edge features of CSS, such as CSS selectors, layout modules, filters, pseudo-elements, and adding drop caps so you can take your designs to the next level.
4. CSS Preprocessors
What Is a CSS Preprocessor?
A CSS preprocessor is a scripting language that extends CSS and allows you to do a number of things and can dramatically improve your workflow. Preprocessors help you to write well organised code that's easier to maintain and allow you to use code shared by other people, but the biggest advantage is that they save you time.
This is a quick-fire explanation of CSS Preprocessors, in 60 seconds!
Learn Sass, LESS, and Stylus
Sass, LESS, and Stylus are the three most mature and stable CSS extension languages around. We have courses that will get you up to speed with all three!
- Sass14 Days to Learn SassAdi Purdila
- StylusBecome a CSS Superhero With StylusKezz Bracey
- CSSLess is MoreDan Wellman
- SassGetting Started With NucleusAdi Purdila
You can learn more about CSS preprocessors by checking out these resources:
5. CSS Animation
Motion has become a really important part of the web design field in recent years. Motion and animation add layers of dimension to an interface, aiding the user, offering feedback, delighting, and engaging along the way.
CSS animation techniques are often a web designer’s gateway into the world of motion, and the best way to get started is to check out our complete guide:
6. Learn CSS: The Complete Guide
This Learning Guide will continue to be updated with all the latest and greatest CSS tutorials and courses to help you stay at the very top of your game!
To keep up with all the CSS content we publish, remember to sign up to our weekly digests to get a comprehensive summary of all our new web design tutorials each week, follow @tutsplus on Twitter, and like the Envato Tuts+ page on Facebook.