Please we are going to discuss about the selectors How can you create your selectors or how you define your selectors, how many ways exists to create the selectors. So, in the, in the previous lectures, we have downloaded and we have installed the notepad plus plus because I'm going to use an Opus chapters in the series because this is the basic series. That's why I'm using the notepad plus plus. Otherwise, I'm using the PHP store in my other series, okay, so now you have your notepad plus plus what I need, I need to create the forum in my f drive. I am creating the CSS CSS folder. So as you can see, I have just created the CSS folder.

Now go to your browser, create a new file, new and now save this file. Sorry, save this file, write something and save the file, save. You can also press the Ctrl S to save your file. So save your file where you I am going to save my file. In the F drive, I have just created the CSS folder. So as you can see, this is the CSS folder.

I'm saying this is the index dot HTML, okay, index dot HTML, make sure this is the index dot HTML. I need to copy this paste here. Okay, so now I have this treated with index dot HTML, first of all, and now here I'm creating the key. First of all, I'm saying this is my path. Okay, so now I'm using the internal styling. So this is the inline styling possible if I'm saying this hi Color equals to red.

Now go to your CSS folder and execute your index HTML file. Click on this. As you can see, currently, it's showing this is my paragraph. So now that means I'm using the inline styling, so I'm not going to use the Atlantic Valley. I'm using the internet as it in the header. In the header tags, I need to define the style.

Okay. And now I'm saying it's high school. I'm going to add all the CSS here possible I'm saying find the P and add property and where you can also break. Sorry. You can also separate your lives like this sorry. You can also separate your dresses like this or you can add like this to solely depend upon you I'm saying color equals to red Okay, go to your page, refresh the page.

Now, as you can see, it's still working, because I'm saying all find the paragraph in this file and assign the right colors. So if you are adding more than one paragraphs, switch automatically add the red color to your paragraph, because this is the element selector. So whenever you hit the element, or you create the elements, that properties, one property or all the property, if I'm saying background thread, go to your page, if sorry, if I'm saying background, green, go to your page, refresh the page. Now as you can see, I'm assigning two properties to this paragraph and I'm saying Oh fine, all the paragraphs in this file, and assign these two properties and values. So that's why I This is the element selector. If I'm using the class for support, I'm adding the class.

And I'm saying my class you have the card LIMIT clause. If I'm going to add the class like this, I'm saying my class, you can write your own class or the name. Now, how can you call this class you can call this class with dot, you can call you always call the class with law and your class name, the class name with dot can call this element. Now, that means you're saying find this class and assign these properties to this class. So we can see we have only single class so that means we are going to assign these values to this class. Go to your page, refresh the page.

Now as you can see, we have just assign the properties to this class. First of all, if you have the same class with different elements, that means I'm saying add the on properties to this class. So you have class last last class, we have four elements with the class. So that means we are assigning the same properties, three or four elements refresh the page. So now as you can see, we have added the four elements or a styling. Okay, so this is that class selector.

So first of all, if you have id selector, I'm saying my ID, you can write your own ID equals XYZ, whatever you need to write, how can you call your ID, you can call your ID by hash. So call your ID I'm saying color and I'm seeing orange or my favorite color and I'm seeing background. In this time I am saying orange, go to your page, refresh the page now, okay. You have to write your class ID name also. So hash ID name, go to your page, refresh the page. Now as you can see, I have just added this is my pattern, this ID, and I'm adding the properties and the values with this ID.

So in this way, you can create your or you can select your element with class with element selector or you can create your selector with the ID or if I'm saying that historic I'm if I'm using the aesthetic and I'm saying color equals to red, that means I'm saying find all the elements and add this properties to value refresh the page. So now as you can see, it's showing it's adding all the properties and value to this one. And for suppose if you have a day Okay, and now I'm saying I have a paragraph. I have all paragraphs here. Okay? And I'm seeing that the comments comment.

Okay, so now I'm, if I have a div, and I'm saying div p, that means I'm saying, find the div and inside the day we have paragraph and the paragraph and assign these values. So now as you can see if you remove these classes and this ID and refresh the page now you can see it's also working. That means you're saying select all elements inside the tape. So that's why is the These are the all elements inside their lives. That's why it is assigning these values if you are saying that p n comma that means you are saying assign the same property value to this one and also this one for suppose if you have a P and as one or suppose if your E and s one, I'm going to create the x one in the death as one as one close. So, okay now I'm seeing at the red color to P and also h1 so refresh the page.

Okay, we have h1, this is one I need to hear is the heading one refresh the page. So now you can see this is the h1 I need to remove the paragraph paragraphs to refresh the page. So now we can see I'm saying that at the same property and value to this element and also this element, you can also write your own Classes are suppose if you have a one class to this class one and you also have the class to class. So you can Oh Why is she doing like this? Okay, so now I'm saying you have class that means you are accessing the class and you have second class, add the values to these classes. So now as you can see is working and why it's not working because it's hard and you are starting here.

You're also Okay, you have to add the equals to sign I forgot this. Okay now go to your page refresh the page. Now as you can see, I'm saying assign the same properties and value with this class in this class you can also do with the ID class, if you are saying that if you have a div or suppose you are saying in the day and you are saying, paragraph that means you are saying select all paragraph elements where the parent is deep for suppose this is the parent and these are the child's you are saying select all paragraphs where the parent is dead. So that's why if I have a news article and I'm saying in the article on I have my paragraph. First of all, I have the same paragraphs, or the same values we have in the day, same same elements we have in the day and same elements in the article I'm saying, find all the paragraphs will a parent is date and assign these properties and value voted page, refresh the page.

Okay, sorry. You need to close this. Go to your page, refresh the page. Now as you can see, it's adding the same value with the paragraph. So here is the paragraph. If I'm saying paragraph, and also h1, go to page refresh the page.

Now as you can see, in this day, we have paragraph and also h1, but I'm saying assign these values where the h1 exist. During the day you have your paragraphs and in the upper article, as you can see, this is our article you have two paragraphs and one h1, it's not adding the properties and value to this, you're these elements which solely depend upon you. Okay, so you can create as many as selector as you want. For the reference, go to the W three schools and you can also write possible just CSS selectors, five, CSS selectors, and add some links. So id selector universal selector. You can use a combination combination, or you can use a pseudo classes.

We'll discuss about the pseudo classes, but for now, you can use the ID and the class and the elements selector or you can create the class ID and element selector so I think this is enough. In the next section, we are going to cover some other topics. So thank you for watching.