Scribd
Upload
5 views

HTML - Classes

The document explains the importance of the 'class' attribute in HTML for styling and categorizing elements, allowing multiple elements to share the same styling rules. It provides syntax examples for defining classes in HTML, CSS, and JavaScript, demonstrating how to apply multiple classes and reuse them across different elements. Additionally, it emphasizes the versatility of classes for both styling and interactive functionality in web design.

Uploaded by

Abdul Basir
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
5 views

HTML - Classes

The document explains the importance of the 'class' attribute in HTML for styling and categorizing elements, allowing multiple elements to share the same styling rules. It provides syntax examples for defining classes in HTML, CSS, and JavaScript, demonstrating how to apply multiple classes and reuse them across different elements. Additionally, it emphasizes the versatility of classes for both styling and interactive functionality in web design.

Uploaded by

Abdul Basir
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 7

HTML - Classes

Start your free 30-


Days Trial
When critical systems fail, never miss
an alert and respond like a Superhero
SIGNL4

Open

The class is an important keyword in HTML. It is an attribute that can be applied to one or more elements
and is used to style and categorize elements based on common characteristics or purpose. Classes allows
multiple elements to share the same styling rules. By assigning the same class to multiple elements, you
can apply CSS styles or JavaScript functionality to all of them simultaneously. This promotes consistency
in design and layout, making it easier to manage and update a website.

HTML class attribute is defined in the HTML code using the "class" keyword, and the styling is determined
in CSS. This separation of content and style is a key principle in web design, facilitating the creation of
visually appealing and organized web pages.

File Uploads for WordPress


File Uploads
You can build beautiful WordPress forms
without being a developer or web
designer
Ninja Forms

Ads by
ds for WordPress
beautiful WordPressLearn Morebeing a developer
forms without
ner Stop seeing this ad

Why this ad? Learn More


Syntax for Class
To create a CSS rule for HTML elements using class attribute in CSS write a (.) followed by the class name
mentioned in HTML element, the we can define the CSS prpeties with curly braces in key: value; format like
color: yellow;.

In this code, we've selected a class named "highlight" that changes the background color, text color, and
font weight of the elements it's applied to.

In HTML:

<element class="highlight">...</element>

In CSS:

/* CSS using class Attribute Selector */


.highlight {
background-color: yellow;
color: black;
font-weight: bold;
}

In JavaScript:

document.getElementsByClassName('highlight')

Using HTML Class Attribute


HTML classes are essential for styling and formatting web page elements consistently. They allow you to
apply the same styles to multiple elements without repeating code, promoting maintainability and a
cohesive design. The class attribute can be used on any HTML Elements(Except elements placed in head
element). Here's how to use classes effectively with a practical example.

Define a Class for Styling

In the following example, we have create two element one is h1 and other is p, and we set class on them as
well "header" & "heightlight" but using the "heightlight" class in internal CSS to style our p element. You can
use the "header" class in the similar way to style the h1 element.
Ads by
File Uploads for WordPress
You can build beautiful WordPress forms without being a
or web designer Stop seeing this ad Open Compiler

Why this ad? Learn


<!DOCTYPE html>
<html>

<head>
<style>
<!-- CSS class attribute Selector Used -->
.highlight {
background-color: yellow;
color: black;
padding: 5px;
}
</style>
</head>

<body>
<!-- Using class attribute in both Element-->
<h1 class="header">Tutorialspoint</h1>
<p class="highlight">Simply Easy Learning</p>
</body>

</html>

Multiple classes

We can apply multiple classes to a single element by separating class names with a space.

In the following example, the <h1> element has two classes applied "heading" and "content." This is
achieved using a space to separate the class names within the class attribute.

Multiple classes can be applied to the same element to inherit styling from both classes. In this case,
"heading" class provides a large font size and center alignment, while the "content" class provides a
specific text color and line-height.

Open Compiler

<!DOCTYPE html>
<html> Ads by
File Uploads for WordPress
You can build beautiful WordPress forms without being a
or web designer Stop seeing this ad
<head>
Why this ad? Learn
<style>
.heading {
font-size: 24px;
color: #333;
text-align: center;
}

.content {
font-size: 16px;
color: #666;
line-height: 1.5;
}

.button {
background-color: #007bff;
color: #fff;
padding: 10px 20px;
border: none;
cursor: pointer;
}
</style>
</head>

<body>
<!-- Defined two Classes in h1 Element -->
<h1 class="heading content">
Welcome to Tutorialspoint
</h1>
<p class="content">
We make Tutorials - Simply Easy Learning
</p>
<button class="button">Click Me</button>
</body>

</html>

Ads by
File Uploads for WordPress
Same class on Multiple Elements
You can build beautiful WordPress forms without being a
or web designer Stop seeing this ad

Why this ad? Learn


The most important feature of classes is their reusability. You can apply the same class to multiple
elements to maintain a consistent look throughout your website. Here in the following example we create 2
p elements(paragraphs). Both of these paragraphs will have the same highlighting because they share the
"highlight" class.

Open Compiler

<!DOCTYPE html>
<html>

<head>
<style>
.highlight {
background-color: yellow;
color: black;
font-weight: bold;
}
</style>
</head>

<body>
<p class="highlight">
To create a class, you need to define it within
your HTML document or link to an external CSS
file that contains class definitions. Classes
are defined using the "class" attribute.
</p>
<p class="highlight">
HTML classes are essential for styling and formatting
web page elements consistently. They allow you to apply
the same styles to multiple elements without repeating
code, promoting maintainability and a cohesive design.
</p>
</body>

</html>
Ads by
File Uploads for WordPress
You can build beautiful WordPress forms without being a
or web designer Stop seeing this ad
Using class Attribute through JavaScript
Why this ad? Learn
HTML classes are versatile and serve various purposes beyond styling.

The classes are frequently used to identify elements for JavaScript functions. For example, you can use a
class to target specific elements, like buttons, and make them interactive through JavaScript. In the
following code we have create a button which will trigger a function that will change the display property
none to block of a p element. You will see a paragraph.

Open Compiler

<!DOCTYPE html>
<html>

<head>
<script>
function showContent() {
var element = document.getElementsByClassName('content')[0];
if (element.style.display === 'none') {
element.style.display = 'block';
} else {
element.style.display = 'none';
}
}
</script>
<style>
.interactive-button {
background-color: #007bff;
color: #fff;
padding: 10px 20px;
border: none;
cursor: pointer;
}
</style>
</head>

<body>
<button class="interactive-button"
onclick="showContent()">Click Me</button>
Ads by
File Uploads for WordPress
<p class="content" style="display: none;">
You can build beautiful WordPress forms without being a
or web designer Stop seeing this ad
This content can be toggled by clicking the button.
</p> Why this ad? Learn
</body>

</html>

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified
expert to boost your career.

File Uploads for WordPress


Ninja Forms
You can build beautiful WordPress forms
without being a developer or web
designer
Ninja Forms

Learn More

Things to Remember about Class

More than 1 class can be define on any HTML element.


Class are used by CSS and JavaScript both to select the element.
The class is case sensitive so be careful when you are using to select the element.
Multiple elements can have the same class as well.
In CSS we use .className and in JavaScript getElementsByClassName() method to select the class
assigned HTML element.

Ads by
File Uploads for WordPress
You can build beautiful WordPress forms without being a
or web designer Stop seeing this ad

Why this ad? Learn

You might also like