× {{alert.msg}} Never ask again
Receive New Tutorials
GET IT FREE
Learn CSS Online

Learn CSS Online


CSS is what makes your websites beautiful, and while most won't consider it a programming language, it is nonetheless an essential skill all front-end web developers should be familiar with. Basic CSS is not difficult to understand at all, and you can easily learn it within a few hours.

Get Notified of New Tutorials

sign up to receive our weekly newsletters

About Resources

CSS, or Cascading Style Sheets, is a great technology to learn if you're completely new to programming. It's relatively easy to get started on learning how to code CSS, and you will be able to build a website from just HTML & CSS alone. Graphic designers with CSS skills are especially sought after, as you can build a beautiful website with animations using CSS.

The Mozilla Developer Network has always been a valuable resource for web developers. Not only do they provide detailed documentations of every CSS property for intermediate and seasoned developers to reference to, they also have a step by step instruction for total beginners who want to get started on CSS.

Price Free
Suitable for All Developers

This is a perfect website for beginners. It allows you to try every skill in each tutorial chapter simultaneously. Also, there are some simple quizzes that could help you review materials step by step. Currently there are 30 chapters and 200 examples, and they also have some resources about CSS3 for reference.

Price Free
Suitable for Beginners without Programming Experience

Codecademy provides intuitive tutorials with clear guidences to help users build webpages step by step. Once users enter their code in the online web console, the preview box will immediately reflect those changes. The courses will lead you by process, and eliminate your confusion and fear of coding.

Price Free
Suitable for Beginners without Programming Experience

Learn to code is a website containing clear and detailed articles that introduces you to CSS and HTML. There are 12 lessons for basic CSS & HTML, and 10 lessons for advanced content. If you want to learn CSS from the very beginning, you must read these easy-to-understand articles!

Price Free
Suitable for Beginners with little Programming Experience

Microsoft's learning website for absolute coding beginners introduces basic HTML and CSS knowledge. The course includes 21 lessons and each lesson contains several smaller sessions. The instructor quite humorous, so go ahead and determine whether you like his teaching style or not!

Price Free
Suitable for Beginners without Programming Experience

This is a series of tutorial videos, with 4 main chapters that introduce the basic concepts of how to build a website. Each lecture has its own slides, and it is convienient for taking notes. Also, each video will not exceed 15 minutes, so you can understand the CSS structure in a managable time. By now,this website supports six languages, including English, Chinese, German, Hindi, Spanish and Portuguese.

Price Free
Suitable for Beginners with little Programming Experience

HTML Dog provides a straightforward, easy-to-follow group of tutorials covering HTML fundamentals. There is an abundance of exercises for users to learn CSS, and also they could use these useful resources to build websites at the beginning. The tutorial assumes you know nothing about CSS, where its purpose is to teach the bare essentials - just enough to get started. They also provide intermediate and advanced tutorials to get deeper into CSS.

Price Free
Suitable for Beginners without Programming Experience

This website is suitable for those who already has some basic understanding of CSS, and it focuses on CSS fundamentals that are used in any website's layout. It also introduces some common coding problems and their solutions by comparison. Now this website supports 14 languages.

Price Free
Suitable for Beginners with little CSS Programming Experience

This website aims to provide easy to understand CSS instructional video tutorials, where a total beginner would learn everything they need to know about CSS within an hour. Although the contents in this website are not complete enough, it allows you to learn the most essential things about CSS and points you to the right way to deepen your understanding of CSS.

Price Free
Suitable for Beginners without Programming Experience

Dont fear the internet is a website for absolute coding beginners. It introduces basic HTML and CSS knowledge through interesting slides to explain the website's structure and how CSS & HTML work, and the video instructor is also quite entertaining as well.

Price Free
Suitable for Beginners without Programming Experience

The video tutorials in this site demonstrate clear, step-by-step instructions about CSS coding. For beginner, it's recommended that you start from the top with 'Introduction to CSS styling'. On the contrary, if your already know the basics, then browse other videos here. This website also provides all the code examples shown in the videos, letting users to copy and review them, which will no doubt help users learn more quickly.

Price Free
Suitable for Beginners with little CSS Programming Experience

Saylor.org provides basic introducing videos and ambundant readings in every topic unit. It will lead you through the basics of HTML and CSS with readings, exercises, and video tutorials.The site also encourages users to code on their own outside the course by giving instructions and examples. To go through every unit of CSS lesson, you should pass an interactive test assessment, and after you clear all 5 units, you’ll have enough knowledge about CSS and HTML for building your own website. Beginners could get a picture of building website by watching videos,and intermediators could learn more from reference articles and resources.

Price Free
Suitable for Beginners with little Programming Experience

This website is full of presentations on CSS, where you can learn pixel art, icon fonts, image wrapping, and background effects. Each example provides 3 interactive online web consoles where you can try and practice with HTML, CSS, and JavaScript at the same time. The effect of your code will appear in real time, so you immediately could see how your code will turn out!

Price Free
Suitable for Beginners with little CSS Programming Experience

This website provides a very cool tutorial introducing CSS 3D animation, where you will see how to create beautiful animations with just CSS. Some prior experience with coding CSS is recommended, as this is a tutorial for intermediate and advanced web developers who wish to dig deeper into learning CSS.

Price Free
Suitable for Beginners with basic CSS Programming Experience

This is a well-designed little game to educate people about CSS selectors. By typing in the correct selector, you can learn how to code correctly and complete each level. If you already have basic CSS knowledge, you can also jump ahead by opening the menu with the hamburger icon on the right and test how well you think you know your CSS.

Price Free
Suitable for Beginners without Programming Experience

This is a beautiful website with a 6-chapter tutorial on the basics of CSS, and more chapters will be added online. The tutorials are clear, simple and easy to read and understand. Each chapter also includes recommended readings, reference citations, and and interactive exercises to practice what you've just learned. The website itself is a great example of CSS, so appreciate its beauty and learn from it!

Price Free
Suitable for Beginners without Programming Experience

You've probably already heard of Treehouse before, but according to its subscribers, Treehouse is very friendly for total coding beginners. Its CSS course will get you started on technology, teach you the fundamentals such as basic selectors, values and units, and basic CSS layouts. It then goes in deeper to teaching you how to design the latest feature with CSS.

Price $25/month
Suitable for Beginners without Programming Experience

This course is deigned for those who already have some knowledge of both HTML and CSS.The instructors, professors Nick Walsh and Aimee Simone, will guide you through fun, winter-themed video tutorials that will teach you a lot of elements and techniques in CSS, and you can also learn through an interactive web console. After viewing the videos and completing the “challenges” that will test what you’ve learned so far, you will have access to more advanced courses. Like Treehouse, you can keep yourself motivated by earning more learning points. All the lecture materials are avaialble for download.

Price $25/month
Suitable for Beginners with basic CSS Programming Experience

This course is taught by Christopher Schmitt, who authored the HTML5 Cookbook. He explains semantics and HTML5 features such as audio, video and geolocation. He then dives into CSS3 and teaches the viewer how to create slick CSS3 features.

Price $39/month
Suitable for Beginners with basic CSS Programming Experience

Over a series of five lessons, you’ll learn how browsers sort declarations to determine which selectors will “win”. The course includes a series of hands-on exercises on all aspects of CSS, from user style sheets to !important rules, specificity and more.

Price $15/month
Suitable for Beginners with basic CSS Programming Experience

This course teaches you how to create a unique, personal website without the use of specialized restrictive templates. In addition to learning code, the course goes over different CSS layouts, responsive CSS design for mobile, search engine optimization, and site planning. The course contains 56 video lessons.

Price $40/month
Suitable for Beginners with basic CSS Programming Experience

This dynamic and comprehensive CSS Tutorial for Beginners is perfect for both beginners who don't understand how to code CSS, and experts who don't understand why they cannot get their website to look exactly the way they want it to.

Price $59/course
Suitable for Beginners with basic CSS Programming Experience

Brad Schiff, the course designer, has taught HTML & CSS to Fortune 100 companies, and the purpose of this course is to help an absolute beginner learn step-by-step how to build your own website with mostly HTML and CSS. The course spans over 8 hours long, and will teach you advanced CSS techniques such as responsive design and special effects. Viewers has praised this course to be entertaining and clear. Brad also has a blog where he posts some useful CSS tips and tricks.

Price $99
Suitable for Beginners with no Programming Experience

Web-developers on Smashing Magazine have written many articles about CSS, and the articles they've written contain many useful techniques that can save you a lot of time. This article will teach you 53 CSS techniques that you should know as a front-end web developer.

Price Free
Suitable for All

This article provides a clear introduction to CSS animation and teaches beginners to make animations from scratch. If you're interested in coding more than just layouts and want to learn how to create animations with CSS, this would be a great article to get started on CSS animations.

Price Free
Suitable for Beginners with some CSS Programming Experience

1stWebdesigner is a professional community for experts to share web design knowledge and to help each other. Each tutorial contributor has a different expertise, so the tips there should be quite varied.

Price Free
Suitable for Beginners with basic CSS Programming Experience

Tuts Plus's blog is constantly updated and it is a great resource to keep up with the newest CSS trend. The blog contains many useful and free CSS tips and tricks with clear instructions and demonstrations. You may find something useful if you dig around their blog.

Price Free
Suitable for Beginners with basic CSS Programming Experience

CSS Zen Guide provides demonstrations of excellent CSS design templates that will help inspire you to design your own website. The site truly shows you how amazing CSS can be.

Price Free
Suitable for Beginners with basic CSS Programming Experience

CSS-Tricks is a site about all things web design and development. It introduces some related technologies and provides snippets, videos, tricks and tutorials. You could find an abundance useful tips and tricks here. Enjoy it!

Price free
Suitable for For all levels

This invaluable resource will help check your CSS code for any errors, .

Price Free

When you stuck on an CSS problem, try here to find the answer you need so you can move on. Every question creates a thread where other develpoers can post screenshots of their CSS issues, provide answers, and comment. It is suggested to look at questions people posted already before you post a new question that you really can't find an answer.

Price Free

The best way to learn code is by doing, and JSFiddle is an excellent place to play with HTML, CSS, and JavaScript - the online web console will instantly render the results so you can see what you're doing. Through the site, which purports itself as a Web Playground, you can quickly fiddle with your code and share your results.

Price Free

Running on Node.js, your browser, and Rhino Less CSS extends CSS to allow variables, mixins, functions and many other techniques that allow you to make CSS that is more maintainable, themable and extendable. Less CSS was originally written in Ruby and then ported to JavaScript, but you can pretty much install it for Python, Rails, PHP, .Net, and Java.

Price Free

Chrome Dev tools are becoming more and more prevalent for a reason. It's fast, lightweight, and great for debugging webpages. Many have found the Chrome Developer Tools more responsive than firebug, but you can try both out and see which one you feel the most comfortable using.

Price Free

Mistakes are inevitable, and you'll naturally need some debugging tools to make the process easier. The highly customizable Firebug is one of the most popular debugging tools out there for years now, and it's goot at debugging web development issues such as CSS problems. Although it was originally designed as a firefox addon, it's cross-platform so you can install it for any browser you want to use it with.

Price Free

If you prefer using Firefox and want it tailored for developing, you can install the Firefox developer edition to see what new experimental tools they're making for developers.

Price Free

About Codementor
Learn CSS

Can't figure out what is wrong with your site and why won't the CSS make it look the way you intended it to look? Instead of spending hours on fixing your site, find a mentor and teach you what to do to save your valuable time! Many of our mentors have years of experience with using the language professionally, and they will help you understand what went wrong and how to fix things.

Live 1:1 help from expert developers

Codementor is your live 1:1 expert mentor helping you in real time.

Codementor is your live 1:1 expert helping you in real time