CSS Selectors

Hello friends! Welcome to our series, CSS. In our last segment, we saw how to add comments in CSS. We had added single line and multi-line comments and along with that we had even seen the advantages. Why in CSS the comments are useful and why we should add the comments. So, the last segment was on CSS comments. Clear guys!.  Our today’s section is regarding these selectors. In the last segment, we had only seen about one selector, so that we can go ahead with the introduction part through it. Today, we will see about CSS Selector on a deeper level and we will learn about all the selectors with examples. So, let's start with our segment. So, 1^st of all, CSS Selector, question would be what is CSS Selector? As  we can see in the 1^st line. CSS selectors are used to select the content you want to style. It means that with the help of a selector, in our entire web page, which is the portion that we want to style, that we can select particularly. Let’s say that in our web page there are a lot of lines that are available. Let’s say that I want to design only the 4^th line or give style with CSS. So, with the help of CSS Selector I can give style to that particular line. Selector is used to select the portion where we want to style up. Clear ! Then it is mentioned, selectors are the part of the CSS rule set. In the 1^st segment of our introduction, we saw Syntax, what is the Syntax of CSS? The entire Syntax of CSS, we also call it rule set. The selector is the part of the rule set. CSS selector selects HTML elements according it’s id, class, type and attribute. That means with the help of a selector in a different way, we can select the portion. We can select it through elements like h1, p, table or we can give it an id and select, we can give it a class and select. In our HTML course, we had a session on ID and class. In that, we had seen what ID is and we used to identify ID with a hashtag. What is CSS? We identify with a period, with a dot sign. So, with a hashtag, ID selector, we can give a CSS. And we can also give CSS with a dot and class sector. Then comes the type and attribute. Like there were types in input. Type=text, type=number. When we have to give CSS through any type, we can even do that. That means that CSS provides us with various types of  variation through which we can give CSS. Now, we will go through the different types of selectors one by one. Here, in the slide, they have given types of CSS selector. such as CSS element selector, CSS id selector, Class selector, universal selector and group selector. About every selector, we will see in today’s session one by one. So, let’s start 1^st with the element selector. What is an element selector? Element selector means that whatever HTML elements are available, directly through that element, we apply CSS. For example, we had seen in the last segment, h1 means heading tag and p tag, we had applied CSS on these both. H1 and p, we call them as elements. If we want to practically perform it. We will use the example given here. So, let’s say I open my Sublime text. In Sublime text, we will set the html program. After that, we will type html and ctrl space together, then I will get a structure here. This is my “Example CSS Selector”. Okay. Now in body, the 1^st thing we are seeing is the element. So, “Below sections explain about…”, now we are adding a comment. “…explains about Element Selector.” We are putting it in comment, Means with this, we will identify that in this section whatever is mentioned that is about Element Selector. For Element Selector, I take a P tag and add any content like,” This style will be applied to all the P tags”. Okay, we will save this program, exampleselector.html. Okay. clear guys!  Now, we will go to our programs. This is our example selector which is our today’s segment. I will run that. I am getting here that “this style will be applied in P Tag '' We will zoom it. Okay. This is my program, example selector. What I had added in the P tag, I am able to see that. So, our P tag is appearing. So, now we will give style to it. Since, our 1^st section is to give style through elements. What will I do here? Style, ctrl space, enter. Let’s say in P, I will be using an element selector. Which is my element, P, so I will write here P, open and close curly braces. In P, I want to add that my text should appear in the center. So, for that my property would be text, align, center. And I want that my P tag content should be in blue color. Okay. So, here in P,using the html element, which is P, using the element, I am applying CSS. I have written 2 CSS; text align and the other is color. I will save this and I will go to the program and run. Here what happened is the content of my program that I had mentioned in P tag, it has come in center. Earlier it was starting from the left side. Instead, it has become center aligned and with that even the color has changed. Clear guys!  Here, what we have done is, our selection, I have done it through elements. It means that our element is html p tag, and to the p tag we gave a few CSSs and provided the style. So, this was our element selector. We can give available style to html. Now, we will go to our slide. Okay guys! Next is our ID selector. ID means; using a unique ID we can perform any CSS. Like we had learned in HTML that ID is unique in our entire web page. Means if I have given ID to any HTML element. In the entire web page, there will be only one. That means it will be uniquely identified. I cannot give that particular id to any other element. I can give that id only to that particular element. So, we will see it through a program. Let’s say, in Sublime text, our portion will be to select the id. So, I will create a comment here, “Below sections explains about ID selector” Okay. For ID, let’s say, I will add the same  p tag. But to this p I will give an ID, it is id paragraph 1. Okay. In this, I will write a paragraph. Here is my id. Here I want to write a line, let’s say. This is a paragraph using ID Selector. I have saved it. After saving, when I will run this program. Since, I have already given CSS to a p tag. So, the same CSS is being applied here. okay! Are you getting it? The CSS that we applied here, the same CSS has been applied to our second p as well. We have already given CSS to one p, that CSS is here. But to my 2^nd p, I want to give a different CSS through the id. For that what will I do is, I will write here, id that is “#para1”. So, what is the id that I have given is para 1. So, it is necessary to write the same here. And like we saw; id is identified with # sign. We use # sign to identify id. Then, curly braces open. Let’s say, this text I want to make it left aligned. So, text align- left, the color for it, I will mention, green. save. Okay. I run this. My upper p is as it is but my ID Selector, the changes that I have applied through my id, those are getting applied here. My content has come to the left side and the color is also appearing to be green. So, here we made some changes using the id. We have given id to p and we have written CSS by witting # id. clear guys!  Now, we will move ahead with our Selector. This was our CSS id selector. Next is CSS Class Selector for specific elements. It means we will use class. The way we used the id. In the same way, we will use the class. But we will apply it to more than one element. We had seen in the html segment that id we can use in the entire page only once. It is unique. But, it is not the same in the class. Class, we can use it in more than one place. Like the last segment that was there, the CSS introduction portion. In that, we had seen the advantage also that CSS saves a lot of time. That happens with the help of class. We will write the class once and use it in multiple places. So, we don’t have to add CSS in multiple places. Same CSS we write only once and in multiple places we add the class. That saves our time and in one go our CSS is applied in a lot of places. Okay guys,Now, we will see how we can add class. For class let’s say, I add a comment here. “Below section explains about Class Selector”. Now, here I am taking one h1 tag. In h1, I will write “This is the example of Class Selector”. Okay. Now, I am taking a p tag. In that also, I will write the same thing “This is the example of Class Selector”. Okay. So, I have added 2 things, one is h1 tag and one is p tag. Now, I will add one class here. In the class collection, I will give the name, center. And the same class I am adding in p. so, what I did is the class that I have still not written in style, I will write it but I have made the class and added it. So, how do we add id? Id=then id’s name. Same, how do we add class, class=class name. So, here I have added class attributes in h1 and p. In both I have added the same class, center. Now, I will write it, like we have earlier written, class is written from period signs. So, .,(dot) name of the class. So, . center (dot center) Now, I want whichever class that is allowed, here I have taken h1 and p. 1^st of all I will save it and run it. So that we get to know one thing. What do we get to know here? We have not given any CSS to h1. We are getting it as it is in big font in black color. Because we have already given a CSS to p, text- align center and blue. Same CSS we are getting for this p as well. Like you saw, here we are getting the center align in blue color. So, we will change it. In the center we will write, let’s say text- align, right and color orange.  And then, I ran it. So, as soon as I run it, you can see that even my h1 is getting the CSS and p is also getting the CSS. My content has gone to the right side and it is seen in orange color. So, here basic to the p element we had given CSS that has been overwritten by class. So, here the same class- center, we had used in 2 places. 1^st was in h1 and the 2^nd was in p. This indicates that we can add the same class in multiple places. Clear guys!  So, here I had not written one CSS for h1 and one CSS for p. I had not written 2 CSS. I had only written one CSS in center class. And the same CSS class I had applied in 2 places. So, you can see that with the help of class, the same CSS I have applied it in 2 elements. So, here currently we have used only 2 properties. But let’s say we are designing a big web page and we have to add more than one thing. I have to add properties. Let’s say instead of 2 we have to add 15 or 16 properties. So, if I am constantly writing the same thing, my line of code increases and in execution, the loading time increases. So, with the help of class we are reducing the line of code and also our execution time. So, here we have added the class. Got it guys! Now, we will move ahead with our slide. So, our second last selector is the Universal Selector. Universal Selector means it is a wildcard character. See, it is written here. The Universal Selector is used as a wildcard character. It selects all the elements on the pages. Means that all our elements which are there, to give them all a fixed CSS, Universal Selector is used. So, how can we do this? Let's say in our current page we have used 3 p tags and one h1 tag. Apart from all three p and one h1…like I add a comment here “Below section explains about Universal Selector”. In this, I will add one more h2 tag. I will add in h2 “This is the example of Universal Selector”. I will save it and when I run it here, I am getting left aligned, h2, I am getting a heading here, this is the example of universal selector. Like, we have seen in the slide. With the help of a star icon we can apply Universal Selector. So, let's go to our CSS. okay!  Here, I will add this star and my curly braces open and close because our CSS that is there, the Universal one. That is going to apply on the entire page. We will give such CSS which would be applied to everyone. Let’s say, I will give a font size- 15 pixels. This is my page. I have not reloaded it. You can see that each one has a different size. As soon as I reload it, all my p tag and h1 tags and my h2, all 3pS have got a fixed font size which is the same. Here, we saw that the Universal Selector means star. Whatever we add in the star, that gets applied to all the elements. Now, we will add one more thing. You can see the color that we have here. They are different, in all 3 p tags there is blue, green and orange color. So, here we will add color. Let's say I am adding a pink color. I will save and reload. So, you saw that for all three p tags my color didn’t become pink. Only my h2 element only becomes pink. So, the color; that has not changed with the help of Universal Selector. Here, our concept that comes, because of which it didn’t happen, that is precedence. So, precedence is such a thing because of which the color of only h2 has changed. Rest of the things are as it is. We are going to go ahead with CSS, at that time in one segment we will also learn about precedence. Why the rest of the Selectors have not become pink but only one Selector has become pink. We show you this so that we get to know that Universal Selector, add CSS in all the places but there are things like id and class, there are few precedents of Element Selector because of which this CSS has not been applied there. We will learn about it in the preceding session. So, currently, I have applied the color pink. That has been applied to h2. Clear guys!  Next, we will go ahead with the slide. Our next Selector is a Group Selector. What happens with the Group Selector? Group Selector means that selector to which we want to apply common CSS. What do we do at the time of common CSS. We write those things together. For example, here it is written h1, h2 and p. So, I have taken 3 elements here. And I have given a common CSS to all three elements. So, here we have done the opposite of what we did in class. What we did in Class is that we generated one class and we gave that class in one h1 and in one p. We can do the opposite of that, here instead of Class if I write here h1 and p, still my task would be the same. So, we will perform it in practical. “Below sections explains about Group Selector. Let’s say that I add, here, 3 heading tags? Let’s say h3, “This is the example of  Heading 3 tag. and at the end group selector. Okay. And same we will add in h4 and in h5. Okay. So, save and reload. After reloading, we are getting 3 things. This is the example of heading 3 tag. Heading, here it will come 4 and here 5 will come. Heading 3 tag, Heading 4 tag and Heading 5 tag. That means we had added 3 heeding tags. We are seeing it in pink color because we have added Universal Selector and kept it. So, whatever we will add in our webpage, all that we will see only after the CSS of Universal Selector is applied. So, let’s say, we want to see about the Group Selector. What I will do, to the h3, h4 and h5, I would like to give a common CSS. So, let’s say h3, h4, h5. So, what will happen with this, I have made a group of 3 things, h3, h4 and h5. I have made a group of 3 elements and now I will give common CSS to it. Let’s say, I want to give common CSS, the 1^st is font size, which is 20 pixels and the color that I will give it is… our green, blue, orange and pink colors have been used, so lets say, I will give it red color. We will save it and run it. As soon as we run the program our Universal Selector’s CSS changes and our all 3 headings are seen in red color. Here, it was 15 and on it’s place we have taken a 20-pixel font. So, here we get in big font. Means the 3 elements group that we made. We can see a common CSS for those 3.  Because we have given all 3 the same CSS, font size 20 and color red. So, this was how we can make the group in the Selector.  Clear Guys! Great Our 1^st was Element Selector, in which we used p. 2^nd was ID Selector. In which, we have made an ID and passed the CSS. Then was our Class Selector in which we have made a class and that class we have added in 2 places. And 4^th is our Universal Selector. In this what we will write in Universal, the same CSS will be applied everywhere on the web page. And our last was Group Selector, which means whichever elements we have to give the same CSS. So, we write that in a group. Like I said before, the difference between class and group is that I could have written class and added in 3 places or the headings of all 3. It Means  my elements which are there, I can write them together and apply the CSS. It is the opposite of the class. But here, if there is any such h3 tag, where I don’t want to red color CSS. It will still be applied there. As I have given this default CSS to h3 element. So, as per the requirement you can make use of it. You have to identify when to use class and when you have to use Group Selector. got it!  So, let’s go to the slide. So guys, that was our today’s segment. In this segment, we have completed all our Selectors. I request you guys that in today’s session the practical that is performed. You step by step practice and perform all the Selectors. Element, ID, Class, Universal and Group, all of these 5 Selectors, perform it yourself, check it. If you are facing any difficulty in performing it, you can tell us on forums.learnvern.com. We will get back to you with the solutions. In our next segment, we will see Pseudo Selector. Thank You.