The Best Online Sources for Learning CSS
WMT Section: Webmaster Tips - WMT Category: Web Design Tips


W3Schools is a popular choice for learning CSS as well as HTML, JavaScript, PHP and more. Here you can learn about the basics, styling, the box model (an inevitable part of CSS), along with advanced topics. W3Schools offers examples, quizzes for testing your knowledge, and references for future use.
Once you’re done learning about CSS, you can get your own CSS Certificate by taking an exam on the W3Schools website. The cost is $95.00 and study materials are provided to you for free. Upon completion you’ll have a CSS Developer Certificate to prove your skills to the world.

CSS Basics

As the title implies, this source only teaches you the basics. There are 18 chapters to go through and they can all be downloaded and/or printed for your convenience. Some of the chapters included are: syntax, classes, IDs, divisions, spans, margins, padding, borders, lists, and positioning.

CSSeasy is just that, an easy to navigation site that lets you learn CSS “the modern way”. What is the modern way you ask? Well, it involves viewing the source code of an actual layout and playing around with it to see what happens when you change something. Many people swear by this method of learning CSS (and other programming languages).
CSSeasy provides you with 8 different layouts to view and edit as you please. Once you open up the layout, go to “view source” and then you can copy and paste the code into your HTML editor, so that you can play around with it.

Mozilla Developer Network

The Mozilla Developer Network is a learning center where you can learn HTML, CSS, and JavaScript. It serves as a resource with links to a variety of CSS tutorials and training materials. There are three sections of material: introductory level, intermediate level, and advanced level. This is a great page to bookmark for future reference.


1KeyData (also known as 1KD), is very similar to W3Schools and CSSeasy. It has many of the same topics as well as useful resources. Additionally, 1KD provides tutorials in German. Their CSS tutorial includes topics on: media types, IDs, margins, borders, padding, font, tables, positioning, the box model, and more.
As the website states, “by the end of this tutorial, you should understand the basic concepts of CSS, as well as using common CSS properties to style your HTML code”.

Adobe Developer Connection

Adobe Developer Connection is much like Mozilla Developer Network as it provides various CSS resources for learning the basics and core concepts. You can also learn how to design with CSS in Dreamweaver, which is great for anyone who uses this program regularly (or wants to use it regularly). is a place to learn CSS step-by-step and it was made with beginners in mind. It includes: introduction to CSS, CSS Tutorial: Part 1, CSS Tutorial: Part 2, CSS Tutorial: Part 3, CSS & Images, and CSS in Web pages. Along with this you’ll have access to a forum, various tutorials, videos and news all regarding CSS.
New tutorials and videos are added frequently; you can subscribe to the newsletter to keep up with new additions., much like CSSeasy, has tutorials broken up into lessons (16 total). Besides English, the content is available in 10 different languages.You can also change the layout of the website to suit your preferences. Lessons include: colors and backgrounds, fonts, text, links, margins and padding, borders, height and width, positioning, and more.


CSS Dog provides tutorials for beginners and advanced users. Additionally, you’ll also find CSS references and information on CSS3 selectors. Each section (beginners and advanced) is broken up into many sub-topics.
Under beginners you’ll learn about: syntax, units, colors, fonts, text, images, links, margins, padding, outlines, scroll-bars, and more. Under advanced, you’ll learn about: visibility, positioning, pseudo classes, pseudo elements, text effects, printing, layouts, and more.

Develop PHP

Don’t let the name fool you, Develop PHP is more than just a place to learn about PHP. It’s also a great resource for learning the fundamentals and properties of CSS and includes video tutorials.

Code Style

Code Style is a place to get your CSS questions answered and a place to learn how to write better CSS code. It includes a CSS glossary, CSS font-family glossary, and media dependent style sheet glossary. If you’re looking for great CSS resource pages to bookmark, this is definitely one to have.
You can also learn about using CSS3 styles with JavaScript in order to add advanced styling to your pages like rounded corners and drop shadows. It also provides you with a CSS validator to install on your computer.

Studies Inn

At Studies Inn you’ll find CSS tutorials ranging from syntax, internal CSS style sheets, external CSS style sheets, inline CSS, classes, backgrounds, outline, padding, margins, lists, tables, and much more. On top of that you’ll find tutorials on other topics, free scripts, and technology articles.

CSS Portal

CSS Portal is the ultimate site for resources, tools, examples, and online generators. Along with learning CSS, you can: validate your CSS code; use the CSS layout generator to create fluid or fixed layouts; find CSS templates to use for your websites; use the CSS menu generator; and format your CSS code with their code formatting generator.
Under sources you’ll find books, color names, hacks, news, properties, software, snippets, templates, and tutorials. Under tools you’ll find a CSS validator, generators, and editors. So as you can see, CSS Portal is definitely a site that you’ll want to reference often for all of your CSS needs.

Easy CSS Tutorial

At Easy CSS Tutorial, you can learn the basics all the way up to advanced topics. There are 6 sections to go through: basics, links and lists, text and fonts, working with images, box model, and CSS layouts. Each section is broken up much like a course, allowing you to conveniently go at your own pace.


Tuts+ gives you 30 days to learn HTML and CSS. The free course is broken down into 30 days, which each day being a new topic. If you can stick to it for 30 days, you’ll know all that you need to know in no time.
Since this course is HTML and CSS mixed together, you’ll learn more than you will at the sources above, which just focus on CSS. Topics include: lists, heading tags, anchors, images, the basics of typography, zen coding, CSS frameworks, how to slice a PSD, how to create snippets, and much more.

With all of the FREE available resources online to learn CSS, there is really no excuse not to at least know the basics.

What your favorite source for learning CSS and referencing back when needed?

Add comment

Security code


Site Map

Write for us!

Do you have any Joomla custom work either on template, component, module or plugin to show off?
Or do you offer free tips and resources for webmasters?

About is a Joomla CMS related portal that publishes authentic Joomla Extensions, tips and resources for webmasters. Follow wmt_joomla on Twitter