ID Selectors

Another way in which we can select a tag is by their ID if they have an id attribute defined.

The HTML page might look like this.

    <html>
        <head>
            <title>id Example</title>
            <link rel="stylesheet" type="text/css" href="mainstyle.css">
        </head>
        <body>
            <span id="specificColor">New Color</span>
            <br>
            <span>Same Color</span>
            <br>
            <a href="https://www.amazon.com" id="specificLink" target="_blank">Amazon</a>
        </body>
    </html>

And the CSS might look like this.

    #specificColor{
        color:blue;
        font-family:verdana;
        font-size:24px;
    }

    #specificLink{
        color:red;
        font-family:arial;
        font-size:28px;
    }

This time, the color and the size of the text specific to the ID because of the #.

See the Pen id Selector by Michael Cassens (@retrog4m3r) on CodePen.