Class and ID
Class and ID
Class or ID are attributes of an element. We use class or id in the elements to style/design to make element attractive, we add class or id in the element when we need to functionalize that element, we can use same class in each element to get them same style but cannot use same ID in each element.
ID is unique for each single element.
Let’s see how to work with class or id in the elements. We have an element and we want to increase its font size. So we will create a class using a dot ( . ) and curly bars { } to write CSS properties inside it.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
/* here you can see a dot ( . ) for class-name and curly bars {} with CSS property */
.demo {
font-size: 30px;
}
</style>
</head>
<body>
<!-- demo is a class-name -->
<p class="demo">
It's my First Example
</p>
</body>
</html>
Output:
We can write more CSS properties inside the class to design a paragraph.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
/* here you can see a dot ( . ) for class-name and curly bars {} with CSS property */
.demo {
font-size: 30px;
color: red;
background-color: yellow;
}
</style>
</head>
<body>
<!-- demo is a class-name -->
<h1 class="demo">
It's my first heading.
</h1>
<p class="demo">
It's my first paragraph.
</p>
<span class="demo">
It's my first span tag.
</span>
</body>
</html>
Output:
Use of ID
ID of an element would be unique, it cannot be same even in two elements.
ID would be make with hash ( # ) and used curly bars to write CSS properties.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
/* here you can see a hash ( # ) for ID and curly bars {} with CSS property */
#demo {
font-size: 30px;
}
</style>
</head>
<body>
<!-- demo is a id -->
<p id="demo">
It's my First Example
</p>
</body>
</html>