CSS Puns & CSS Jokes ~ Curated by Saijo George

I recenly came across posts on Reddit and DesignerNews that were talking about CSS Puns, there were some really good ones in there. I have collected them and shared them with you in here.

Click on > below to get started.(or use the left/right arrow keys on your keyboard)

#titanic { 
float: none; 
}

#bermuda-triangle {
display: none;
}

.invisibility-cloak + 
#harry-potter { 
visibility: hidden;
}

.invisibility-cloak +
#mad-eye-moody {
visibility: visible !important;
}

#usa + #mexico { 
border: 1px dashed;
}

#europe .country { 
border: none;
}

#china { 
border-top-style: solid;
}

.sniper-mode-engaged { 
cursor: crosshair;
}

.bambis-mom { 
cursor: crosshair; 
orphans: 1; 
}

#periodic { 
display: table;
}

#big-bang::before { 
content: "";
}

#chucknorris { 
color: #BADA55;
}

#nsa { 
opacity: 1; 
}

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

#australia { 
transform: rotateY(180deg);
}

.bruce-banner { 
color: pink;
transition: color 10s;
}

.bruce-banner.the-hulk {
color: green;
}

.oliver-queen { 
cursor: arrow;
}

.ninja { 
visibility: hidden;
color: black;
}

.leprechaun { 
height: 20%; 
color: green; 
display: none; 
}

.infinity-edge-pools { 
overflow: hidden;
}

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

#muscles { 
display: flex;
}

.religious-upbringing { 
perspective: inherit; 
}

.yomama { 
width: 99999999px;
}

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

#lego { 
display: block;
}

.hobbit { 
height: 50%;
}

.hobbit #foot {
width: 200%;
}

.delorean { 
z-index: -1955;
}

.fear { 
display: none;
}

By : @_tattoosa

.usa > .marijuana-laws {
  .federal {
    cursor: not-allowed !important;
    .state {
      cursor: wait;
      &.AK, &.CO, &.DC, &.OR, &.WA {
        cursor: progress;
      }
    }
  }
}

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

.samsung { 
@extend apple; 
}

By : @kasperoo

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

.defibrillator { 
clear: both;
}

.illuminati { 
position: absolute;
visibility: hidden;
}

By : @ecuageek

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

#autobots { 
transform: translate3d();
}

#ikea { 
display: table;
}

#moses > .sea { 
column-count: 2;
}

gangsta-rap { 
word-spacing: 0;
}

.rich-people { 
top: 1%;
}

.working-class {
bottom: 99%;
}

Having trouble with these CSS Puns? Why not brush up on your CSS skills with these easy to follow CSS courses from

Code School,
Treehouse,
Tuts+,
Udacity,
or Codecademy.

Thanks to Codrops for the wobbly slideshow effect tutorial, prism.js for the epic syntax highlighter and KL-Webmedia from Envato Studio for most of the graphics.

You might also want to check out CSSHumor on Twitter for some daily dose of CSS Puns.

That is all. If you have something you want to add in here, give me a shout on Twitter @SaijoGeorge.

My name is Saijo George, I work as an SEO Consultant in Melbourne, Australia. You can check out some of my other project : Brand Style Guides, AllTheFreeStock and my curated list of marketing tools.

Get notified when I add more of these :

Subscribe