Top 17 Resources to learn CSS online

I recently discovered I needed to brush up on my CSS skills. Here are a few sites that can help.

Head First HTML CSS XHTML When the first crop of post-Mosaic / Lynx browsers showed up, everybody was talking HTML, or HyperText Markup Language. That was a very basic language to specify what to in italics, what to be bold, what to be underlined. As long as the web was made of simple pages with links, that was sufficient. Soon enough, as sites became more complex, people wanted to be able to force an uniform look on pages. Thus appeared CSS or Cascading Style Sheets, which are basically templates. In a CSS template, you can specify if your headers (H1, H2, H3, and so on) should be coloured or how big should they be, if the default is not good enough. Both CSS and HTML can do far more than the simple examples above, but in general, think of HTML as a limited scope “language” to display information, and CSS for higher-level arrangements and definitions. To learn CSS you need to know HTML first, just like you need to be able to run before you can play soccer (for the most part, at least).

 

CSS Basics . com

cssbasics_preview Structured in 18 Chapters, this clean, eye-pleasing splashpress media property allows you to easily print and / or download everything. Apart from a plug for 2 commercial sites on the website, this excellent introduction to CSS seems free of ads.

 

Tizag Tutorials

tizag_preview Just like htmlPlayground or W3 Schools, Tizag allows you to experiment with code while learning. It also introduces you to the most important Web Design & Development languages, technologies and practices. The tone is friendly and the information very well structured. Have a look for yourself!

 

W3 Schools

w3schools_preview One of the most recommended sites to learn CSS, it has a great “Try it yourself” feature, which allows you to do just that: experiment with code. W3 Schools seems to have more examples than Tizag, though is a bit more formal.

 

html Playground

htmlPlayground_preview This site focuses on building a sandbox where you can experiment and learn empirically. Use it if you already have a good grasp of theory and want to gain a better insight on how things work.

 

CSS Tutorial @ html.net

htmlnet_previewHTML.net has  16 lessons in more than 10 languages. If your first language is not English, there’s a good chance that they’ve got you covered, without the use of the insufferable Google Translate.Bug

 

CSS Dog

cssdog_preview The Dog has a tutorial for every level, starting with Beginners and ending with Advanced (gurus). They also have handy quick reference guides, CSS3 selectors and tutorials for other “buzzwords”, such as HTML, XHTML, HTTP, etc.

 

W3C Learning CSS

w3c-learning-css_preview Not really a tutorial site, but rather a list of CSS resources in almost every language (Romanian has even two versions). Use it especially if this selections was not enough. Bring it on

 

University of Texas at Austin

utexas_preview

This Intro presents CSS Basics almost as a course outline (or as a very basic 101).

 

#css.learn {learn style : with style; }

css-learn_preview From tutorials to miscellaneous articles, css.learn will have you coding CSS in no time at all. With style! Smug

 

Opera Web Standards Curriculum

OperaWebStandardsCurriculum_preview Opera, the mighty little browser from Norway has been fighting for web standards almost since its inception. They should know a thing or two, since when Microsoft had been discriminating against their users, they took on Microsoft with the Bork! Bork! Bork! version. Then they got the European Union to impose record fines (billions) on Microsoft. You can definitely learn a thing or two from them.Cool

 

CSS How To

css-how-to_preview Use this site to learn specific skills and methods. In particular, they can teach you in 4 lessons how to go from PSD to HTML / CSS and many other step by step tutorials.

 

cssBeauty

cssBeauty_preview This is mostly a news site, where you can read about the latest events in the Web Designer community as well as find job offerings.

 

Zen Garden

ZenGarden_preview A gallery of demonstrations by various artists of “what can be accomplished visually through CSS-based design”. The HTML and CSS files are easily downloadable for your inspection. Watch, clean your eyes, enjoy and learn by example!

 

CSS Play

cssplay_preview Made by a former electronics design engineer and Speccy enthusiast, this site showcases code and teaches you concepts by showing you the finished product. Learning to conquer specific goals is an excellent way to start.

 

EchoEcho

EchoEcho_preview A beginner’s guide with quizzes after each chapter. Targetting complete beginners, this site also forums and “hosting tutorials”, usually infomercials.

 

Quackit

quackit_preview Another website that aims to transform you into a webmaster, Quackit will show you examples and will teach all you need to know to become a basement living online entrepreneur (except how to make money). Clown

 

Youtube Video Tutorials

youtube-css_preview Just like you, I’m a visual monkey. I’d rather sit back and enjoy the show, though this way I may learn far less than by actively following instructions. Try to fight this urge, experiment, and you might retain far more than the average guy (such as myself)! Winking

Sources / More info: wiki-css, wikihow-css, tutsearch, w3c-links, 60+, 20+, 50 best

The following tutorials do not belong to me, and as such, might disappear or change their names.

yt-CSS Tutorials by steveinky – 27 vids 

 

yt-Learn CSS Pro by Lpcools – 13 vids 

 

yt-Adobe Dreamweaver CSS by maurice0822 – 28 vids 

 

yt-Web Development by NappyCHINO – 22 vids 

 

yt-Tutorial: CSS by GWENDOUQUE – 15 vids 

 

yt-html/css by pkopco – 53 vids 

 

blog comments powered by Disqus
Your gift enables us to continue to provide high quality reporting with little or no advertising.