Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
ID selectors are very similar to Class selectors, so similar, in fact, that many people get them confused. Class selectors, as we've seen, target the class attribute. And ID selectors, on the other hand, target the ID attribute. Unlike Class selectors, which can be used as many times on a page as you need, ID selectors can only be used once per page. That stems from the fact that each ID on a page must be unique. This is one of the reasons that people use IDs to typically identify areas of content.
You'll probably only have, for example, one header, one footer, that sort of thing. Now it could seem like ID selectors are less powerful than Class selectors due to the fact that they can only be used once per page, but that's actually wrong. ID selectors are much more powerful than Class selectors and will overwrite the Class selectors if their styles conflict with each other. This is a concept called Specificity. And it basically says that the most specific rule wins in the event of a conflict. Since there can be only one element with an ID of header, for example, ID selectors tend to be very, very specific.
So here we have id_selectors from the 06_10 folder opened. And I want to talk about some of the structure that we have existing on the page already. So I'm just going to go ahead and switch to Split Screen View. And I notice when I place my cursor into this area, I see a little dotted line around it. Now typically, that means that this is a div tag. If I select that in my code, I can see that we have a div, and it has an id of top. Well, we also have another div tag down here at the bottom, and it has an id of, you guessed it, bottom.
So we have an id of top and an id of bottom. And we can use those ID attributes to write ID selectors that are going to style those particular areas. And we can take advantage of those ID attributes by writing ID selectors that are going to style those regions on our page. I'll switch back to Design view, go over to my CSS Styles panel, and go ahead and click to create a New CSS Rule. Now, again, this time we need to choose our Selector Type. I am going to grab the pulldown menu, and I am going to choose ID.
Now if you remember for my Class selectors, Class selectors need to be preceded by a period. Well, IDs need to be preceded by character as well, but they need to be preceded by the hash mark. That's also called an octothorpe character, but I prefer hash mark. So I am just going to type in pound, or hash mark, or octothorpe, whatever you want to call it, that character, and then the word top. So that's how we write an ID selector to target to that particular area on the page, #top. Now remember, we are going to define it in This document only, and I'll go ahead and click OK.
Now because the ID attribute top is applied to a div tag, any styling we do here is going to affect the entire div tag, and some of the content inside of it. So first thing I am going to do is switch to my Background category. And I am going to give this div tag a Background-color. I am going to type in #cc9. Now because our div tag already has the ID attribute applied to it, if you wanted to see what that was going to look like, you can go right down here to this Apply button and click, you could see the Background- color show up within that div tag.
So it's kind of nice that you can preview these before you commit them. Now I am also going to go to my Box category. And for Padding, I am going to use Same for all checked. And I am going to type in 10 pixels. Now if you noticed, if we click Apply, Padding basically gives you a little bit of cushion between the edge of the element and the content side of it. So that creates a more of a box look to this, and the text isn't budding up right against the edge of the div tag. We can also set a Width here. And I am going to set the Width of this div tag to 450 pixels. It's going to shorten it a little bit, and again, make this look more like a little box.
Now I am going to go to my Border category, and for my border, I am going to choose this Style, Width and Color Same for all. I am going to go ahead and do a Style of solid, a Width of 1 pixel, and for Color, I am going to type in #600, which if you remember, is that burgundy color. I'll go ahead and click OK, and that finishes the styling of that region. If I switch over to Live View, so we can see this a little bit better, you see that the div tag now is smaller in size because we gave it a fixed width. We gave it a border all the way around it, a Background-color and some Padding to keep the text away from it.
This is a really a good way to create sidebars, or callout tags, or things like that. I am going to turn Live View off. And now let's go ahead and create the selector for the bottom div tag. So again, I am going to create New CSS Rule. I am going to do an ID selector. And the ID selector is going to be named #bottom. And we are going to define it in This document only. Remember, there is no space between the pound symbol and the name, so #bottom. Go ahead and click OK. And here, we are going to make some changes that are little bit more specific than the changes we made above us.
First off, we are going to change the Font-family to Arial. We are going to change the foreground Color to #FFF, which is white. Then we are going to go our Background, change the Background-color to #666, which is that dark gray. And then we are also going to give it Width and Padding as well. I am going to go to my Box properties, and I am going to go ahead and give it a Width of 450 pixels, and give it a Padding of 10, just like we did before. Now if I click Apply, I can preview what this is going to look like, then I am going to click OK. Now notice that we have a slightly different change here.
Do you see how our paragraphs went from being Times New Roman to Arial? That is because they are now inheriting that font value, not from the body tag, which is further up the documentary, but now from this div tag, which is much closer to them and has a higher degree of Specificity. So we have styled two distinct regions using the power of ID selectors. Note how the Specificity overwrote some of the existing styling, and how inheritance cascaded the formatting down into the child elements. In this case, the Arial font is a good example of that. These are both extremely important concepts to understand as you begin writing your own CSS.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.