Styling the Current Page's Nav Link


Let's say you have a navigation bar that is driven by an include (in fact, this will also work without includes). You want the current page's link to be formatted differently from the other links in the navigation bar, so the links on each of the first three pages would look like this:

page 1 page 2 page 3
page 1 page 2 page 3
page 1 page 2 page 3

Give each page a unique ID for body, such as <body id="page1">. Then give each link a unique ID as well, say id="link1". Then in your CSS you put something like:

#page1 #link1, #page2 #link2, #page3 #link3 {
  color: #FF0000;

That way the the styling only applies to the current page's link.