A Hysterical Collection of CSS Puns & Jokes

Twitter

Digg

It is no secret that Cascading Style Sheet is no fun if you’re working long with them. Still, there are ways in CSS which got some charms as it is used in defining the designs. You can make it colorful and playful if you have a knack of humor with you.

In this post, I have come up with the best trending CSS puns and jokes. Developers like to share their funny creativity over all the social network they get their hands on. So, let’s see some the best CSS puns and jokes of all time.

The credit for the source is to https://csshumor.com/all/.

1. Feeling stressed?

p u b .beer { order: 1; }

1	p u b .beer { order: 1; }

Go get yourself a beer and chill via code.

2. Developer in debt

.my-bank-account { content: "-$"; }

1	.my-bank-account { content: "-$"; }

Looks like too many credit cards have taken a toll on him.

3. This one not for Moguls Developers

#harry-potter.disillusionment-charm:active { visibility: hidden; }
#harry-potter.invisibility-cloak:active { display: none; }

#harry-potter.disillusionment-charm:active { visibility: hidden; }

#harry-potter.invisibility-cloak:active { display: none; }

Wingardium Leviosa!!!! HAHAHA.

4. The Ring Bearer: Frodo Baggins

#Nazgûl > .my_precious .wearer { visibility: visible; }

1	#Nazgûl > .my_precious .wearer { visibility: visible; }

Never wear the ring or the Nazgul will locate you.

5. The Iceberg Logic

.iceberg {
  float: top;
  margin-top: 10%;
}

.iceberg {

float: top;

margin-top: 10%;

}

Neat huh!!!

6. The Code for your Soul

.soul {
  content: "ethereal";
  opacity: 0.00000001;
  visibility: hidden;
}

.soul {

content: "ethereal";

opacity: 0.00000001;

visibility: hidden;

}

Creepy one!!!

7. A Unique Code for IKEA

.ikea {
  content: "furniture";
  display: table;
  color: blue;
  background-color: yellow;
}

.ikea {

content: "furniture";

display: table;

color: blue;

background-color: yellow;

}

The best way to display your furniture as per IKEA (LOLZ).

8. The Dirty Developer

.clean-bathroom {
  > p {
    display: none;
  }
}

.clean-bathroom {

> p {

display: none;

}

Gross !!!!!! But a fact.

9. Code for Blackhole!!!

.blackhole {
  background-color: #000000;
  display: flex;
  justify-content: center;
  align-items: center;
  width: ?;
  height: ?;
  padding: 0;
}

.blackhole {

background-color: #000000;

display: flex;

justify-content: center;

align-items: center;

width: ?;

height: ?;

padding: 0;

}

This developer seems too much skeptical about the black hole.

Coursera - Hundreds of Specializations and courses in business, computer science, data science, and more

10. The Sasha Grey Code

.sasha-grey::after { resize: both; }

1	.sasha-grey::after { resize: both; }

No Words!!!!! 😁

11. The Simpson Taxes

#trump .federal-taxes { display: none; }

1	#trump .federal-taxes { display: none; }

OOPS!!!!!

12. A Code with Pain

body .pain {
  display: none;
  position: relative;
  z-index: -99999999;
  padding: 20000px;
}

body .pain {

display: none;

position: relative;

z-index: -99999999;

padding: 20000px;

}

Touche!!!!

13. Code that Defines The Euro League

#Europe .country > .brexit {
  border: right 1px solid;
  overflow: hidden;
}

#Europe .country > .brexit {

border: right 1px solid;

overflow: hidden;

}

Isn’t that the perfect code for a good cause?

14. The NSA in CSS

.NSA {
  transparency: none;
  content: " * ";
  justify-content: inherit;
}

.NSA {

transparency: none;

content: " * ";

justify-content: inherit;

}

This one’s really my favourite.

15. The Modern Simpson Description

#president .trump {
  color: orange;
  position: absolute;
  border: 1px ridged;
  content: "Blather!";
  cursor: crosshair;
}

#president .trump {

color: orange;

position: absolute;

border: 1px ridged;

content: "Blather!";

cursor: crosshair;

}

We all are going to jail!!!! 😂

16. The Creepy Code

.ghost {
  background-color: white;
  opacity: 0.2;
}

.ghost {

background-color: white;

opacity: 0.2;

}

Definitely creepy!!!

17. A Friendzoned Developer

#friendzone {
  float: left;
  margin: 1px;
}

#friendzone {

float: left;

margin: 1px;

}

Heart touching!!! (LMAO)

This is the best code to define friend zone.

18. The POTUS Code

#DonaldTrump {
  position: absolute;
  border: ridge 1px;
  background-position: right;
  top: 1%;
  content: "Lies";
}

#DonaldTrump {

position: absolute;

border: ridge 1px;

background-position: right;

top: 1%;

content: "Lies";

}

Hmmm, someone just landed on my roof!!!!

19. The Pervert Developer

.bra.push-up { overflow: visible; }

1	.bra.push-up { overflow: visible; }

Now the subheading is justified.

20. The Perfect Job Code for Monday

.monday {
  transition: slow ease; padding: 0 6days 0 0;
}

.monday {

transition: slow ease; padding: 0 6days 0 0;

}

It really touches the heart….

21. The Tummy Code

.potbelly { overflow-x: visible; }

1	.potbelly { overflow-x: visible; }

I can see it now!!!!!

22. The Valentine Code

/* LESS */
.flowers {
  &Passion .roses;
  &Modesty .violets;
}
.underwear {
  &Regal .violets;
  &Military .roses;
}

/* LESS */

.flowers {

&Passion .roses;

&Modesty .violets;

}

.underwear {

&Regal .violets;

&Military .roses;

}

This one’s too descriptive (HAHAHAHA).

23. The Best Way to Work The Shit Out

work:hover .mug > .mug > .mug {
  content: "espresso" !important;
  color: #591E14;
}

work:hover .mug > .mug > .mug {

content: "espresso" !important;

color: #591E14;

}

Espresso is heaven!!!! He even got the color code right!!!!

24. The Absolute Safari Browser

#safari::before {
  content: "Sensational!";
  position: absolute;
}
#safari::after {
  content: "Brother of IE9";
  position: static;
}

#safari::before {

content: "Sensational!";

position: absolute;

}

#safari::after {

content: "Brother of IE9";

position: static;

}

That’s really a bloody fact.

25. The Trump Conundrum

#trump.elected > .usa > .people:not(.black) {
  content: "Respect";
}

#trump.elected > .usa > .people:not(.black) {

content: "Respect";

}

Someone just thumps my door!!!!!

26. The Party Code

.party .bottles:after {
  content: " ";
}
.party .floor:after {
  content: "diced carrots";
}

.party .bottles:after {

content: " ";

}

.party .floor:after {

content: "diced carrots";

}

That seems the real case scenario.

27. The Dark Knight Code

#batman {
  background: black;
  float: left;
}
#batman:after{
  content: 'robin';
  float: right;
}

#batman {

background: black;

float: left;

}

#batman:after{

content: 'robin';

float: right;

}

The developer must be a comic savvy.

Top Rated Web Development Course

The Complete Web Developer Course 2.0
Web development is a very vast area and there are a lot of things to learn for and we keep learning as we move forward in web development. Sometimes new frameworks, sometimes new language updates and so on. Good thing about this course is it covers almost all important areas and make you a full stack developer.

28. Dicaprio Code

#oscar-2016 {
content: "Leonardo Dicaprio";
icon: "oscar.png";
font: "Spotlight";
}

#oscar-2016 {

content: "Leonardo Dicaprio";

icon: "oscar.png";

font: "Spotlight";

}

Didn’t we love Jordan aye?

29. The Widest Code

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

.obese {

width: 200%;

overflow: visible;

}

Isn’t that perfect? Time to move to a gym.

30. The Bermuda Triangle

#Bermuda-triangle { display: none; }

1	#Bermuda-triangle { display: none; }

Don’t you dare to go over this code!!!!

31. The Hobbits

.hobbit { height: 50%; }
.hobbit #foot { width: 200%; }

1 2	.hobbit { height: 50%; } .hobbit #foot { width: 200%; }

Is this Bilbo or Frodo or Both???!!!!

32. The Super Mario Code

#mario.mushroom {
  transform: scale(200%);
}

#mario.mushroom {

transform: scale(200%);

}

Tudutudututu………..😆

33. The Star Wars Code

#darth-vader:first-child {
  transform: rotateY(180deg);
}

#darth-vader:first-child {

transform: rotateY(180deg);

}

“When I left you I was but the learner. Now I am the master.” Behold, the worst Sith Lord.

34. The Code Green

#bruce-banner {
  color: pink;
  transition: color 10s;
}
#bruce-banner.the-hulk {
  color: green;
}

#bruce-banner {

color: pink;

transition: color 10s;

}

#bruce-banner.the-hulk {

color: green;

}

Hulk!!!!!! Smash…..

35. The Twisting Politicians

.politicians {
  transform: rotate(180deg);
  transform: rotate(180deg);
  transform: rotate(180deg);
}

.politicians {

transform: rotate(180deg);

}

Well, this code is relatively right.

36. The Code of Marriage

.husband {
  position: absolute;
  right: 0%;
}
.wife {
  position: absolute;
  right: 100%;
}

.husband {

position: absolute;

right: 0%;

}

.wife {

position: absolute;

right: 100%;

}

HAHAHAHA…..You cannot win an argument with your wife.

37. Code name Bond

#007 {
  content: "James Bond";
  background: none;
  visibility: hidden;
  color: black;
  border: none;
}

#007 {

content: "James Bond";

background: none;

visibility: hidden;

color: black;

border: none;

}

The name is Bond, James Bond.

38. Popeye The Sailorman

.popeye + .spinach {
  width: 50px;
  height: 150px;
  transform: scale(10);
}

.popeye + .spinach {

width: 50px;

height: 150px;

transform: scale(10);

}

He’s the one who rules our heart and that of Olive.

39. The Hammer Code

.human + .thor-hammer {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.human + .thor-hammer {

margin-bottom: 0 !important;

padding-bottom: 0 !important;

}

“Whosoever holds this hammer, if he be worthy, shall possess the power of Thor.”

40. Smeagol Code

.gollum.hasRing {
 visibility: hidden;
}

.gollum.hasRing {

visibility: hidden;

}

“It came to me. My own. My love. My own. My precious.”😈

Winding Up

So, these are the CSS puns which are not just my personal favourite but of almost everyone in the coding realm. I hope you like my collection. Mention your favourite one in the comment box and let’s put some smile on the faces of our developers’ mate. Cheers!!!

Author Bio:

Lauren McLaren is the writer here. She is working as blogger for Digital Muscle, is a web design company in Sydney offering affordable web design & development services. She loves writing about technical stuff and sharing her experience while with her readres. She is hardworking and trustworthy. In her spare time, she loves to read, cook and watch movies.

Top Rated HTML5 and CSS3 Web Application Development Courses

Build Responsive Real World Websites with HTML5 and CSS3

More Web and Mobile App Development and Related Articles:

Facebook

Twitter

Digg