AdSense Case Study: Understanding CSS

As I mentioned before, Stage 4 of the AdSense case study is all about using cascading style sheets (CSS) to make a site look better and more professional. CSS will also figure prominently in our positioning of the AdSense advertisements, but we'll defer most of that discussion to Stage 5, which will focus on ad placement and layout. With that said, be sure to keep the ads in mind when you're deciding on the layout of your site. (And yes, the Invisible Fence Guide already has some ads on it, but what you see today isn't what's going to be on the final version of the site. I figured I might as well place some ads now to take advantage of the search engine traffic I've been getting due to the emphasis on good search engine optimization techniques from the beginning. For the term “invisible fence”, the Guide currently ranks #10 on Google and #11 on MSN, with higher rankings for more specialized phrase variations.)

Now, I'm not going to pretend to teach you CSS. There are many books and tutorials available that go into all kinds of detail about CSS. Here's a sampling of some useful sites:

• The CSS Property Index lists all the major CSS properties and shows examples of how they are used.
• The Web Design Group's Guide to Cascading Style Sheets has some good tutorials.
• Eric Meyer's CSS Work contains links to all kinds of neat examples of and articles about CSS. Meyer is one of the big names in CSS.

In general, though, what you want to do with CSS is define an external style sheet that defines what your web pages are going to look like in general: what fonts to use, what colors, what background images, etc. Each of your web pages will then link to that style sheet (you can link to more, but one is usually sufficient) in order to share the definitions in that file. (It's usual to store them in a text file that ends in a “.css” extension. You place the file in the root folder of your web server.) You can then change the way your site looks just by changing one file.

That said, it's also useful to be able to use “inline” style definitions on your web pages for specialized effects. For example, when I insert a Chitika ad unit into a blog entry (which is rare, because I'm not really pushing any products) I'll wrap it with a <div> tag with an inline style that looks something like this:

<div style="margin-left: 1em; margin-bottom: 1em; float: right;">
insert your Chitika ad code goes here
</div>

This was all discussed in detail in Embedding Chitika eMiniMalls code into your postings, but I wanted to point out how I'm using the margin-left and margin-bottom CSS properties to ensure that there's a nice amount of whitespace between the text of the posting and the Chitika ad unit. It's easy to do, and I wish more people would do it on their pages, as little things like this can improve readability immensely.

Next time, I'll talk about some of the basic layout decisions you're going to have to make and how to implement them with CSS.

Eric Giguere is the author of Make Easy Money with Google, a real (printed!) introductory AdSense book for non-technical people, available at all fine bookstores. Be sure to download the free sample chapter for more information about the book. Or add it directly to your Amazon shopping cart!

Comments