Classifying multiple elements

Classes are also used for classifying multiple elements. If you want to change the h2 tags in the middle section to all be similar but different to h2 tags elsewhere on the page, using a class will be the perfect option. Let's go into our HTML, add a class to all the div tags in the secondary-section, and call it column-title. Go to the The Octopus, The Crab, and The Whale headings, and use Sublime's nice multiple cursor browser feature to add class="column-title" to each one of them. For example, the The Octopus heading should look like this:

<h2 class="column-title">The Octopus</h2> 

Then, we go to our CSS and add .column-title underneath h2. We'll then add some properties and values. Add font-style as normal; you want to get rid of italic. Our color is blue, #0072ae, and we'll make font-weight bold:

.column-title { 
  font-style: normal; 
  color: #0072ae; 
  font-weight: bold; 
} 

Save this, go to the browser, and you'll see that now the h2 tags underneath each image are different to the other h2 tags that you have elsewhere on the site:

The h2 tags at the bottom and the top of the site are still red and in italic:

Classes can be very useful for naming and classifying groups of the same element that you want to look the same. Next, let's rename an element using an ID.