CSS in Real Life (aka “CSS Puns”)

By Louis Lazaris / August 28, 2011 / 47 Comments

Updated: August 7, 2022

Let’s have some fun with CSS selectors, properties, and values. All the rule sets shown here contain valid CSS that represent things in real life. This has also been later referred to as “CSS puns”, which is not really a correct way to describe it, but for the record I was the first one to come up with this.

A few sensitive subjects represented here, but they’re not meant to cause offence. Just some CSS silliness. Enjoy.

.titanic {
  float: none;
}

.worldPeace .countries {
  border: transparent;
}

.cheapBicycleHelmet {
  padding: 0;
}

.oneGallonJar .twoGallonsOfWater {
  overflow: visible;
}

.weightWatchersClient {
  width: 100%;
}

.formerWeightWatchersClient {
  transform: scale(.8);
}

.badActor:first-line {
  visibility: hidden;
}

.JohnLennon {
  widows: 1;
}

.KurtCobain, .CourtneyLove {
  orphans: 1;
}

.atheist .president {
  position: absolute;
}

.religious .president {
  position: relative;
}

.wateredPlant {
  height: auto;
}

.CIA .agent {
  background: transparent;
}

.sniper {
  cursor: crosshair;
}

a.burglar:visited {
  behavior: url(stole-your-stuff.htc);
}

.Enron .profit {
  margin: -9999px;
}

.natural::selection {
  visibility: hidden;
}

47 Responses

Michał Czernow says:

August 28, 2011 at 11:13 am
```
:first-line {
  white-space: nowrap;
}
```
Unfortunately doesn’t work :P.

Reply
Rian Ariona says:

August 28, 2011 at 11:34 am

ha..ha LOL.. like it!
```
.cheapBicycleHelmet {  
  padding: 0;  
}  
```
Reply
- Ruvable says:
  
  June 16, 2016 at 4:50 pm
  
  how can you make it??
  
  Reply
Renier says:

August 28, 2011 at 11:36 am

that was very creative and hilarious!

Reply
George Dina says:

August 28, 2011 at 3:20 pm
```
.titanic {  
  float: none;  
}  
```
Brilliant!

Reply
- Marvin Hagemeister says:
  
  August 29, 2011 at 1:59 am
  
  Love it! So hilarious!!
  
  Reply
- Dwayne Cossey says:
  
  August 29, 2011 at 1:22 pm
  
  Conversely
```
.iceberg {
  position: fixed;
}
```
  Reply
  - Jawad says:
    
    September 1, 2011 at 10:26 am
    
    ha ha very nice
    
    Reply
- Paul M. Watson says:
  
  September 8, 2011 at 7:53 am
  
  So funny. Though I reckon it should be #titanic
  
  Reply
Doug T says:

August 28, 2011 at 6:58 pm

How about THIS:
```
.natural::selection {
  cursor: progress;
}
```
or
```
.natural::selection {
  background-repeat: inherit;
}
```
Reply
Mike says:

August 28, 2011 at 8:02 pm

I love it! What a way to brighten up my dreary Monday morning. Thanks.

Reply
Pablo says:

August 28, 2011 at 8:41 pm

JAJAJA GENIAL !

Reply
Gerelt Od says:

August 28, 2011 at 9:58 pm

Most of them beautiful. Especially CIA :-)

Reply
jivanshr says:

August 28, 2011 at 11:52 pm

very funny, I like most of them. List can be huge, I guess

Reply
Piotr says:

August 29, 2011 at 1:57 am

This is brilliant! :D
```
.bottle-of-beer .party:before {
  content: normal;
}
```
and
```
.bottle-of-beer .party:after {
  content: none;
}
```
Reply
Michael says:

August 29, 2011 at 3:01 am

what about:
```
.ninja {
  display: none;
}
```
? :D

Reply
- Piotr says:
  
  August 29, 2011 at 3:10 am
  
  more like:
```
.ninja {
  visibility: hidden;
}
```
  ;]
  
  Reply
  - mohammed says:
    
    August 31, 2011 at 7:05 pm
    
    ¬¬
```
.ninja {
  visibility: hidden;
  color: #000;
}
```
    Reply
    - Danillo Nunes says:
      
      September 13, 2011 at 3:29 pm
      
      .ninja { color: rgba(0, 0, 0, 0); }
      
      Reply
      - Jennifer says:
        
        September 18, 2011 at 10:00 pm
        
        Lmao~!! Good one!
AB says:

August 29, 2011 at 3:11 am

Hahaha.. Amazing! :)

Reply
Naveed says:

August 29, 2011 at 3:29 am

Nice way to put stuff. :D

Reply
Venkat says:

August 29, 2011 at 4:29 am

Funny stuff. Loved it

Reply
Daniel S says:

August 29, 2011 at 5:23 am

I posted something related to this funny topic: Reallife CSS (Images) http://www.shiftedwork.de/blog/2010/09/24/reallife-css/

Here is another one:
```
.clothes {
  z-index: 1;
}
```
Reply
Mike says:

August 29, 2011 at 8:06 am
```
.glass {
  opacity: 0.01; /* thought of 0, but that's not real */
}

.government {
  transition: all 4yr ease-out;
}

.ideal-job {
  stress: 0;
  richness: 100;
}

.good-looking .woman .passing-by {
  zoom: 200%;
}
```
Reply
DT says:

August 29, 2011 at 10:56 am

Thank you! It’s funny

Reply
Simon says:

August 29, 2011 at 4:19 pm
```
.mortgage .loan {  
  float: none;  
} 

.mortgage .loan {  
  position: fixed;
}
```
Reply
Matt says:

August 30, 2011 at 8:34 am
```
.justin_bieber .talent { display: none; }
```
Reply
Sue says:

August 30, 2011 at 11:50 am

Here are a couple:
```
.powerful { background: white url('privileged.jpg') repeat; }

.diet { bottom: 50%; }
```
OK so this one’s not supported in any browsers but here it is anyway:
```
.drunk { rotation: 360deg; }
```
This is great! There really isn’t enough comedy code in the world.

Reply
haddnin says:

August 30, 2011 at 12:37 pm
```
.senate {
  left: 51%;
  right: 47%;
}
```
Not sure what to do with the 2 Independents.

Reply
- haddnin says:
  
  August 30, 2011 at 12:55 pm
  
  Just thought of another one.
```
.IE6 .support {
  transition: all 10y ease-out;
}
```
  okay, back to work!
  
  Reply
- mark says:
  
  September 16, 2011 at 11:00 am
```
.senate {
  left: 51%;
  right: 47%;
  padding:2%;
}
```
  Independents = padding (or possibly margin)
  
  Reply
mohammed says:

August 30, 2011 at 3:02 pm
```
.Pisa {
  font-style: italic;
}
```
Reply
- dave says:
  
  September 6, 2011 at 12:41 pm
  
  this one is my favorite.
  
  Reply
Val says:

August 31, 2011 at 3:42 am

This is an awesome list. Here’s another
```
.motivation .monday {
  display: none;
}
```
Reply
Nico says:

August 31, 2011 at 4:01 am
```
.sleep::first-child {
  transition: all 1y ease-out;
}
```
Reply
Bővíz László - JUEX says:

August 31, 2011 at 5:03 am

Sooo crative!
Thanks

Reply
Ming says:

August 31, 2011 at 5:47 am
```
.virgin {
  margin: 0px;
  padding: 0px;
  background-color: pink;
}
```
Reply
Felipe says:

August 31, 2011 at 10:04 am
```
@media (screen) {
  #deadPixel {
    position: fixed;
    top: 451px;
    left: 911px;
    color: lightgreen;
    /* would be some random color, width and height with LESS */
  }
}
```
Reply
Mary De Nóbrega says:

September 7, 2011 at 1:40 pm
```
.spam { 
  display: none; 
}
```
Reply
sebastien says:

September 22, 2011 at 11:12 am
```
#Helvetica_diet:before{font-weight:900;}

#Helvetica_diet:after{font-weight:300:}
```
Reply
KC says:

October 4, 2011 at 10:41 am
```
.women .fat {
  display: none;
}
```
Reply
Ary Wibowo says:

November 18, 2011 at 3:53 am

LOL :D
```
.JohnLennon {  
    widows: 1;  
}  
  
.KurtCobain, .CourtneyLove {  
    orphans: 1;  
}  
  
.atheist .president {  
    position: absolute;  
}  
  
.religious .president {  
    position: relative;  
}
```
Reply
Benedetto Abbenanti says:

January 12, 2012 at 8:48 pm

It’s so funny. :D
Very cool!! ;)

Reply
AntoxaGray says:

February 15, 2012 at 6:41 am
```
.natural::selection {  
  color: #fff;
}
```
LOL

Reply
AntoxaGray says:

February 15, 2012 at 6:45 am

How about this?
```
.tv {
   display: box;
}
```
Reply
Ady says:

May 18, 2012 at 8:50 am
```
.my-grass {
  color: #90EE90;
}

.neighbours-grass {
  color: #008000;
}
```
Reply

Comment Rules: Please use a real name or alias. Keywords are not allowed in the "name" field and deep URLs are not allowed in the "Website" field. If you use keywords or deep URLs, your comment or URL will be removed. No foul language, please. Thank you for cooperating.

Markdown in use! Use `backticks` for inline code snippets and triple backticks at start and end for code blocks. You can also indent a code block four spaces. And no need to escape HTML, just type it correctly but make sure it's inside code delimeters (backticks or triple backticks).

47 Responses

Leave a Reply