Improve Your Rankings with a Sitemap That Works: The CSS
(Page 1 of 6 )
If you’ve read the previous article and followed the examples therein, you should have a working sitemap that will enhance your ranking rather than tarnish it. Admittedly, although autonomous visitors will be pleased by it, most human ones will not, so it’s time to add some basic CSS that will improve the visuals without detracting from the SEO ambitions of the page.
The style of your site map will need to reflect upon the style used throughout your site, you can brighten the page up and add roll-over effects with some simple CSS without needing to mess about with JavaScript (as fun as that may be).
The key here is to keep it minimal. Use some brand colors for consistency without overdoing it. Remember that whitespace is a professional commodity that is rarely used to its full potential. Create a type selector for the div at the top of the page; this will target all of the div elements in the linked HTML page that don’t have an ID attribute:
div {
background-color:ffffce;
color:003399;
border-width:1;
border-color:ffcc00;
border-style:dashed;
padding:10;
}
Now create a one type selector for the heading ones and another for the headings twos:
h1 {
background-color:ffcc00;
width:100%;
border-width:1;
text-align:center;
font-weight:bold;
font-size:18;
font-family:sans-serif;
left:0;
top:0;
}
h2 {
font-size:16;
margin:0;
padding:0;
font-weight:normal;
}
Link the style-sheet to the HTML document in the normal way and take a look at the page so far. Just these selectors, however, will leave the page looking a bit odd. You’ll also notice that you need to scroll too far down to reach some of the bottom links.
Next: Begin Improving the Sitemap Visuals >>
More Search Optimization Articles
More By Dan Wellman
/ 5 
