//CSS: Selectors: tags, IDs, and classes

<New code>

HTML id="exampleID" — sets the ID of an element to "exampleID"
CSS #exampleID {color: red;} — makes element with id="exampleID" red

HTML class="exampleClass" — sets the class of an element to "exampleClass"
CSS .exampleClass {color: blue;} — makes all elements with class="exampleClass" blue

What the difference between CSS tags, IDs, and classes?

There are many kind of CSS selectors. The ones that we use in this course are tags, IDs, and classes.

CSS tag/ID/class example code

<!doctype html>
<html lang="en">
    <head>
        <style>
            /* use tag names to apply to HTML tags */
            p {
                color: blue;
            }
            
            /* use a hashtag (#) to refer to single IDs */
            #exampleID {
                color: red;
            }
            
            /* use a period-dot (.) to refer to a class group*/
            .exampleClass {
                font-style: italic;
            }
        </style>
    </head>

    <body>
        <h1>CSS tag/ID/class example</h1>
        
        <p>There are three main CSS selectors that are used most frequently.</p>
        
        <p class="exampleClass"><strong>Tag selectors</strong> are used to apply a style to HTML tags with the same name</p>
        
        <p class="exampleClass"><strong>ID selectors</strong> are used to apply a style to a <em id="exampleID">single</em> individual HTML element</p>

        <p class="exampleClass"><strong>Class selectors</strong> are used to apply a style to a group of similar HTML elements</p>
        
        <p>Knowing when to use each one will be handy later on in applying styles correctly and in programming Javascript</p>
    </body>
</html>

The above code produces:

Learn more

Live example: CSS Selectors