Learn CSS Online

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.

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.

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.

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!

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!

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.

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.

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.

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.

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.

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.

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.

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!

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.

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.

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!

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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!

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

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.

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.

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.

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.

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.