The class Attribute
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 name.
In the following example we have three <div> elements with a class attribute with the value of ".classes". All of the three <div> elements will be styled equally according to the .classes style definition in the head section:
You can manipulate your and design by the classes.
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
html classes and IDs
</title>
<style type="text/css">
.classes{
background-color: green;
color: ghostwhite;
border: 2px 4px 3px 2px;
margin: 20px;
padding: 20px;
font-family: arial,;
}
</style>
</head>
<body>
<div class="classes">
<h1> Delhi </h1>
<p>Delhi is Capital of INdia</p>
</div>
<div class="classes">
<h1> Punjab </h1>
<p>Punjab is Capital of Chandigarh </p>
</div>
<div class="classes">
<h1> Rajasthan </h1>
<p>Rajasthan is Capital of Jaipur</p>
</div>
</body>
</html>
Output:
What is ID Attributes
Using The id Attribute
The id attribute provide a unique id for an HTML elements.
The id attribute is used to point to a specific style declaration in a CSS style sheet. It is also used by JavaScript to access and manipulate the element with the specific id.
Using a id is: write a hash character (#), followed by an id name. Then, define the CSS properties within {}.
In the following example we have an <h1> element that points to the id name "myProject". This <h1> element will be styled according to the #myProject style definition in the head section:
Example:
<style type="text/css">
#classes{
background-color: grey;
color: ghostwhite;
border: 2px 4px 3px 2px;
border border-radius: 20px;
margin: 20px;
padding: 20px;
font-family: arial,;
}
</style>
</head>
<body>
<div id="classes">
<h1> Delhi </h1>
<p>Delhi is Capital of INdia</p>
</div>
<div id="classes">
<h1> Punjab </h1>
<p>Punjab is Capital of Chandigarh </p>
</div>
<div id="classes">
<h1> Rajasthan </h1>
<p>Rajasthan is Capital of Jaipur</p>
</div>
👉OUTPUT:
Comments
Post a Comment