Highlighting the Current Webpage's Link

In order to highlight the current webpage's link, we need to uniquely identify each webpage and each link. To uniquely identify the webpage, we give the <body> an id. For example:

<body id = "home">    <!-- We need to put a unique id on each body -->

In order to uniquely identify each link, we give each <a> an id. For example:

<li><a id = "home" href="home.html">Home</a></li>

Once we have uniquely identified the <body> and <a>, we add a css condition. If <body id = "home"> and <a id = "form">, then we need to find any <a> called "home" that is in a <body> called home. The css code to catch this is:

body#home a#home
{
}

Each webpage will have its own set <body> and <a> id. In the example below, we use the id "home", "about_us" and "products". The css code matchs each ,body, with its <a>, as shown below:

body#home a#home, 
body#about_us a#about_us, 
body#products a#products 
{   
    background-color:red;   
    color:black;   
    cursor:default; 
}

In order to build a working copy of the code below, you need to

Create three files in the same folder, named "home.html", "about_us.html" and "products.html".
Copy the source code below into all three files.
Rename the <body id = "home"> for the "about_us" and "products" files.

Example of Highlighted Current Links (Run Example)

<!DOCTYPE html>
<head>
    <title>Example code from note</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <style>
        .menu a
        {
            background-color:#61c6f0;
            color:#ccc;
            text-decoration:none;
            display:inline-block;      /* place links on same line */   
            width:80px;
            float:left;
        }

        .menu a:hover,
        .menu a:active
        {
            background-color:#ddd;
            color:#0ac;
        }

        /* Give the menu item for the current webpage a different colour */
        body#home a#home,
        body#about_us a#about_us,
        body#products a#products
        {
            background-color:red;
            color:black;
            cursor:default;
        }
    </style>
</head>

<body id = "home">    <!-- We need to put a unique id on each body -->
    <div class = "menu">
        <a id = "home" href="home.html">Home</a>
        <a id = "about_us" href = "about_us.html">About Us</a>
        <a id = "products" href = "products.html">Products</a>
    </div>
</body>
</html>