Want to Make a Change, Start with Your Blog!

21 CSS Puns That'll Hurt Your Stomach From Laughing

Last Updated on: 2019-11-25T11:12:57Z   /   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.
css puns and jokes

21 CSS Jokes/Puns to make your day


1)
.fear {
          display: none;
    }


2)
.ghost {
          color:  white;
          opacity:  0.1;
    }


3)
#titanic {
          float:  none;
    }


4)
#tower-of-pisa {
          font-style:  italic;
    }


5)
.internet-explorer {
          break-inside:  auto;
    }


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


7)
.belly {
          overflow:  visible;
    }


8)
.egg::before {
          content:  'chicken';
    }


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


10)
.muscles {
          display:  flex;
    }


11)
#bermuda-triangle {
          display:  none;
    }


12)
#periodic {
          display:  table;
    }


13)
.obese {
          width:  200%;
          overflow:  visible;
    }


14)
.wife {
          right:  100%;
          margin:  0%;
    }


15)
.single-lane-road {
          width:  auto;
    }


16)
.samsung {
          @extend  apple;
    }


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


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


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


20)
.maths :: before {
          content:  " ";
    } 
.maths :: after {
          content:  " Brain Not Found ";
    }


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

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?
Comment Policy: We love comments and appreciate the time that our readers spend to share ideas and give feedback. Thank you to everyone who comments at the TwistBlogg.com.

However, we also want our comments to be as useful as possible to all of our readers. While we keep 99% of comments, we will remove spam and irrelevant comments.

Note: We reserve the right to remove any comments from the site; please leave comments that are respectful and useful.
 
Join Our Community of 2K+ Bloggers