33+ Online Resources to Learn CSS

August 1st, 2009 Posted in CSS

An Introduction for Beginners

Before going into detail let’s learn about CSS or Cascading Style Sheets. In layman’s language CSS is a language that adds style to your document like colors, borders, margins and borders. Basically CSS is the style sheet language used to describe the overall presentation of a document like the appearance and presentation of a document written in markup languages, especially in HTML and XHTML. Cascading Style Sheets are designed to separate the contents from the presentation of a document.

Benefits of CSS

There are innumerable advantages of learning CSS for web designers. Since it helps in improving the content accessibility and provides more flexibility and control in the specification of document presentation, it has become an inseparable part of web designing. One can say that a web designer is incomplete without CSS and I can bet on it.

So in order to spread knowledge on this revolutionary tool of web designing I would like to share some great resources rather say a treasure where anyone can learn CSS or Cascading Style Sheets online.
Websites, Blogs and Tutorials

1. CSS Basics

This portal can provide all basic elements of CSS. Divided in 18 chapters, this portal covers all the basics of CSS. Though chapters are short but it can give a capsule understanding on every topic.

2. W3Schools

It is one of the largest websites which provide quick and easy learning through tips and tutorials in varied of web design and development technologies including some great Server Scripting languages like PHP, ASP, SQL, etc. Here you can find everything regarding CSS right from the examples to the common problems. I can say that this portal will help you immensely in learning CSS.

3. SmashingMagazine

This site is known to majority of web designers and developers of the world. SmashingMagazine too having a great CSS section which is being updated timely to provide some nice CSS tips and tutorials to its readers.

4. DynamicDrive

Dynamic Drive is one of the great places to obtain free and original Scripts (CSS, DHTML & Javascripts) which one can use in its website. This site is a great source of learning as many profound web designers of the entire globe have contributed some great scripts as a freebie. I think the CSS Menu and Navigation Scripts are the best one available on DynamicDrive.

5. Friendlybit

A nice Beginner’s guide to CSS by “Friendly Bit”. This site provides all necessary information on all basic aspects of CSS through a great tutorial. With the help of this tutorial you can make your first CSS powered website. I am including this 4 Page Beginner’s guide in the list as its very time consuming and can be boring to go through each and every property before starting with a website.

6. Line25 Tutorial

It is a small 3-step tutorial by Chris Spooner on “Getting started with CSS.” The tutorial can be very helpful for the beginners.

7. HTMLDog

HTML Dog has the web designer’s resource for everything including the HTML and CSS. No matter whether you are a Beginner, Intermediate or an Advanced Learner, HTMLDog has something special for all you guys.

8. SitePoint

Reference.sitepoint.com covers almost all aspects on CSS language. This site provides full descriptions, working examples, and browser compatibility information on the entire CSS language, thus a great source to learn CSS.

9. Tizag

You have used HTML in the past; you know the basic HTML tags and vocabulary adn and you want to have a kick start with CSS so Tizag can be a great resource for you. The site has some great step by step lessons with nice “Try it out” CSS editor to learn from.

10. CSSPlay

Like DynamicDrive, CSSplay is also a great site to explore and learn CSS. Powered with some really creative demos and tricks, one can definitely find something for any website project.

11. AListApart

It is one of the useful, simple and efficient sources to learn CSS. With more than 100 articles on CSS, one can learn many aspects on CSS from this portal. A List Apart Magazine explores the design, development, and meaning of web content, with a special focus on web standards and best practices.

12. WebDesignfromScratch

If you are looking for some great study on CSS with explanation through excellent examples, Webdesignfromscratch can be a good resource for you.

13. MaxDesign

This site provides some great, knowledgeable and excellent tutorials on how to create different list layouts with Cascanding Style Sheets. The site has also the great section for CSS tutorials on various topics like tutorials on list, nested lists, floats, selectors, etc. So if you are a tutorial lover, please have a look at maxdesign.

14. CSS-Tricks

A blog by Chris Coyier to follow to learn some great tricks on CSS.

15. CSSDog

CSSDog is a great site you can refer if you want to go for a detailed study on CSS. This site has sections for both the Beginer and Advanced Learners.

16. Net.TutsPlus

Most of us are aware of net tutsplus, the blog has also the great section on CSS which can help the learners to stay updated with CSS and to learn some new CSS stuff.

17. MeyerWeb

Meyer has written a number of books and articles on CSS and given many presentations for promoting the use of this style sheet language. Here I would like to share a collection of work by Eric Meyer which will be helpful for guys learning CSS.
CSS Layouts
Have learned some basics on CSS and don’t want to waste time working on the same basic layouts for a general website design? Try a readymade CSS Layout, Just select a layout matching your needs, play with the code and have your website done. Here I would like to share some website distributing website layouts to be used for your website as a freebie.

18. CSSEasy

19. MyCelly

20. Code-Sucks

Online CSS Creator

21. CSSCreator

CSS Layout Creator Online is a very nice Online Tool to create CSS which helps you to create a fully functioning website in pure CSS. This online CSS generator can create a fluid or fixed width floated column layout, with up to 3 columns and with header and footer.

Form Builder

Web forms take time to build, time to style and time to test. So here is a small list of Form Builders online which can really save your time.

22. MyContactForm

23. Accessify Form Builder

CSS Forums

You may face some problems while developing your CSS powered site. Don’t worry; we have some great forums where experts are available to solve your problems. Here’s a small list of CSS forum which can solve any of your CSS related problem for sure.

24. DigitalPoint CSS Forum

25. CSSDrive CSS Forum

26. DynamicDrive CSS Forum

27. CSS-Tricks CSS Forum

28. Sitepoint CSS Forum

CSS Galleries

Last but not the least; CSS Desgin Galleries can be the great sourcing of CSS learning. Every day, hordes of designers come out with brilliant ideas and designs, thus a great place to learn, besides sharing knowledge. You can find some really great CSS design galleries showcasing some fascinating and brilliant designs to learn and take inspiration from. Following are some really good CSS Design galleries.

29. CSSMania

30. CSSElite

31. CSS-Website

32. CSSRemix

33. MostInspired

So this was the list which can surely teach you something in CSS. Still I think there are lot more links available on Internet not known by me and some in queue to come, I would like the list to be updated regularly so creating Addition(heading) at last of the article. Please suggest your links you think should be there in the list. Thank You!


34. CSSPedia

Author -

who has written 551 posts on [Re]Encoded.com.

Contact the author

13 Responses to “33+ Online Resources to Learn CSS”

  1. Marketing_Secret_Sauce Says:

    Thanks for this, these are good places to start learning.

  2. Phaoloo Says:

    Awesome resources for all newbies and experienced designers.

  3. Shabu | CSS Pedia Says:

    CSSPedia.org is becoming a large CSS resource gallery, It’d be great if you include this.

    Thanks for sharing a large list of CSS resources 🙂

  4. admin Says:

    Thanks @Marketing_Secret_Sauce @Phaoloo for appreciating the list..

    @Shabu Included CSSPedia, I hope it can be a great resource for css learners.

  5. BenDesign Says:

    Great Sources for Beginners. Thank you. 🙂

  6. 小T Says:


  7. affordable bespoke web design Says:

    ‘Line25 Tutorial’ helped me a lot in my web designing and maintaining.

  8. Csi Dedektiflik Says:

    Great Sources for Beginners

  9. Freebies Says:

    Thank you bunches. I think this is my new favorite blog.

  10. webseite erstellen Says:

    These really helped me to build my homepage, I can really appreciated if people take some time and write a usefull tutorial.

  11. CSS Transparency Sources Says:

    […] 33+ Online Resources to Learn CSS An Introduction for Beginners Before going into detail let’s learn… […]

  12. CSS Gallery Says:

    Great collection of inspirational resources. We did notice you didn’t include http://cssgallery.com/ in your CSS Gallery list. We hope you will consider us on any future revisions of your list. Cheers!

  13. EasyLifeTerm.com Says:

    When marketing on the internet, I want and need a design to stand out and these sites fit the bill. My designer encouraged me to look at your stuff, I’m glad he did. Thanks again for a great article.

Leave a Reply