Photography of Alvaro Montoro being a doofus
Alvaro Montoro

Spanish Longhorn

cartoon of a werewolf saying :where(.wolf) { will-change: shape-outside; }

Bad CSS-Dad Jokes (IV)

I haven't shared any terrible dad jokes in a while... did you think the nightmare was over? Think again! This time, I'm back with a whole batch of Halloween-themed Web Developer Dad Jokes.

html css jokes watercooler

You can check out the previous editions of this terrible series of web developer dad jokes:

And now, we arrive at the latest chapter. One that could be called "A New Hope." But let's be honest... hope is the last thing you'll find here.

On to what really matters!

Why did the web developer ghost fail HTML validation?
It didn't have a <body>!

I had a second version of this one, but decided to drop it (actually it morphed into something different later in the list):

Why did the Sleepy Hollow's horseman fail HTML validation?
Because it didn't have a <head>!

Why are ghosts terrible at web development?
Because all they ever do is #b00000.

Same applies for web design. I had another punchline: "Because they want all colors to be #b00000." But I like it shorter and more direct.

cartoon of a ghost saying #b00000

Coincidentally, #b00000 is a nice "blood" color.

What is the worst thing that can happen to a web developer ghost?
Floating into a <picture> while being visible.

A headstone is a grave ::marker.

Poltergeists struggle with modern web development.
All they do is float things around.

Why does Sleepy Hollow's horseman love HTML?
Because you can see the <body>... but not the <head>.

.witch {
   background-size: coven;
}

cartoon of witch with green skin

This witch is a single div. Check the code on CodePen

Why do mummies prefer Flexbox over Grid for layouts?
Because it flex-wraps nicely.

.ghost {
   visibility: hidden;
}

Web developers have been searching for a good semantic tag to represent content with a caption for years...
Eventually, they'll <figure> it out.

Why did the <li> run away from the cooking website?
It realized it was on the <menu>.

:where(.wolf) {
   will-change: shape-outside;
}

cartoon of a werewolf saying :where(.wolf) { will-chnage: shape-outside }

This is a variation from a comiCSS cartoon

Why do children like trick-or-treating at the CSS colors' house?
Because they get chocolate.

Why do their parents love it too?
Because they get chartreuse.

Why don't skeletons ever go trick or treating?
Because they have no-<body> to go with.

What is an Italian web developer's favorite pasta?
<li>nguini.

Also valid <span>ghetti, <main>cotti, <p>enne (or <pre>nne)... and probably the one they hate the most: gridciolli.

What will Frankenstein never use to build a website?
firebrick.

cartoon of frankenstein next to the text 'What will Frankenstein never use to build a website? firebrick.'

This Frankenstein's monster is also a single div! Check out how it was coded!

- Knock, knock!
- Who's there?
- <nav>
- <nav> who?
- Bless you!

A shorter version for this one:

- Knock, knock!
- Who's there?
- <h2>
- Bless you!

<head> and <header> imply the existence of <headest>.

This only makes perfect sense actually. Waiting for the W3C announcement any time soon...

...And that's the end for now! Don't forget to check out the previous editions of the bad CSS-dad jokes:

Article originally published on