Introduction

Other user lookup tutorials, finished lookup sample shown:

Hey, welcome to Uber's CSS Lookup Tutorial =D

In just 9 easy steps, you'll have your very own lookup. And the best part is that you don't even need to make graphics!
Lookup preview:

The Code

Here is the code for you to copy and paste into the bottom box here.

body{background-color:#DA93DB;}

#back{top:0px;left:100px;width:720px;background-color:#EFD3F1;}

h1{width:720px;background-color:#BB3EBB;border-bottom:3px dashed #7D297D;font:60pt arial;line-height:80px;color:#682268;margin:0px;}

.contentModuleHeader, .contentModuleHeaderAlt{color:#682268;background-color:#BB3EBB;}

.contentModuleTable, .contentModuleContent, .contentModule{
border:none;background-color:#FFFFFF;}

.medText, td{color:#7D297D;}
a:link, a:visited{color:#D794DC;text-decoration:none;}
a:hover{color:#FFE7FF;}
</style />

<div id="back" style="position:absolute;">
<h1>HEADER</h1>
|<a href="/myaccount.phtml">My Account</a>|<a href="/petcentral.phtml">Pet Central</a>|<a href="/explore.phtml">Explore</a>|<a href="/games/arcade.phtml">Games</a>|<a href="/neoboards/index.phtml">Boards</a>|<a href="/objects.phtml">Shops</a>|<a href="/nf.phtml">News</a>|<a href="/~Windfeet">CSS Lookup Tutorial</a>|
<br><br>
THIS IS WHERE YOU WOULD PUT YOUR OWN TEXT, LINKS, IMAGES, ETC.
<div id="stats"><table>

Text in RED are things you will be changing.
Text in BLUE are my notes to you on what exactly the red things change.
The blue numbers correspond to numbers on the reference image of the actual lookup below the code.

You can go to this petpage to find hex color codes to replace mine from the example.

Reference Image

And that's it!

Neomail me if you have any questions.

Please leave the link back to the tutorial on the lookup or replace it with the button.

Link back button: