A co-worker that has some light HTML/CSS experience asked about using some banners where she could rotate text. I cam up with this:

HTML

<div class="banner">
	<a id="banner-link" href="#">I am a cool banner!</a>
</div>
<br />
<div class="banner">
	<a id="banner-link-2" href="#"><span>I am also cool!</span></a>
</div>

CSS

.banner {
	background: url("/wp-content/uploads/2012/10/banner.png") 
	    left top no-repeat;
	width: 300px;
	height: 75px;
	overflow: hidden;
}
#banner-link {
	font-size: 2em;
	display: block;
	padding: 5px 0 0 150px;
	line-height: 1.1em;
	height: 75px;
	text-decoration: none;
	color: #FFF;
}
#banner-link-2 {
	font-size: 2em;
	display: block;
	line-height: 1.1em;
	height: 75px;
	text-decoration: none;
	color: #FFF;
	position: relative;
}
#banner-link-2 span {
	position: absolute;
	top: 5px;
	right: 5px;
	width: 135px;
}

Put it all together…

Uses padding

Uses positioning