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; }