Actual programming with HTML and CSS (without javascript)

I usually stick with academic or research issues, but today, I wanted to have some fun. Geek fun.

While W3C describes Cascading Style Sheets (CSS) as a mechanism for adding style (e.g. fonts, colors, spacing) to Web documents, it is also a bona fide programming language. In fact, it is one of the most widespread declarative languages.

But how powerful is CSS? It is not Turing complete, so there is no hope of programming full applications.  However, CSS may be surprisingly powerful. (Update: It turns out that HTML+CSS is Turing complete!)

Suppose you are given a plain HTML table and you want to add counters and colors to it. Starting with this table:


We want to color rows in alternative colors. We need counters and a way to color the second line differently.

Solution: Add the following lines to your CSS style sheet:

tr{counter-increment: mycounter}
table {counter-reset: mycounter -1}
td:first-child:before {content: counter(mycounter)". " }
tr:nth-child(2n+2) td {background-color: #ccc;}
tr:nth-child(2n+3) td {background-color: #ddd;}

Published by

Daniel Lemire

A computer science professor at the University of Quebec (TELUQ).

10 thoughts on “Actual programming with HTML and CSS (without javascript)”

  1. In 1997 or so, I wrote a small game in html (no javascript) that used the timed refresh meta. It showed a screen with images, good and bad guys, where you had to “shoot” the bad guy first. If you waited to long, you were shot. If you shot a good guy, you would loose as well. Not much for a game, but I was happy it could all be done with plain HTML 🙂

  2. This is a fantastic discovery. Completely novel to me, but I am concerned about browser compatibility. It looks like CSS3 so you can count out most IEs. What have you found?

  3. My instinct is that it is not, because you can’t delete characters on the ‘tape’. Counters and generators provide some limited computation ability but it’s not arbitrary and requires significant setup in the HTML to do anything big. Proving Turing-completeness is done by reducing a known Turing-complete language to the target… I haven’t seen that done.

Leave a Reply

Your email address will not be published. The comment form expects plain text. If you need to format your text, you can use HTML elements such strong, blockquote, cite, code and em. For formatting code as HTML automatically, I recommend

You may subscribe to this blog by email.