CSS: Classes and IDs for applying styles

This entry is part 7 of 26 in the series Basic CSS

Classes and IDs mark certain elements so that you can refer to them in your style sheet.

A class can be applied to multiple selections, whereas an ID uniquely identifies a specific selection.

<!DOCTYPE html>
<html>
<head lang='en'>
        
    <meta charset='UTF-8'>
    <title>Codecrawl.com-Classes and IDs</title>
    <style type='text/css'>
        .rock {
            color: red;
        }

        #pop {
            color: navy;
        }
    </style>
</head>
<body>

<h3 class='rock'>The Stone Roses</h3>
<h4 id='pop'>Erasure</h4>

<p class='rock'>Oasis</p>
 
</body>
</html>
Notice we have applied a rock class to both <h3> and <p> tags.

To define a class, we use a . and to define an id, we use #.

Series Navigation<< CSS: Styling horizontal line with CSS
CSS: Applying styles to hyperlinks >>