HTML Class
Using the class Attribute
An HTML class attribute is like a special label (name) you give to a group of HTML elements that you want to treat similarly in terms of styling or functionality. It enables you to apply consistent styles across multiple elements without repeating the style definitions for each individual element.
⦁ Styling with CSS: The primary use of the class attribute is in conjunction with CSS to apply styles to multiple elements without repeating the style definitions.
⦁ JavaScript Interaction: It can also be used in JavaScript to target and manipulate elements with a specific class name.
⦁ Applicability: The class attribute can be applied to almost any HTML Elements, including <div>, <span>, <h1> to <h6>, <p>, <a>, <img>, <ul>, and <li>.
Example with <div> Elements
In the following example, three <div> elements are styled similarly using the country class defined in CSS:
Output:
In this example:
⦁ <style>: This block defines internal CSS styles for the document.
⦁ .country: This is a CSS class selector. It styles elements with the class “country”.
⦁ background-color: tomato;: Sets the background color of elements with class “country” to tomato.
⦁ color: white;: Sets the text color of elements with class “country” to white.
⦁ border: 2px solid black;: Adds a 2px solid black border around elements with class “country”.
⦁ margin: 20px;: Adds 20px of margin around elements with class “country”.
⦁ padding: 20px;: Adds 20px of padding inside elements with class “country”.
⦁ <div class=”country”>: This <div> element has the class “country”, which applies the defined CSS styles.
⦁ <h2>: Heading element displaying the country name.
⦁ <p>: Paragraph element providing information about the country.
Example Without Using Classes
Compare the above example with the same styling applied inline to each <div> element:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div style=”background-color: tomato; color: white; border: 2px solid black; margin: 20px; padding: 20px;”>
<h2>England</h2>
<p>England is part of the United Kingdom.</p>
</div>
<div style=”background-color: tomato; color: white; border: 2px solid black; margin: 20px; padding: 20px;”>
<h2>France</h2>
<p>France is known for its cuisine and art. </p>
</div>
<div style=”background-color: tomato; color: white; border: 2px solid black; margin: 20px; padding: 20px;”>
<h2>Japan</h2>
<p>Japan is an island nation in East Asia.</p>
</div>
</body>
</html>
Output:
In this example:
⦁ Each <div> element has inline styles specified using the style attribute.
⦁ style=”background-color: tomato; color: white; border: 2px solid black; margin: 20px; padding: 20px;”: This attribute sets multiple CSS properties directly for each <div> element.
⦁ background-color: tomato;: Sets the background color to tomato.
⦁ color: white;: Sets the text color to white.
⦁ border: 2px solid black;: Sets a 2px solid black border around the <div>.
⦁ margin: 20px;: Sets a margin of 20px around the <div>.
⦁ padding: 20px;: Sets a padding of 20px inside the <div>.
Example with <span> Elements
In this example, <span> elements with the class note are styled using CSS:
<!DOCTYPE html>
<html>
<head>
<style>
.note {
font-size: 120%;
color: red;
}
</style>
</head>
<body>
<h1>My <span class=”note”>Important</span> Heading</h1>
<p>This is some <span class=”note”>important</span> text.</p>
</body>
</html>
Output:
In this example:
⦁ <style>: This block defines internal CSS styles for the document.
⦁ .note: This is a CSS class selector. It styles elements with the class “note”.
⦁ font-size: 120%;: Sets the font size of elements with class “note” to 120% of the default size.
⦁ color: red;: Sets the text color of elements with class “note” to red.
⦁ <h1>My <span class=”note”>Important</span> Heading</h1>: Heading element (<h1>) with a span (<span>) inside it. The span has the class “note”, so its text “Important” is styled according to the .note class rules.
⦁ <p>This is some <span class=”note”>important</span> text.</p>: Paragraph element (<p>) with a span (<span>) inside it. The span has the class “note”, so its text “important” is styled according to the .note class rules.
Multiple Classes
HTML elements can belong to more than one class. To assign multiple classes, separate the class names with a space. For example, < h2 class=”country main”>. The element will be styled according to all specified classes:
<!DOCTYPE html>
<html>
<head>
<style>
.country {
background-color: tomato;
color: white;
padding: 10px;
}
.main {
border: 4px solid grey;
}
</style>
</head>
<body>
<h2 class=”country main”>England</h2>
<h2 class=”country”>France</h2>
<h2 class=”country”>Japan</h2>
</body>
</html>
Output:
In this example:
⦁ The CSS styles define two classes: .country and .main.
⦁ .country: This class applies a tomato background color, white text color, and 10px padding to any assigned element.
⦁ .main: This class adds a 4px solid grey border to any assigned element.
⦁ The HTML body contains three <h2> elements:
⦁ The first <h2> element (<h2 class=”country main”>England</h2>) has both the country and main classes, so it will have the background color, text color, padding from the country class, and the border from the main class.
⦁ The second (<h2 class=”country”>France</h2>) and third (<h2 class=”country”>Japan</h2>) <h2> elements only have the country class so that they will have the background color, text color, and padding defined by the country class but no border.
YouTube Reference :
Practice Scenarios
Scenario 1: Basic Class Application
Objective: Understand how to apply a class to an HTML element for styling.
Expected Output: A webpage with a styled heading and paragraph using classes.
<!DOCTYPE html>
<html>
<head>
<title>Basic Class Application</title>
<style>
.styled-heading {
color: blue;
font-size: 24px;
text-align: center;
}
.styled-paragraph {
color: green;
font-size: 18px;
margin: 20px;
}
</style>
</head>
<body>
<h1 class=”styled-heading”>This is a Styled Heading</h1>
<p class=”styled-paragraph”>This is a styled paragraph with a green color and larger font size.</p>
</body>
</html>
Output:
Scenario 2: Multiple Classes
Objective: Apply multiple classes to a single HTML element for combined styling.
Expected Output: A paragraph with combined styles from multiple classes.
<!DOCTYPE html>
<html >
<head>
<title>Multiple Classes</title>
<style>
.text-red {
color: red;
}
.bold {
font-weight: bold;
}
.italic {
font-style: italic;
}
</style>
</head>
<body>
<p class=”text-red bold italic”>This paragraph is red, bold, and italic.</p>
<p class=”text-red”>This paragraph is red.</p>
<p class=”text-red”>This paragraph is red.</p>
</body>
</html>
Output:
Scenario 3: Reusing Classes
Objective: Demonstrate how classes can be reused to apply the same styles to multiple elements.
Expected Output: Multiple headings and paragraphs with consistent styles using classes.
Output:
Scenario 4: Combining Inline Styles and Classes
Objective: Understand how to use both inline styles and classes together.
Expected Output: A webpage demonstrating the combination of inline styles and class-based styles.
Output:
Scenario 5: Classes for Layout
Objective: Use classes to create a simple layout with multiple sections.
Expected Output: A webpage with a header, main content area, and footer, each styled using classes.
Output:
