CSS Class Selectors: Free HTML & CSS Tutorial

Topics covered in this HTML & CSS tutorial:

The class attribute, CSS class selectors, The span tag, CSS opacity

Exercise Preview

Exercise Overview

In the previous exercise you learned that CSS tag selectors are a quick way to style all instances of a tag. But what if you want a one paragraph to look different from the rest? In this exercise you’ll learn how to use the class selector to override a tag selector anywhere you like.

1. If you completed the previous exercise, index.html should still be open in your code editor, and you can skip the following sidebar. If you closed index.html, re-open it now (from the News Website folder). We recommend you finish the previous exercises (1C–1D) before starting this one. If you haven’t finished it, do the following sidebar.

   If You Did Not Do the Previous Exercises (1C–1D)

   1. Close any files you may have open.
   2. In your code editor, open index-ready-for-classes.html from the News Website folder.
   3. Do a File > Save As and save the file as index.html, replacing the older version in your folder.

2. Preview the file in a browser so you can see how it looks.

   TIP: If you’re using Visual Studio Code with the open in browser extension installed, hit Option–B (Mac) or Alt–B (Windows) and your HTML file will open in your default browser.

Class Selectors: Making Exceptions to the Defaults

We want to style some paragraphs differently than the rest. To do this we must give them a name (called a class) that we’ll use to target them for styling. We can add a class attribute to any HTML tag.

1. There are three paragraphs that say This report was written by… Find the first one (around line 36).

2. On the opening p tag, add class="author" as shown below in bold:

   <p class="author">This report was written by <a href="https://www.theonion.com" target="_blank">The Onion</a></p>
   

   NOTE: There are no predefined class names. You choose the name, ideally a name that describes what the element is (such as author), rather than how it will look (such as uppercase). We don’t want to have to change the class name if we later decide to make it look different.

3. Now that we have a way to refer to this specific paragraph, we can define a CSS rule for how it should look. In the style tag, under the p style, add the following bold code. Be sure to type the period (.) before author, which is what tells the browser it’s a class selector!

      p {
         font-family: Verdana, sans-serif;
         font-size: 14px;
         line-height: 25px;
      }
      .author {
         font-size: 10px;
         text-transform: uppercase;
         font-weight: bold;
         color: #a18f81;
      }
   </style>
   

4. Save the file.
5. Return to the browser and reload the page. Notice that only the first instance of THIS REPORT WAS WRITTEN BY should be uppercase and sand brown.
6. Return to index.html in your code editor.

7. Classes can be reused as many times as needed. Find the second This report was written… paragraph (around line 48) and add class="author" as shown below in bold:

   <p>The new regulation, SEC rule 206(b)-7, will reportedly target Wall Street executives who accept disgustingly bloated annual payouts, forcing them to raise and then lower their shoulders in a manner that conveys a mild degree of humility or a sense of "Aw, shucks. Who? Me?"</p>
   <p class="author">This report was written by <a href="https://www.theonion.com" target="_blank">The Onion</a></p>
   

8. One more to go. Near the bottom, find the last This report was written… paragraph and add class="author" as shown below in bold:

      <p class="author">This report was inspired by, but not written by <a href="https://www.theonion.com" target="_blank">The Onion</a></p>
   </body>
   </html>
   

9. Save the file.

10. Return to the browser and reload the page to see that the author style applies to all three author paragraphs.

The Span Tag

1. Return to index.html in your code editor.

2. We want to make the first part of the h1 tag a bit lighter. We need an HTML tag to add the class attribute, so we’ll need to wrap a <span> tag around the words we want to group together.

   Find the h1 near the start of the body section, and add the following bold code:

   <h1>
      <span class="heading-muted"> Latest News from The Onion:</span><br>
      Today's Top National Headlines
   </h1>
   

   NOTE: Class names are case sensitive. They cannot contain spaces or special characters, aside from hyphens or underscores. We’re using a hyphen instead of a space.

3. Now we can make the CSS rule to style our new class. Under the .author style, add the following bold code:

      .author {
         font-size: 10px;
         text-transform: uppercase;
         font-weight: bold;
         color:#a18f81;
      }
      .heading-muted {
         opacity: .5;
      }
   </style>
   

   NOTE: Opacity takes a value between 0 and 1 (1 is 100% visible, and 0 is invisible). A decimal such as .5 or 0.5 (the preceding 0 is optional) would be 50% transparent.

4. Save the file.

5. Return to the browser and reload the page. You should see that Latest News from The Onion: is lighter (because it’s partially transparent and showing through to the white background behind the text).