ID Your BODY: A Simple CSS Trick With a lot of ROI
Friday, January 30th, 2009
One of the latest raves in Web design is to add an id attribute to the body tag, like <body id="coolpage">. It's a small thing, but it's a damn good idea!
Why? Let's say you have 15 pages total on your Geocities Star Wars fan site. You want the headlines (<h1>Headline!</h1>) to be 16 px in size with the exception of the home page. On the homepage you want the headlines to be 18px and bold!
Will you make a new separate CSS file just for the homepage that the user has to download in addition to the default CSS? NO! You're too good for that! You & C3PO hang out on the weekends.
Instead of all that extra CSS file nonsense, you can use <body id="homepage"> in replacement of <body>, which enables you to assign unique CSS only to the homepage like so:
/* for all pages */
h1 { font-size: 16px; }
/* for homepage only */
#homepage h1 { font-size: 18px; font-weight: bold; }
And BOOM! Your homepage headlines are styled differently without any hacks or additional files. That's awesome and incredibly useful.
So why not stop there? Because adding id attributes to the body element of each page takes time and work. When you start that new section on your Geocities Star Wars fan site about Princess Layla's secret love affair with R2D2, you'll be adding lots of id attributes for all the juicy pages. It'll be redundant and boring.
Let's use PHP to make things A LOT easier. Use the following line in replacement of <body> and your pages will automatically have id tags based on their filenames.
<body id="<?php echo (str_replace('/', '_', substr($_SERVER['REQUEST_URI'], 1, strlen($_SERVER['REQUEST_URI']) - strrpos($_SERVER['REQUEST_URI'], '.') - 1)) ? str_replace('/', '_', substr($_SERVER['REQUEST_URI'], 1, strlen($_SERVER['REQUEST_URI']) - strrpos($_SERVER['REQUEST_URI'], '.') - 1)) : 'index'); ?>">
There you have it. Use that line in your HTML template, and your pages will have id attributes assigned to <body> automagically. Yippy!
For example, c3po.php will become #c3po, c3po/loveaffairs.php will become #c3po_loveaffairs (forward slashes "/" are replaced with underlines "_"), and your homepage will be #index. Enjoy!
If you enjoyed this article, you might consider subscribing to our rss feed to stay updated with all the latest tips and articles!
Article Sponsored by:
ABOUT THIS AUTHOR
15 Comments
subscribe comments feedLeave a Reply
Popular Series
Related Posts
I miss my Geocities websites from back in the day, which usually had something to do with n64 games.
Great article Brian, this is a pretty creative tip
haha I had a geocities site about dragonball z
I used to use this all the time, even wrote a small mod for the CMS I use (sNews), to do that, but too many times I got snagged in menu problems with it, so I’ve more or less given up on using a body id…
(Prettifying menu tabs oftentimes requires shlepping on an id — and whaddayaknow, it’s the same id as my page or category name [slaps forehead thrice]!)
It’s a good trick though, menus notwithstanding.
Geocities – that would make for a good desktop bg.
Oh excellent call Jeffrey…excellent…
Learned something new today! Thank you
Hey, that is great, I learned something new! Thank you very much!
Nice Tip! Thanks.
Can this php-magic be used somehow if I instead use index.php files in different folders like “about, contact” et.c…?
Play with CSS everyday and never used id in body, good call. You can do tons of things with the right code.
Good post. You can also do it using the post_name variable. This way your body ID is just the post name and doesn’t contain the entire URL path.
<body
id=”home”
id=”post_name; ?>”>
Found the way I was looking for here: Dynamically Set a Body Id in PHP.
this is an excellent tip! a small light bulb moment for myself.
We use this all the time at work on a CMS called SPIP, it’s mostly in French but not too bad to work with
Great tip though, very useful.
Great tip, is that still valid xhtml?