HTML Introduction to HTML and CSS Getting Familiar with HTML and CSS Building Web Pages with HTML and CSS

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

In video tutorial mention that in order to style <p> tag we use class name"tag location" But in CSS file it displays 2 diffrent class selectors 1) .tag{

}

2) .location{ }

why to use 2 selectors with difrent names(tag & location) as we defined this class with the name tag location

Dont understand, the usuage of 2 class selectors as class selectors is considered one name "tag location"

We style in diffrent way <p> tag with class selector "tag" & class selector="location"? Because both class selectors are focusing to the same <p> tag

If you could assist,

Thank You

Stavros Sofroniadis

2 Answers

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 :)

Brandyn Lordi
Brandyn Lordi
17,203 Points

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>