Lets say I have 5 pages: A, B, C, D, and E. I also have a horizontal menu, and each item has a light gray background.
Each menu item has a:hover that gives it a medium-gray background, but I want the active page to have a black background, so I define
#black
{
background-color: #000;
}
Now when the user is on B.php, I want the B menu item to carry the #black id. What is the best way of doing this?
You can assign a class or id to the <body> element relating to what the current page is. Then style each page's local navigation and so on using this. Give each navigation list item a class relating to what the link is pointing to.
ie.
ul.navigation a:link, ul.navigation a:visited {background-color:#eee}
ul.navigation a:active, ul.navigation a:hover, ul.navigation a:focus {background-color:#ccc}
body.about-us .navigation li.about-us-link a:link, body.about-us .navigation li.about-us-link a:visited {background-color:#000}
A suggestion; don't define what your style "is", define what your style "does". Don't call it #black, instead call it .current.
Another thing to note is that ID's are meant for identifying unique elements (#header, #footer, #main, #sidebar, #navbar, etc.). Defining a repeatable item as current should be done with a class, since you can have multiple classes associated with an element, but only one ID. Again, that ID is reserved for unique naming.
.current
{
background-color: #000;
}
To associate this with a page you could set a variable on the page that indicates which page its on, then use an if block, or switch case, to add the style to the element that relates to the current page:
(pseudo code, my PHP syntax is rusty)
$current_page = "B"
// -- snip --
<ul>
<li id="navigation-a" <? if ($current_page == "A") { ?> class="current" <? } ?> >Page A</li>
<li id="navigation-b" <? if ($current_page == "B") { ?> class="current" <? } ?> >Page B</li>
</ul>
Optionally you could try deriving $current_page from the page url in the request.
When I can use PHP for a project (that is not powered by a CMS), I usually use a PHP array to construct the menu(s). It's quite easy to add, move or delete pages from an array, and by letting PHP output this as a real menu, you don't have to rewrite the same code over and over.
To specify what page should be considered as active, you can use a code similar to this:
$currentPage = "b.php";
Note that I use a full file name on purpose. I'll explain in a short bit why.
As each menu item requires at least two variables (name, url), I use an array inside the menu's array for each entry. An example:
$menu = array(array("a.php", "A Title"), array("b.php", "B Title"), array("c.php", "C Title"));
Now, in order to let PHP work it's magic, I use a foreach loop that runs through each item and displays it in whichever way I want.
foreach($menu as $num => $options){
$s = ((isset($activePage) && $options[0] == $activePage) OR ($options[0] == basename($_SERVER['PHP_SELF'])) ? " class=\"active\"" : "";
echo "\n\t<li{$s}><a href=\"" . $options[0] . "\">" . $options[1] . "</a></li>";
}
You can expand this concept to include targets, title tags, etc.
The beauty of this way is that you don't have to write all that much for every project. You can just copy/paste it all, and change the little bits in the $menu array, and if needed (ie. for sub-menu items) specify $currentPage. If $currentPage is not specified, it'll fall back to checking what the current page is (through $_SERVER['PHP_SELF']) and base the active state on that.
I hope I explained it well enough, and that it's good enough for you to use!
(Small disclaimer, I just woke up and wrote this code from scratch. While the concept works –I've been using it for years–, I might've made a typo here and there. Apologies if this is the case!)