CSS in Real Life

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.

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