« Designing for your Target Audience - 24ways.org
XHTML vs. HTML »

ID that Body - Clean CSS Navigation

December 8th, 2008

Just like cop dramas, the first step to a good navigation is the same as it is in solving a crime. You have to ID the body.

If you assign an ID on the body tag then you have a simple way to target items on any particular page. If you want the paragraph text on your contact page to be 16px tall then you have a simple way of targeting that text, assuming you ID the body on that page with contact:

#contact p {font-size: 16px;}

However, you get to understand the true power of IDing the body tag with using it for navigation. Assign each link in your navigation a class, then create a style for when the body’s ID and the link’s class match.

Your Navigation:

<body id="home"> <ul id=”nav”> <li><a class=”home” href=”#”>home</a></li> <li><a class=”about” href=”#”>about</a></li> <li><a class=”contact” href=”#”>contact</a></li> </ul>

Your CSS:

ul#nav { background: #000; list-style: none; font-family: Tahoma, Verdana, Arial, Sans-Serif; } ul#nav li { float: left; margin: 0 15px; } ul#nav li a, ul#nav li a:visited { text-decoration: none; color: #fff; } ul#nav li a:hover { color: #666; } /* here is the magic, when the body ID and the link Class are the same, this style is applied. */ #home .home, #about .about, #contact .contact { color: #ccc; }

This is pretty straight forward, but it works really well. The best application is when you use a dynamic language like PHP to include the menu on every page, so you have only one or two files to update in the event something changes with the navigation (the included file and/or the CSS file).

Tags:

This entry was posted on Monday, December 8th, 2008 at 10:49 am and is filed under CSS, php. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

3 Responses to “ID that Body - Clean CSS Navigation”

  1. Andy Says:

    December 8th, 2008 at 1:34 pm

    This is probably a dumb question, but I’m gunna ask anyway. What’s the benefit of putting an ID in the body tag instead of just styling the body tag itself in your style sheet?

    I tend to always just do something to the effect of
    body { width:50%;} instead of creating an actual ID for the body…Just wondering…

  2. Jason Says:

    December 8th, 2008 at 2:04 pm

    I will also apply some styling to the body tag, stuff that is general to every page, like the page background and to set the margin and padding of the page to 0.

    It isn’t so much about styling the body, it’s about being able to reference things on that particular page.

    So by adding an ID on the body, and unique classes to the links, then I can play a matching game to add an active state for the navigation with pure css.

    There should only going to be 1 page with an id of “home” and so there is only going to be one instance on your site when the id of home and the class home, so you can specifically target it using


    #home .home {specific styles here}

    Make sense? You can also use it to style any element specifically on that page. So if you want links on that page to be blue instead of red, you don’t have to create a class for all those links, just


    #home a {color: blue;}

    Because of specificity that will overwrite something site wide like

    a {color: red;}

  3. Andy Says:

    December 8th, 2008 at 2:57 pm

    That makes sense. I got to thinking about it more after I posted, and I kind of thought about that. I guess for some reason, I was thinking of using the same ID on each page, which seemed unnecessary when you could just style the body tag instead, but I get what you mean. This way can have unique elements on each page as opposed to being stuck site-wide to what you have defined the body tag to be.

    My brain was apparently suffering. I even thought about it for like 5 minutes before I posted that to see if I was overlooking the obvious. Turns out that indeed I still was.

    Got setup on Dreamhost finally, so hopefully I’ll start on my domain soon, then this will all starting coming back to me…

Leave a Reply

Name:

Email (will not be published):

Website:

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>