ID Selectors

Unlike a type selector, which targets every element with a corresponding element 0:00 type, an ID selector, lets us assign a unique ID to an element. 0:04 That way, we're able to specifically target an element based on 0:09 its ID attribute. 0:13 ID selectors are declared using the pound symbol followed by the ID name. 0:15 So in our style.css file right below the type selectors we wrote in the previous 0:20 video, I've added some space, so we can see what we're writing a little clearer. 0:26 Let's declare an ID selector by writing the pound symbol. 0:31 Followed by the id name. 0:35 So let's make the id name primary dash content. 0:37 Then we'll follow the selector with our declaration block. 0:43 And inside the curly braces we're going to type border colon space. 0:47 Then we're going to write three pixels, space, 0:53 solid, space, then red, and we're going to close it off with a semicolon. 0:56 So this ID selector we just wrote will match the html element 1:02 that has an id attribute with the value primary-content. 1:08 So if we save our style sheet and go over to our workspace preview, when we refresh 1:12 the page we don't see that red border anywhere [LAUGH] on the page just yet. 1:19 Well, that's because we still need to assign the ID of 1:24 primary content to an HTML element. 1:28 So let's go over to our index.html file and 1:32 we're going to give the first div element. 1:36 So the one here on line 12, an ID attribute. 1:39 Then inside the quotation marks, we're going to write primary-content. 1:44 So, the ID names are up to us. 1:52 And it's usually good practice to give 1:55 them meaningful names that explain what they do, and what their purpose is. 1:57 Now because this div contains the main content on the page we are giving 2:02 it the ID name "Primary Content", which indicates that very clearly. 2:08 So now when we save our index.html file and 2:14 take a look at it again in the browser preview, there's our fancy red border 2:17 around the primary content div element on the page. 2:23 ID's are unique to the page, so 2:28 it's important to remember that an element can only have one ID. 2:30 And a page can only have one element with the same ID name. 2:35 So because our div already has an ID applied, we can no longer add IDs to it. 2:39 And we cannot use this primary content ID anywhere else in 2:47 this particular HTML file. 2:51 IDs also have browser functionality. 2:55 They can be used as what are called fragment identifiers for 2:58 creating landmarks or anchors in pages. 3:01 I will show you what I mean. 3:04 So if we give the header element here at the top of our page, and 3:06 ID attribute with the value TOP. 3:10 Then we'll scroll down to the bottom of our HTML file nd in our footer, 3:14 we'll give our anchor element here an href value of #top. 3:20 This #top value will now match the ID of top. 3:26 So let's take a look at what happens. 3:34 I'll go ahead and save the HTML file and refresh the browser preview.so 3:36 now when we scroll down to the footer at the bottom of the page and 3:42 click the back to top link here, the browser takes us 3:47 back to the top of the page because we've instructed it to find the element. 3:51 With the ID top, and we can actually see the top anchor ID here upended to the URL. 3:56 So while we're in the footer element, lets give the footer and ID of main footer. 4:05 So in the opening footer tag, we're going to add an ID attribute, and 4:11 we're going to make the id value main-footer. 4:17 So now we can save our index.html file, and in our style sheet, 4:23 we'll target the main footer element with an ID selector. 4:27 So right below the Primary content selector we wrote earlier, 4:31 we're going to type # main dash footer, 4:35 followed by our declaration block, then we're going to add a few CSS declarations. 4:41 First we're going to write padding dash top, and 4:47 we're going to set the value to 60 pixels. 4:50 Right below that, we're going to add padding dash bottom, and 4:54 we're also going to set the value to 60 pixels, and finally, we'll write border 4:59 dash bottom, and for the value we'll type the word solid. 5:05 Followed by TEN pixels and the color orange. 5:12 Then we'll close it off with a semicolon. 5:17 So now when we save our CSS file and 5:19 refresh our browser preview, when we scroll down to the bottom of the page, 5:22 we can see how our footer has a nice orange bottom border. 5:27 And it also has some top and 5:31 bottom padding, to give this footer text some breathing room. 5:34 So as we can see with IDs we're specifically telling the browser to 5:39 target a unique element on the page. 5:44 But what if we need to target more than one element with these selectors, 5:48 while still maintaining some form of specificity? 5:52 Well, that's where class selectors are really useful. 5:55 And we'll cover those next. 5:58