Learn Some CSS, 30 Seconds At A Time

Learn Some CSS, 30 Seconds At A Time

If you’re learning CSS, or you want a friendly introduction to some of its terms and concepts, try 30 Seconds of CSS. Each entry on this site shows a different bit of code, demonstrates the result, and explains how each part of the code works.

Photo: Visual Hunt

Here are some entries you’ll understand even if you aren’t a designer or developer:

  • Bouncing loader creates an animation without using any image files.
  • Disable selection makes it impossible for the user to select text. (Evil!)
  • System font stack lets a developer pick which fonts to display if others aren’t available.
  • Sibling fade grays out other text when the user hovers over something, like a menu bar.

The site explains 33 snippets of CSS, and contains snippets that some experienced designers had never seen. For over 1500 more snippets (without detailed explanations), go to LittleSnippets.net.


  • I love atomiks post as their posts guide us step by step with simple English. I learned many things from this blog and now employees at my office (IndyLogix Solutions) learn from this site too.

    Thanks for sharing this post as from onwards so many newbies will start learning from this blog.

Log in to comment on this story!