In <p> element with class="tag location" why use 2 class names in CSS ? 1) .tag{ } 2) .location{}

Hey friend Stavros Sofroniadis , you must have noticed that <h1> and <p> have tag class in common .
In addition , <h1> have name class while <p> have location class.
So , all these things have been done , so that similar style can be given to the <h1> element and <p> element on the basis of common class i,e tag and particular styles can be given to them on the basis on specific classes i,e name for <h1> and location for <p> .
For ex: As you can see , both the elements have been centered , so you can set the same style for centering , background-color , color , margin , padding , border , border-radius and much more :

.tag{
margin: 10px auto;
padding: 8px ;
color: #000;
border: 1px solid #222;
border-radius: 5px;
}

Also , you can set different background to them on the basis of specific classes:

.name{
background-color: #333;
}  

.location{
background-color: #888;

Don't relate the examples to the video , as background-color and color are different for both the elements in the video.

But I have given you example so that you can understand .

Hope this helps :)

its important to remember that CSS stands for "cascading .. ". Once you understand this, you will realize that styles can overlap. You can also assign multiple classes to a single element. Here's a fairly simply example you can view in your browser

<!-- create my styles -->
<style>
div{border:1px solid black;}
.round{border-radius:15px;}
.red-background{background:red;}
.random-class-name-of-my-choosing{display:none;}
</style>

<div class='round'>
This div has round corners
</div>

<div class='red-background'>
This div has a red background
</div>

<div class='round red-background'>
This div has round corners and has a red background
</div>

<div class="round random-class-name-of-my-choosing">
This div has round corners, but it will not be visible
</div>