Class and ID Attributes: HTML Class Notes

Updated: Aug 18

Mobiprep has created last-minute notes for all topics of HTML to help you with the revision of concepts for your university examinations. So let’s get started with the lecture notes on HTML.

  1. HTML Introduction

  2. HTML Tags and Elements

  3. Attributes and Hyperlinks

  4. Headings and Lists

  5. Class and id attributes

  6. Semantic Elements

  7. Inline and Block-Level Elements

  8. Div and Span

  9. Img

  10. Tables

  11. Forms

Our team has curated a list of the most important questions asked in universities such as DU, DTU, VIT, SRM, IP, Pune University, Manipal University, and many more. The questions are created from the previous year's question papers of colleges and universities.

  1. Class attributes

  2. Usage of ID attribute

  3. Difference between class and ID

  4. Define Class Attributes in HTML.

  5. Where are the Class Attributes used?

  6. Explain the basic syntax of a class.


Class and ID Attributes


Question-1) Class attributes

Answer: The class is an attribute which specifies one or more class names for an HTML element. The class attribute can be used on any HTML element. The class attribute is mostly used to point to a class in a style sheet. However, it can also be used by a JavaScript (via the HTML DOM) to make changes to HTML elements with a specified class.

Use of class attribute with an example-

<html> 
  
<head> 
    <style> 
        .country { 
            background-color: black; 
            color: white; 
            padding: 8px; 
        } 
    </style> 
</head> 
  
<body> 
  
    <h2 class="country">CHINA</h2> 
    <p>China has the largest population 
       in the world.</p> 
  
    <h2 class="country">INDIA</h2> 
    <p>India has the second largest  
       population in the world.</p> 
  
    <h2 class="country">UNITED STATES</h2> 
    <p>United States has the third largest 
       population in the world.</p> 
  
</body> 
  
</html> 

Output:



In the above example CSS styles all elements with the class name “country”.

The class attribute is often used to point to a class name in a style sheet. It can also be used by a JavaScript to access and manipulate elements with the specific class name.

For example-


<html>
<head>
<style>
.city {
  background-color: tomato;
  color: white;
  border: 2px solid black;
  margin: 20px;
  padding: 20px;
}
</style>
</head>
<body>

<div class="city">
  <h2>London</h2>
  <p>London is the capital of England.</p>
</div>

<div class="city">
  <h2>Paris</h2>
  <p>Paris is the capital of France.</p>
</div>

<div class="city">
  <h2>Tokyo</h2>
  <p>Tokyo is the capital of Japan.</p>
</div>

</body>
</html>

Syntax for class-

To create a class; write a period (.) character, followed by a class name. Then, define the CSS properties within curly braces {}:


<html>
<head>
<style>
.city {
  background-color: tomato;
  color: white;
  padding: 10px;
}
</style>
</head>
<body>....
</body>
</html>
Basic syntax-
.class {
  css declarations;
}

 

Question- 2) Usage of ID attribute

Answer: The id attribute is most used to point to a style in a style sheet, and by JavaScript (via the HTML DOM) to manipulate the element with the specific id.

Use of id attribute with example-

<html>
<body>

<h1 id="myHeader">Hello World!</h1>
<button onclick="displayResult()">Change text</button>

<script>
function displayResult() {
    document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script>

</body>
</html>

 

Question- 3) Difference between class and ID

Answer: Each element can have only one ID. Each page can have only one element with that ID but you can use the same class on multiple elements. You can use multiple classes on the same element.

In simple words, the only difference between them is that “id” is unique in a page and can only apply to at most one element, while “class” selector can apply to multiple elements.


 

Question- 4) Define Class Attributes in HTML.

Answer: The class is an attribute which specifies one or more class names for an HTML element. The class attribute can be used on any HTML element. The class attribute is mostly used to point to a class in a style sheet. However, it can also be used by a JavaScript (via the HTML DOM) to make changes to HTML elements with a specified class.


 


Question- 5) Where are the Class Attributes used?

Answer: Use of class attribute with an example-

<html>
<head>
<style>
.country {
background-color: black;
color: white;
padding: 8px; }
</style>
</head>
<body>
<h2 class="country">CHINA</h2> <p>China has the largest population in the world.</p>
<h2 class="country"> INDIA</h2> <p>India has the second largest population in the world.</p>
<h2 class="country">UNITED STATES</h2>
<p>United States has the third largest population in the world. </p>
</body>
</html>

In the above example CSS styles all elements with the class name “country”. The class attribute is often used to point to a class name in a style sheet. It can also be used by a JavaScript to access and manipulate elements with the specific class name.


For example-

<html>
<head>
<style>
.city {
background-color: tomato;
color: white;
border: 2px solid black;
margin: 20px; padding: 20px; }
</style>
</head>
<body>
<div class="city"> <h2>London</h2> <p>London is the capital of England.</p> </div>
<div class="city"> <h2>Paris</h2> <p> Paris is the capital of France.</p> </div>
<div class="city"> <h2>Tokyo</h2> <p>Tokyo is the capital of Japan.</p> </div>
</body>
</html>


 

Question- 6) Explain the basic syntax of a class.

Answer: To create a class; write a period (.) character, followed by a class name. Then, define the CSS properties within curly braces {}:

<html>
<head>
<style>
.city {
background color: tomato;
color: white; padding: 10px;
}
</style>
</head>
<body>.... </body>
</html>

Basic syntax-
.class {
css declarations;
}

 



4 views0 comments

Recent Posts

See All