Classes vs Ids
The difference between classes and ids is that CSS class applies a style to multiple elements.ID, on the other hand, applies a style to one unique element. We can use any name in classes and ids.
Ids:
Ids are targeted by # sign in CSS. ids are more specific than tags selector. If we have the same id name in HTML then the compiler will ignore the id. We never use the same id name in our code.
For Example:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Document</title>
</head>
<body>
<!----------select better name for id------------->
<h2 id="h2-tag">Hello World</h2>
<!-----and also we can use different name to edit seperatly---->
</body>
</html>
CSS:
#h2-tag {
color: blue;
}
Output:
Hello World
Classes:
Classes are more specific than tags and ids selectors. Classes are targeted by . sign (dot sign). The advantage of using classes is that we can use the same class name in all classes. E.g, if we want to h1 and h3 to have the same text color so we can use the same class name in h1 and h3 and then change the text color that you want.
For Example:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Document</title>
</head>
<body>
<!-------you can use any name in classes and ids------------>
<h3 class="head">Hello Friends</h3>
<p class="head">My name is junaid.</p>
<!-----and also we can use different name to edit seperatly---->
</body>
</html>
CSS:
.head {
color: yellow;
}
Output:
Hello Friends
My name is junaid.
Comments
Post a Comment