I recently stumbled upon a wonderful list of 34 CSS “puns”, which deserve both a visit and a comment.
CSS, short for “cascading style sheets”, is a markup language which allows you to style your website by assigning types to various objects, and then assigning styles to types.
For instance, the title at the top of this post is given the type “H2”, and in the CSS file associated with the site, it’s given the following attributes:
These specifications dictate things like “How large is the font on the page?” (
font-size), how much spacing is there between the header and the start of the post (
padding-bottom), and the size and color of the border (
border-bottom) below the header.
CSS is used by nearly every site on the web today to specify format and styling, but I’d never seen it used for punning.
What was particularly interesting to me as a pun enthusiast is that there were actually three different kinds of pun here.
Monolingual English Puns
Some rely on the fact that terms used in CSS also have meaning in English, and are effectively monolingual, relying only on English:
This is my least favorite because, putting aside the sophomoric and uncreative “lol women” punchline, it doesn’t mean anything in CSS.
right: 100% means “This element is all the way to right of the screen”, and
margin: 0 means “there’s no spacing between this element and the surrounding ones”.
So, although English speakers “get the joke”, it doesn’t make sense in another language. It’s the CSS humor equivalent to pointing at an Afrikaans-speaking cook’s business card and giggling while saying “LOL! His business card says “Kok”!!!”.
Bilingual English/CSS Puns
Some make sense in English and in CSS, and work bilingually:
CSS relies heavily on “nesting”, the idea that you put one style (a bold word) inside a larger style (a paragraph) inside a larger style (“the page”). When you use
inherit for an attribute (like
position), you’re just saying that “this has the same value as whatever contains it”.
So, here, in addition to the clear English meaning, this is valid CSS: A monarch ends up with the same position as the family they’re born into. Which, as Game of Thrones has told us, is problematic when somebody increases the margin between your father’s
Finally, some only really make sense to CSS speakers, and hinge on some understanding of the second language. They’re not quite monolingual CSS, but they’re getting close:
Sometimes, you want a style which only applies when one style is inside another (so, for instance, a quoted list looks different than a regular list), and to do this, you specify define the styles separately, then specify the style in the format
outside.inside. So, in valid CSS, this is stating that Mario gets twice as large when there’s a mushroom inside him.
In case you needed to make punning nerdier…
So, before this post
overflows, I just wanted to make
clear that there’s surprisingly little
margin between these and other sorts of multi-lingual wordplay. So, set your fear to
hidden, and feel free to
transition to even nerdier
forms of humor.
Have a question, comment, or concern about this post? Contact me!