Course Content
HTML Introduction
0/1
HTML Editors
0/1
HTML Basic Tags
0/1
HTML Elements
0/1
HTML Attributes
0/1
HTML Headings
0/1
HTML Paragraph
0/1
HTML Text Formatting
0/1
HTML Meta Tags
0/1
HTML Quotations
0/1
HTML Comments
0/1
HTML Images
0/1
HTML Background
0/1
HTML Colors
0/1
HTML Lists
0/1
HTML Tables
0/1
HTML Forms
0/1
HTML Spell Check
0/1
HTML Media
0/1
HTML Marquees
0/1
HTML CSS
0/1
HTML Links
0/1
HTML Block & Inline
0/1
HTML Classes
0/1
HTML Id
0/1
HTML I frames
0/1
HTML Java script
0/1
HTML File paths
0/1
HTML Layout
0/1
HTML Responsive
0/1
HTML Computer Code
0/1
HTML Tutorial
About Lesson

HTML Classes

In this tutorial, we will learn about Classes in HTML with the help of examples.


Classes

The class is an attribute that specifies the class name (one or more) for an HTML element.
The class attribute can be used on any HTML element. Different HTML elements can share the same class name.
The class attribute is used to specify a class for an HTML element. The class name can be used by CSS and JavaScript to perform some tasks for the HTML element.


Using class Attribute

A class name can be defined within the <style> element, or in the external CSS file.
The class name is case sensitive.
To create a class, write a period # character followed by a class name.

Syntax :

.className

Example :

<!DOCTYPE html>
<html>
  <head>
    <title>HTML Class</title>
    <style>
      .cricket {
        color : blue;
      }
      .football {
        color : green;
      }
    </style>
  </head>
  <body>
    <p class = "cricket">This is a paragraph with cricket class.</p>
    <p class = "football">This is a paragraph with football class.</p>
  </body>
</html>

Output

This is a paragraph with cricket class.

This is a paragraph with football class.


Using same class in different elements

We can use same class name in different elements in an HTML file.

Example :

<!DOCTYPE html>
<html>
  <head>
    <title>HTML Class</title>
    <style>
      .city {
        color : blue;
      }
    </style>
  </head>
  <body>
    <p class = "city">Paris is the capital of France.</p>
    <p class = "city">New Delhi is the capital of India.</p>
  </body>
</html>

Output

Paris is the capital of France.

New Delhi is the capital of India.


Using Multiple Classes

We can use one or more classes in an HTML element. These class names must be separated by a space.

Example :

<!DOCTYPE html>
<html>
  <head>
    <title>HTML Class</title>
    <style>
      .city {
        color : red;
      }
      .home {
        background-color : black;
      }
    </style>
  </head>
  <body>
    <p class = "city">Paris is the capital of France.</p>
    <p class = "city home">New Delhi is the capital of India.</p>
  </body>
</html>

Output

Paris is the capital of France.

New Delhi is the capital of India.

Exercise Files
No Attachment Found
No Attachment Found
error: Content is protected !!