• Home
  • Blog
  • About
  • Contact
Follow on TwitterFollow on FacebookFollow on LinkedinFollow on Github

21+ CSS Puns That Will Hurt Your Stomach From Laughing

CSS is important part of web designing. Let's make some fun out of it. Here's my list of 21 crazy CSS puns that'll hurt your stomach.

- 2 min read

Yesterday, I was helping one of my friend to design his website. It was a business based website and the task was meticulous. Somehow we completed it after working for four hours straight. We were totally exhausted. And we were in need of some refreshment.  He suggested me to look up for some funny memes and jokes.

Then, I started browsing Reddit and I remembered I had once saved a post titled: CSS Puns! Can you come up with more? from r/web_design to read for later. I started going through comments and they were ridiculously hilarious. I shared the same post with my friend, and we were laughing so hard that it started to hurt my stomach.

Later on, he advised me something -- Aman, why don't you share CSS Puns (Funny CSS Jokes) with your readers? I told him "In twistblogg, I normally post tutorial and how-to based articles. I have never shared jokes before." He said -- "OK! Cool. You can always add something extra." That same night, I thought "If I can make at least 5 people laugh, then that means a lot." Moreover, I started TwistBlogg with an agenda -- to help my fellow readers solve their problem. And a bit of smile is always good for body and mind. So, I made my mind, and come up with this list of funny CSS jokes.  

Cascading Style Sheets (CSS) is a stylesheet language that describes how HTML elements are to be displayed in a window. With CSS, you can style your website designs. You can learn more about CSS from here. Below are some funny CSS jokes to make you laugh.

21 CSS Jokes/Puns to make your day


.fear {


.ghost {
color:  white;
opacity:  0.1;


#titanic {
float:  none;


#tower-of-pisa {
font-style:  italic;


.internet-explorer {
break-inside:  auto;


.fat-girl:nth-child(n) {
width:  inherit;


.belly {
overflow:  visible;


.egg::before {
content:  'chicken';


.big-bang :: before {
content:  " ";
.big-bang :: after{
content:  "100000000000000000000000000.....";


.muscles {
display:  flex;


#bermuda-triangle {
display:  none;


#periodic {
display:  table;


.obese {
width:  200%;
overflow:  visible;


.wife {
right:  100%;
margin:  0%;


.single-lane-road {
width:  auto;


.samsung {
@extend  apple;


#rip {
bottom:  -6912px;
/* 6912px = 6 feet */


.my-friends-brain :: before, .my-friends-brain :: after {
content:  " " ;


.rich-people {
top:  1%;
.working-class {
bottom:  99%;


.maths :: before {
content:  " ";

.maths :: after {
content:  " Brain Not Found ";


.puns :: before {
content:  " ";
.puns :: after {
content:  " Stomach pain, Smile, Laugh";

Here's one more from N.L Tayoh,


/ Rich poor starts /
.rich-people {
top: 1%;

.working-class {
bottom: 99%;

.rich-man:nth-child(n) {
riches: inherit;

.poor-man:nth-child(n) {
povery: inherit;

.muscles .rich-man {
display: flex;

.muscles .poor-man {
display: block;

/ Now let's talk rich men belly 😁 /

.belly .is_rich-man{
overflow: visible;

.belly .is_poor-man{
overflow: hidden;

That's all ! Hopefully, above 21 CSS jokes/puns moved your face muscles at minimum. Now, its time to focus on real deal. Here are few handpicked tutorials for you to read next:

Last but not the least, I have some questions to all my readers: Which one is your favorite? Do you have something extra to share? Do you want me to come up with more list?

Mail ThisShare on FacebookTweet on TwitterFollow on Linkedin

Sign up for The Best Bits

Get all of our posts, straight to your email. Opt-out any time.

Not into email list things, but still want to read more?

Follow us on Twitter

© 2019 - 2020 TwistBlogg / All Rights Reserved.

Follow on TwitterFollow on TelegramFollow on FacebookFollow on GithubFollow on PinterestFollow on LinkedinFollow on MixFollow on Instagram