Think about a code which has multiple elements or same tags and you want to style them individually. This is a basic tutorial and I am only focusing on beginners. I hope it will be helpful for some.
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<style>
h1 {
color: orange; // applies color to h1 tag inside body tag
}
#wrapper h1 {
color: lightgreen; //applies color to h1 tag insite main wrapper div id
}
#wrapper #inner-wrapper h1 {
color: pink; //applies color to h1 tag inside inner-wrapper div id
}
</style>
</head>
<body>
<h1>This is a good tip.</h1>
<div id="wrapper">
<h1>This is actually a great tip for beginners.</h1>
<div id="inner-wrapper">
<h1>- ApexWebTutorial</h1>
</div>
</div>
</body>
</html>
Output:
