Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
In this hands-on course, James Williamson demonstrates the concepts that form the foundation of Cascading Style Sheets (CSS), including styling text, adding margins and padding, and controlling how images display. The course also explores the tools needed to work with CSS, the differences between embedded and external styles, how to use selectors to target elements, and what to do when styles conflict.
ID selectors work in much the same way as class selectors, in that they allow us to target any element on the page with a specific ID attribute. Now there are a few slight differences between the selectors that you need to be aware of, so let's take a closer look at ID selectors. And you can do that by opening up the id-selector.htm, which you can find in the 02_04 folder in the exercise files Chapter_02 folder. So essentially, looking at this page, the structure is pretty much exactly the same.
Now we have stripped off any those classes that we had on our earlier elements. We just want to give some IDs. Now IDs, again, are just like classes in terms of the fact that they are an attribute. So if I go to our first aside right here, for example, and I type in id=, I can just go ahead and give it any value that I want. In this case, I am going to call it aside1. So we are using the same names that we used before, only this time instead of a class attribute, it's an ID attribute. The same thing for the second aside, I am going to give it an id="aside2." So, so far, not much difference; I am just using the ID attribute instead of a class attribute. But as you write the selector for them, the syntax is a tad bit different.
So when I go back up to this little area where I am going to add my styles right here on line 37, to write an ID selector, you first start with the pound symbol, also known as the octothorpe. And then I can go ahead and follow that with the name of the attribute that I want to use, in this case aside1. In this case, I am going to go ahead and just apply a different background to each one of these. I am just going to do background and I want to say beige. That's a good color. Now Aptana is trying--and you may have noticed this in an earlier movie too-- it's trying to save me from myself, essentially throwing up a little code error here.
And if I hover over that, it will even try to tell me that hey, this color value is not a defined property. Well, it is. In the Color Level 3 specification it certainly is. It is also part of the SVG specification, and so because of that, it's been supported by browsers for years and years and years, so you can use it without fear. That's nice of Aptana to tell me that, but not a big deal. Right now, on the next line I am going to do the same thing, #aside2, and again here I am going to do background, and we will do tan. So we get beige and tan, two very exciting colors. So again, notice that the pound symbol identifies this is an ID and if we go down to our page, we can find the associated attribute. And if I save this and preview this in one of my browsers, I can see that I have tan and brown backgrounds for my asides respectively.
Okay so what else is different in terms of classes and IDs? Well, for IDs I can only use this aside1 value one time per page, so IDs must be unique. So before where we were able to use the blueHeading class multiple times, here I could use this particular ID only once. So you can have multiple IDs per page, just not the same IDs, so it has to be unique. Now in terms of CSS, that means that in the event that a class and ID selector conflict with each other, the ID selector's styling will be used in favor of the class because it's more specific.
At first glance, using class and ID selectors might seem simple, but there's a fair amount of thought that should go into using them before you actually execute them in your code, so in our next movie, I am going to go a little deeper into the strategies behind using both of those selector types.
There are currently no FAQs about CSS: Core Concepts.
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.