Unlike a type selector, which targets every element with a corresponding element

type, an ID selector, lets us assign a unique ID to an element.

That way, we're able to specifically target an element based on

its ID attribute.

ID selectors are declared using the pound symbol followed by the ID name.

So in our style.css file right below the type selectors we wrote in the previous

video, I've added some space, so we can see what we're writing a little clearer.

Let's declare an ID selector by writing the pound symbol.

Followed by the id name.

So let's make the id name primary dash content.

Then we'll follow the selector with our declaration block.

And inside the curly braces we're going to type border colon space.

Then we're going to write three pixels, space,

solid, space, then red, and we're going to close it off with a semicolon.

So this ID selector we just wrote will match the html element

that has an id attribute with the value primary-content.

So if we save our style sheet and go over to our workspace preview, when we refresh

the page we don't see that red border anywhere [LAUGH] on the page just yet.

Well, that's because we still need to assign the ID of

primary content to an HTML element.

So let's go over to our index.html file and

we're going to give the first div element.

So the one here on line 12, an ID attribute.

Then inside the quotation marks, we're going to write primary-content.

So, the ID names are up to us.

And it's usually good practice to give

them meaningful names that explain what they do, and what their purpose is.

Now because this div contains the main content on the page we are giving

it the ID name "Primary Content", which indicates that very clearly.

So now when we save our index.html file and

take a look at it again in the browser preview, there's our fancy red border

around the primary content div element on the page.

ID's are unique to the page, so

it's important to remember that an element can only have one ID.

And a page can only have one element with the same ID name.

So because our div already has an ID applied, we can no longer add IDs to it.

And we cannot use this primary content ID anywhere else in

this particular HTML file.

IDs also have browser functionality.

They can be used as what are called fragment identifiers for

creating landmarks or anchors in pages.

I will show you what I mean.

So if we give the header element here at the top of our page, and

ID attribute with the value TOP.

Then we'll scroll down to the bottom of our HTML file nd in our footer,

we'll give our anchor element here an href value of #top.

This #top value will now match the ID of top.

So let's take a look at what happens.

I'll go ahead and save the HTML file and refresh the browser preview.so

now when we scroll down to the footer at the bottom of the page and

click the back to top link here, the browser takes us

back to the top of the page because we've instructed it to find the element.

With the ID top, and we can actually see the top anchor ID here upended to the URL.

So while we're in the footer element, lets give the footer and ID of main footer.

So in the opening footer tag, we're going to add an ID attribute, and

we're going to make the id value main-footer.

So now we can save our index.html file, and in our style sheet,

we'll target the main footer element with an ID selector.

So right below the Primary content selector we wrote earlier,

we're going to type # main dash footer,

followed by our declaration block, then we're going to add a few CSS declarations.

First we're going to write padding dash top, and

we're going to set the value to 60 pixels.

Right below that, we're going to add padding dash bottom, and

we're also going to set the value to 60 pixels, and finally, we'll write border

dash bottom, and for the value we'll type the word solid.

Followed by TEN pixels and the color orange.

Then we'll close it off with a semicolon.

So now when we save our CSS file and

refresh our browser preview, when we scroll down to the bottom of the page,

we can see how our footer has a nice orange bottom border.

And it also has some top and

bottom padding, to give this footer text some breathing room.

So as we can see with IDs we're specifically telling the browser to

target a unique element on the page.

But what if we need to target more than one element with these selectors,

while still maintaining some form of specificity?

Well, that's where class selectors are really useful.

And we'll cover those next.