HTML Class Attribute

❮ Prev Next ❯

Classes are a way to group HTML elements together and apply styles or other attributes to them. A class is defined using the class attribute, followed by a name for the class. The name can be any string of characters, but it should be descriptive of the purpose of the class.

The Syntax For Class

In HTML, to create a class, you use the class attribute followed by the class name. In CSS, you define the properties for that class within curly braces {} using the dot . notation to target the class name. 

CSS:
  <style>
  .red-heading{
  color: :red;
  }
  </style>
HTML:
<h1 class="red-heading">Hello World!</h1>

Here, we created a class called "red-heading" and defined the color property to be red in the CSS style block.

The class Attribute 

<!DOCTYPE HTML>
  <html>
    <head>
    <style>
    .red-text{
      color :red;
    }
    </style>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <title>Title of the Document</title>
    </head>
    <body>
      <p>This is some <span class="red-text">red text</span></p>
    </body>
</html>

In this example, we've defined a class called "red-text" in the <style>element. We've set the color property to red. Then, in the HTML, we've applied the "red-text" class to a <span> element within a paragraph. The text within the <span> element will be displayed in red because of the class.

Using The class Attribute

The class attribute is used to assign one or more classes to an HTML element. Classes are used to apply a specific style to a group of elements, or to add JavaScript functionality to elements. The syntax for using the class attribute is as follows: 

<tagname class="classname1 classname2 ... classnameN">Hello World!</tagname>

Here, tagname is the name of the HTML element, classname1 through classnameN are the names of the classes to be assigned to the element.

Multiple Classes

Multiple classes can be assigned to a single element, separated by spaces:

You can define multiple classes for an element by separating the class names with a space, for example:<p class="highlight underline">.The element will be styled according to all the classes specified, inheriting the properties from each class.

Example 

<!DOCTYPE HTML>
  <html>
    <head>
    <style>
    .city{
      background-color :totmato;
      padding :10px;
    }
    .main{
      text-align :center;
    }
    </style>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <title>Title of the Document</title>
    </head>
    <body>
      <h3 class="city main">Abuja</h3>
      <h3 class="city">Kaduna</h3>
      <h3 class="city">Kano</h3>
    </body>
</html>

Here, all three h2 elements belongs to the "city" class. In addition, "Abuja" also belongs to the "main" class, which center-aligns the text.

Different Elements Can Share Same Class

It's also possible to assign the same class to multiple elements. This can be done using the class selector in CSS

Example 

<!DOCTYPE HTML>
  <html>
    <head>
    <style>
    .quote{
      font-style :italic;
    }
    </style>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <title>Title of the Document</title>
    </head>
    <body>
      <p class="quote">This is a quote</p>
      <div class="quote">This is also a quote</div>
    </body>
</html>

In this example, both the p and divelements have been assigned the same class, quoteWhen styling these elements with CSS, the class selector can be used to target both elements: class, which center-aligns the text.

Classes can be used to apply any CSS property to a group of elements. They're especially useful for applying consistent styles to elements throughout a website. Classes can also be used in JavaScript to select and manipulate groups of elements. Lets us learn how to use Id in the next chapter.

❮ Prev Next ❯