I’ve been moaning about bloated web pages for some time now. Despite my protests, web page weights are rapidly approaching 1MB.

The CSS1K project illustrates what you can do with a single kilobyte of slim-lined stylesheet code. It’s been influenced by galleries such as Zen Garden and JavaScript competitions such as js1k.com but, to my knowledge, there’s never been a CSS challenge.

The rules are simple:

  1. You must style the HTML5 page at css1k.com.
  2. Submissions must be in a single CSS file up to 1,024 bytes in size (minification is permitted).
  3. Vendor prefixes do not count toward the total. You should submit non-prefixed code and css1k.com will add the browser prefixes for you.
  4. External resources such as images, fonts and @imports are forbidden. You can’t use data URIs either — shame!
  5. Cross-browser compatibility is preferable, but you can use graceful degradation if necessary.
  6. Your code must be released under the open source MIT license.

There are a few dozen entries so far. I particularly liked:

  • Skewed — clever, although not a great user experience!
  • Bbubles — great demonstration of CSS transitions
  • Bookshelf — what did you expect?
  • Desktop — Windows XP in 1K!
  • Geocities — ahh, the nostalgia!

There are relatively few impressive examples so this is your chance to show off your ninja-like CSS skills! If you decide to post an entry, please leave your link in the comments below…

Tags: CSS, CSS3, HTML5 Dev Center
Craig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler

Free Guide:

How to Choose the Right Charting Library for Your Application

How do you make sure that the charting library you choose has everything you need? Sign up to receive this detailed guide from FusionCharts, which explores all the factors you need to consider before making the decision.

  • http://www.itmitica.com/en/ itmitică

    Nice selection.

    A few ignore the mobile world though, like Bbubbles does.

  • http://www.itmitica.com/en/ itmitică

    If the imposed conditions surfaces smart design ideas, overall most of them have usability issues.

    With a few notable exceptions, the visited link part is mostly ignored, which is pretty bad from where I stand.

    The hover event is overused and the unfolding of hidden lists/elements has no smooth transition to it.

    • http://www.digitalidiom.co.uk Derek UK web Designer

      … does it depend on which browser you are using ?? – Looks good on Windows FireFox

  • http://www.crearedesign.co.uk/ James Willis

    Hi Craig, Thanks for sharing this, I really enjoyed the viewing the creations on that site. With my css files usually eating up around 10-12kb, Its great to see people pushing the boundary’s on what can be achieved with such a small amount of code. Thanks again Craig,


  • http://www.digitalidiom.co.uk Derek UK web Designer

    AWESOME !!! – Just like Zen Garden this is inspiring and a showcase of what can be done. Well done to the contributors. I always lag behind due to time contraints as a freelancer. Although I did get 3 designs onto the Zen Garden later … taught me loads then – I hope this does the same… Brilliant and thanks.

  • http://www.rsatechnologies.in rakesh kumar

    amazing designs, I have never ever seen such a beautiful design using CSS. Thanks for posting these on the internet. Surely this has forced me to bookmark your site.

  • Luke

    You do understand the fundamental difference between PHP and CSS, right?

  • Dennis

    That was a spam-bot message. They fill out any form they can find which lets them add a URL.

  • http://www.onsman.com Ricky Onsman

    You’re right, Dennis. Luke, that one got through but the comment has now been removed.

Special Offer
Free course!

Git into it! Bonus course Introduction to Git is yours when you take up a free 14 day SitePoint Premium trial.