.png)
HTML Notes
.png){kind=small}
HTML
HTML Tags and Elements
Attributes and Hyperlinks
Headings and Lists
Class and id attributes
Semantic Elements
Inline and Block-Level Elements
Div and Span
img
Tables
Forms
Heading
Q
1
Define Class Attributes in HTML.
Ans
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.
Q
2
Where are the Class Attributes used?
Ans
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>
Q
3
Explain the basic syntax of a class.
Ans
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;
}
Q
4
Explain the use of id attribute in HTML.
Ans
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>
Q
5
Differentiate between class and id.
Ans
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.
