This is a bit of a hack, and not one that I’d ever suggest for production use, but it’s fun all the same, and a great way of showing the power of .

The traditional assumption of most web developers is that you can only style content that appears within the <body> of an document. While practical, this is untrue.

Want proof? Throw together a quick page with no content: 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>The Passenger Pigeon</title>
	</head>
	<body>
	...
	</body>
</html>

Then add the following as a style: 

head, title {
	display: block;
}

What you’ll see is that the title of the page is now displayed in the browser viewport, just like any other element.

You can style the <title> element just like any other tag: 

head, title {
	display: block;
}
title {
	font-family: Avenir, Arial, sans-serif;
	background-color: #ddeefe;
	padding: 2rem;
	font-size: 3.5rem;
	color: #20242e;
	background-image: url(passenger-pigeon.jpg);
	background-repeat: no-repeat;
	background-position-x: 550px;
}

With the document still lacking body content, you’ll get the result you can see at the top of this article.

You may never use this in practice, but if nothing else, the trick is a good bar bet against web developers who think they know it all.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.