.png)
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.
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.
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;
}
コメント