Class Selectors

In the previous section, we added styles by using inline styles, embedded styles, and external style sheets.

In our styles, we were general to all span tags. However, what if we wanted to find a specific tag or apply a style to several different tags? That is where we use classes and ids in our stylesheets. We will use stylesheets from now on.

Here's an example of an HTML page.

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

    .blueColor{
        color:blue;
        font-family:arial;
        font-size:24px;
    }

Notice in this example, the CSS has the name .blueColor. The blueColor class identifier applies the blue color, changes the font type, and the size of the span tag and an a (anchor) tag. They both turned blue while the other span tag without the class name did not.

We can get even more specific by doing something like this.

    span.blueColor{
        color:blue;
        font-family:arial;
        font-size:24px;
    }

Now, only span tags with the class blueColor will change. No other tags will work.

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