Making the CSS properties of an element different on every page. E.g Color

So pretty much what I want is to make something like this. http://www.woodbuffalo.ab.ca/Visiting/Accommodation-and-Dining.htm

See how the border around the content area changes depending on the part of menu you're in?

I have an idea in mind, but I want to know if there are easier ways to do this.

Edit: okay, my idea: I'm not even sure if this would work, it would be to make a different class for the content menu depending on what category that page belongs to, and then style these classes in CSS with the colours I want. But I feel like there's a better approach for this that I don't know.

Solution

ID the pages separately and then style the certain elements in question separately while distinguishing them with the unique page Id's. see the example below.

/* Example */

#page-id Element-in-question {

Whatever_you_want_to_happen_goes_here!

}

HTML

/*  Home page HTML */

<body id="home">

<h1>Home</h1>

</body>


/*  About page HTML */

<body id="about">

  <h1>Abou</h1>

</body>

CSS

       #home h1  {
        color: red;
    }

  #about h1 {
   color: green;
}

With the above example, h1s on the home page will be red while h1s on the about page will be green.

Wordpress/PHP

If the pages are dynamically generated you can implement the body_class template tag into a theme just by adding <?php body_class(); ?> to your opening body tag as shown below. That assigns unique classes to all the pages.

<body <?php body_class(); ?>>