CSS

33+ Online Resources to Learn CSS

24 Comments 01 August 2009


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!

Addition:

34. CSSPedia

Share and Enjoy:
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google

Related posts:

  1. 12 Great CSS Resources: From Inspiration to Implementation.
  2. Free Online Photoshop and More Photoshop Tutorials
  3. The CSS Resource Guide: Getting Rid of Table Layouts Forever
  4. 45 awesome Photoshop website template/layout tutorials
  5. 42 Must-Bookmark Resources for Web Designers – Inspiration, Design, Color, Fonts and More

Author

admin

admin - who has written 135 posts on [Re]Encoded.com.


Contact the author

Your Comments

24 Comments so far

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

  2. Phaoloo says:

    Awesome resources for all newbies and experienced designers.

  3. 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. ‘Line25 Tutorial’ helped me a lot in my web designing and maintaining.

  8. Great Sources for Beginners

  9. Freebies says:

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


Trackbacks/Pingbacks

  1. links for 2009-08-02 | burningCat - 02. Aug, 2009

    [...] 33+ Online Resources to Learn CSS (tags: css reference) [...]

  2. 33+ Online Resources to Learn CSS | Choose Daily - 02. Aug, 2009

    [...] 33+ Online Resources to Learn CSS [...]

  3. 33+ Online Resources to Learn CSS | [Re]Encoded.com « Netcrema - creme de la social news via digg + delicious + stumpleupon + reddit - 02. Aug, 2009

    [...] 33+ Online Resources to Learn CSS | [Re]Encoded.comreencoded.com [...]

  4. 33+ Online Resources To Learn CSS | Design Newz - 02. Aug, 2009

    [...] 33+ Online Resources To Learn CSS [...]

  5. • Blog Tipps 3. August 2009 » Gif-Bilder.de - Blog - 03. Aug, 2009

    [...] 33+ Online Ressourcen um CSS lernen zu können [...]

  6. 24 design, tech and web-related links for you to enjoy and share =) « Adrian Zyzik’s Weblog - 03. Aug, 2009

    [...] GIMP: Retoque facial profesional Bauhaus: Ninety Years of Inspiration Inspiration Smashing Magaz 33+ Online Resources to Learn CSS [Re]Encoded.com HOW TO: Customize Your YouTube Channel 30 essential Mac time-saving shortcuts News TechRadar UK [...]

  7. LISTDUB» 33+ Online Resources to Learn CSS | [Re]Encoded.com - 03. Aug, 2009

    [...] 33+ Online Resources to Learn CSS | [Re]Encoded.com. Categories: MISC Tags: css, resources Comments (0) Trackbacks (0) Leave a comment [...]

  8. links for 2009-08-03 « Giri’s Blogmarks - 03. Aug, 2009

    [...] 33+ Online Resources to Learn CSS | [Re]Encoded.com (tags: css tutorials howto resources) Possibly related posts: (automatically generated)links for 2009-07-06This Week on MA.GNOLIACSS – A Starting Point   [...]

  9. 45+ Awesome Fresh Links Submitted by tripwire magazine Readers | tripwire magazine - 03. Aug, 2009

    [...] 33+ Online Resources to Learn CSS [...]

  10. links for 2009-08-04 » 4exp.net - 04. Aug, 2009

    [...] 33+ Online Resources to Learn CSS | [Re]Encoded.com (tags: webdesign css tutorial resources development) [...]

  11. links for 2009-08-05 « toonz - 05. Aug, 2009

    [...] 33+ Online Resources to Learn CSS | [Re]Encoded.com (tags: tutorial resources list links) [...]

  12. 33 Recursos on-line para aprender CSS desde Reencoded | Area Photoshop - 07. Aug, 2009

    [...] Enlace | 33+ Online Resources to Learn CSS [...]

  13. ¿Quieres aprender CSS? - Blog - 09. Sep, 2009

    [...] por estos días. Su llegada trajo a la web más control sobre la edición de proyectos de diseño. En REECORDER publicaron un listado de recursos online para aprender algo más o todo sobre esta panacea [...]

  14. ¿Quieres aprender CSS? « catheryncarcamo.com - 09. Oct, 2009

    [...] por estos días. Su llegada trajo a la web más control sobre la edición de proyectos de diseño. En REECORDER publicaron un listado de recursos online para aprender algo más o todo sobre esta panacea [...]

  15. Estrategia Digital - Catheryn Cárcamo « Estrategia Digital - 10. Oct, 2009

    [...] por estos días. Su llegada trajo a la web más control sobre la edición de proyectos de diseño. En REECORDER publicaron un listado de recursos online para aprender algo más o todo sobre esta nueva panacea de los [...]

Share your view

Post a comment

          

Community News

  • Free Telecom Icon Set

    ComFi developed a specific ”ComFi Telecom Icons” icon pack in 32 x 32 pixels in Jan 2010. For personal & commercial use.

    February 8, 2010
  • 25 Unique 3D Light Graphics Wallpapers

    What I’m gonna show you is 3D version of light painting wallpapers, which called light graphics. At first, I’m a little bit confused & had no idea what they are called.

    February 8, 2010
  • 30 Twitter Hacks and Plugins to Spice Up Your Word…

    Twitter has grown exponentially in the past few months and Still, It’s growing like crazy. Twitter has surpassed Facebook and others to become the fastest-growing site in the “Member Communitie…

    February 8, 2010
  • 50 Fantastic Examples Of Origami Art Work

    Origami,from oru meaning “folding“, and kami meaning “paper” is the traditional Japanese art of paper folding. The goal of this art is to create a representation of an object using geometri…

    February 8, 2010
  • Web Hosting Layout Tutorial in Adobe Photoshop

    This tutorial will teach you how to create a PSD layout for a hosting business, internet service provider, or any other internet related business.

    February 7, 2010






© 2010 [Re]Encoded.com. Powered by Wordpress.