CSS: styling Google AdSense

Posted on February 21, 2011

Google Adsense poses some problems when it comes to stylize this kind of advertisements with CSS. First of all, you have to bear in mind that Google allows its users to choose a set of styles before inserting the ads box into the page. Once these styles have been chosen, they're inserted into the ads page which will be later fetched through an iframe element. If you take a look at the inner structure of a Google ads box with a developer tool, such as Firebug or another DOM/HTML console, you will probably see a main container, some scripts and then an iframe which, in turn, contains an entire, separate HTML page with all the ads.

For example, you could see something like this:

<div class="adsense">

	<script />

	<!--several scripts-->

	<ins>

		<ins>

			<iframe>

				<html>

					<head>

						<style></style>

					</head>

				</html>

			</iframe>

		</ins>

	</ins>

</div>

The relevant styles defined by Google when you create an adsense are all contained within the style element. They could look like these:

Embedded styles are always more specific than author styles, so if you want to override them you have to use both multiple selectors and the !important statement. For example:

div.adsense a:link,
div.adsense a:visited,
div.adsense a:hover {
	color: #338 !important;
	font-weight: bold !important;
}

Always remember to first take a look at the HTML structure generated by Google and then start using CSS. Further, use redundant selector chains and the !important declaration to make sure that your styles will override Google's styles.

Comments are closed.