Heads up! This blog post hasn't been updated in over 2 years. CodePen is an ever changing place, so if this post references features, you're probably better off checking the docs. Get in touch with support if you have further questions.

CSS1K is an interesting idea by Jacob Rask.

As CSS use is growing, so is the average CSS file size. Popular sites have in average 27 K of CSS, but some use up to a megabyte of style sheets!

That’s up to 41 K as of August 15 2013.

CSS1K invites you to show that web developers are more inventive than ever, and that limitations can sparkle creativity.

Basically you style the homepage using only 1 K of CSS and send a pull request through GitHub and your design will be featured there as well.

CodePen is a perfect place to play around with a design for this. Here is a Pen you can fork with the HTML ready to go. Or, literally just put


in the HTML area of your Pen and it will pull in that HTML.

Then style away! You should turn on the Prefix Free option under the CSS settings, because vendor prefixes don’t count against you in the contest. This way you won’t have to author them but you’ll get all the compatibility.

To test the size, you could paste the CSS into this textarea and it will measure it for you:

See the Pen Count The File Size of Arbitrary Text in Textarea by Chris Coyier (@chriscoyier) on CodePen

The rule is “compressed” CSS though, so if you’re close you could run it through a compressor first.

I became aware of this project again because I saw some Pens going around doing just this!

See the Pen CSS1K Theme – Crawl by Bram de Haan (@atelierbram) on CodePen

See the Pen CSS1k Theme by Paul (@plfstr) on CodePen

Comment here if you make one, I’d love to see!