CS48

Within these castle walls be forged Mavens of Computer Science ...

— Merlin, The Coder

HTML Class Attribute

Introduction

Remember all the CSS you learned in the previous lesson? Now imagine this: every time you write an HTML tag, you have to write the CSS for that tag all over again. Wouldn't writing the same CSS over and over again become annoying? Well, the "class" attribute is here to save the day!

Formatting the class attribute

The tag .class is often used to assign specific formatting styles (font, color, size, etc.) to multiple elements under that class.

Example:

 .city {
 background-color: tomato;
 color: white;
 margin: 20px;
 padding: 20px;
 }

In the above example, the class is named "city" and has specific formatting styles attached to it. To apply the class to multiple elements, you would use this syntax:

Example:

  <div class="city">
    <p>London</p>
  </div>

    <p>Paris</p>

  <div class="city">
    <p>Tokyo</p>
  </div>

As you can see, the tag:

  <div class="city">

will apply the formatting styles defined under the class ".city" to the heading tags that say London and Tokyo. This would make "London" and "Tokyo" have a background color of tomato and give the text a white color.

Purpose

The HTML class attribute can make code more efficient and prevent writing the same styles over and over again.