HTML Class vs ID | HTML5 for Web Development - Software Development PDF Download
| Table of contents |
|
| Introduction |
|
| ID Attribute |
|
| Applying Styles using Class and ID |
|
| Sample Problems |
|
Introduction
HTML (Hypertext Markup Language) is the foundation of web development. When building a webpage, you often come across the need to apply styles or target specific elements for manipulation. To accomplish this, HTML provides two important attributes: class and ID. In this article, we will explore the difference between class and ID, and how to use them effectively in your HTML code.
Class Attribute
The class attribute allows you to group multiple HTML elements together. You can assign the same class to multiple elements, making it easier to apply styles or perform actions on those elements collectively. Here's an example:
<!DOCTYPE html>
<html>
<head>
<style>
.highlight {
color: blue;
font-weight: bold;
}
</style>
</head>
<body>
<h1 class="highlight">Welcome to My Website!</h1>
<p>This is a <span class="highlight">paragraph</span> with a highlighted class.</p>
<p>Another paragraph without any class.</p>
</body>
</html>
In the above example, we have assigned the "highlight" class to the '<h1>' heading and the '<span>' element within the paragraph. By doing so, both elements receive the defined styles (blue text color and bold font-weight) from the CSS (Cascading Style Sheets) code.
ID Attribute
The ID attribute, unlike the class attribute, must be unique within the HTML document. It serves as an identifier for a specific element, allowing you to target it uniquely. Here's an example:
<!DOCTYPE html>
<html>
<head>
<style>
#special {
background-color: yellow;
}
</style>
</head>
<body>
<h2 id="special">Special Heading</h2>
<p>This is a paragraph with a special ID.</p>
<p>Another paragraph without any ID.</p>
</body>
</html>
In the above example, the '<h2>' heading has been assigned the "special" ID. We use the pound sign (#) in CSS to target the ID. The CSS code sets the background color of the element with the "special" ID to yellow. Only the element with the specified ID will have this style applied.
Applying Styles using Class and ID
While both class and ID can be used to apply styles, it is important to understand their intended purposes. The class attribute is ideal for applying styles to multiple elements that share common characteristics, while the ID attribute is used for uniquely targeting a single element. Let's see this in action:
<!DOCTYPE html>
<html>
<head>
<style>
.multiple {
color: green;
}
#unique {
color: red;
}
</style>
</head>
<body>
<h3 class="multiple">Multiple Class Example</h3>
<p class="multiple">This is a paragraph with multiple class styles.</p>
<p id="unique">This paragraph has a unique ID style.</p>
</body>
</html>
In the above example, the class "multiple" applies the green text color to both the '<h3>' heading and the first paragraph. The ID "unique" applies the red text color to the second paragraph. Notice how the ID style overrides the class style, resulting in the second paragraph being displayed in red.
 |
Download the notes
HTML Class vs ID
|
Download as PDF |
Sample Problems
Problem 1: Apply a background color of orange to all elements with the class "highlight".
<!DOCTYPE html>
<html>
<head>
<style>
.highlight {
background-color: orange;
}
</style>
</head>
<body>
<h2 class="highlight">Heading</h2>
<p class="highlight">This paragraph has a highlighted class.</p>
<div class="highlight">This is a div with the class "highlight".</div>
</body>
</html>
Problem 2: Target the element with the ID "special" and change its font size to 24 pixels.
<!DOCTYPE html>
<html>
<head>
<style>
#special {
font-size: 24px;
}
</style>
</head>
<body>
<h3>This is a normal heading.</h3>
<p>This is a paragraph without any special styles.</p>
<h2 id="special">Special Heading</h2>
<p>This paragraph has the ID "special".</p>
</body>
</html>
Conclusion
Understanding the difference between class and ID attributes is crucial for effective web development. Classes group elements together, allowing you to apply styles collectively, while IDs target specific elements uniquely. By utilizing these attributes properly, you can create well-structured and visually appealing webpages.
|
20 videos|15 docs|2 tests
|
Sample Paper
,shortcuts and tricks
,Important questions
,HTML Class vs ID | HTML5 for Web Development - Software Development
,Previous Year Questions with Solutions
,practice quizzes
,Exam
,MCQs
,Objective type Questions
,past year papers
,study material
,Summary
,Semester Notes
,mock tests for examination
,HTML Class vs ID | HTML5 for Web Development - Software Development
,Viva Questions
,HTML Class vs ID | HTML5 for Web Development - Software Development
,Free
,ppt
,video lectures
,Extra Questions
;
HTML Class vs ID Free PDF Download
Importance of HTML Class vs ID
HTML Class vs ID Notes
HTML Class vs ID Software Development Questions
Study HTML Class vs ID on the App
|
© EduRev
|
Education Revolution
|
|
