Choosing the Right CSS Selector for Styling an Element
I’ll teach you how to use Chrome dev tools to choose the right CSS selectors for styling your elements. If you want to work along, fork this starter pen on Codepen using the instructions in the video. If you have trouble getting the page styled properly, here’s the finished pen for reference.
Resources
Video Transcript
Hey everybody. In this video, I’m going to look at how to properly choose a selector for styling elements in an HTML page. In particular, if you have a page that you can’t control so you can’t change the elements in the page, you can’t add classes, IDs, that sort of thing. How would you take the elements that are already on the page and style them the way you want and choose the right selectors to do that?
This is something that new developers struggle with a lot. It seems maybe a little bit magical, how you decide what the right selector is, but it’s really useful, especially since new developers… especially if they start doing freelance work, they’re going to touch a lot of WordPress and probably be customizing some WordPress themes, and those are cases where it’s difficult to change the elements of the page. It’s difficult to change the mark-up of the page. So it’s important to know how to pick selectors that will style the elements you want without actually having to add classes or IDs. First, before we start, I want to talk about a tool I’m using here.
This is CodePen. It’s the interface you’re looking at right now, and so across the top It has panes for HTML, CSS, and JavaScript. And then, across the bottom, it will render out the page you’ve created in those panes. And it does live reloading as you make changes, and it hooks all these files together, so you don’t really have to worry about that. It’s a really cool way to learn and experiment with HTML and CSS and JavaScript, without having to worry about some of the minutiae connecting the files together and, you know, maybe even hosting them somewhere or something like that. It takes care of all that for you.
And what I’ve done is I have created a pen that you can use as a starting place and I will share the URL to this in the… in the… on the page for this video. So what you can do… I’m going to pull up an incognito tab, so you can see what this looks like if you’re not logged into CodePen. You’ll pull up the pen. It’ll look like this. If you hit “Fork,” what that’s going to do is that’s going to make your own personal copy of the pin that you can make changes to. And so, then you get this login window. You can either sign up for a new account if you’ve never used CodePen before, or, if you already have a login, you can just log in here and that will create your own personal copy of this pen so that you can work along.
OK, so this is what you’ll see on your newly forked copy of this demo page. It’s a pretty simple page. It has a header. It has a main content area, and then it has a footer. It has some elements in between that we’re going to be manipulating. I’ve just put in some placeholder images that we can work with here and some text from Arrested Development. Just to make it a little more fun.
So let’s start. The first thing we’re going to do is we’re going to take this navigation list, and we’re going to move it over to the right. We want to lay it out horizontally and get rid of these bullets and make a couple other minor changes to it. In order to do that, though, we’re going to need to know… we’re going to need to find some good selectors that we can use to make style changes to this element that won’t affect any others that we don’t want styled.
So I’m going to start by using Chrome dev tools. If you’ve never used it before, it’s a really valuable tool for front-end developers. The more you can learn about it, the more easily you’ll be able to debug problems and figure out weird styling specificity issues and those sorts of things. So it’s really useful to know.
To get into it, what I’m going to do is I’m going to right click on the element that I’m interested in, which right now it’ll just be this “Home” link in the navigation. And I’m gonna go to “Inspect,” and that’ll pop it up on the right. It may pop it up at the bottom for you, and that’s fine. It’s the same thing. If you want to move it you can hit this little menu here (the three stacked dots near the top-right of the dev tools window) and these buttons at the top determine where it will actually appear. So that’s what it looks like on the bottom. I’m going to keep it over to the right for this demo.
OK, and if you’ll notice the item that’s selected here is actually the item we clicked on. So when I hover over it, it will highlight it there on the left (on the rendered page). And that just tells us what item or what element we have selected. So this whole pane here is the entire document tree.
So these are all the elements inside the document. As I hover over them you can see each one being highlighted. So that’s our entire page represented there as a tree. To the right, with the “Styles” tab selected, we have all of the CSS styles that are being applied to this element, and some of them — the ones in white — are the ones that we’ve written or that’ve otherwise come in through a style sheet or an inline style or something like that. The gray ones are the styles that have been applied by the browser, so those are the default styles for the elements.
If we look over here, I see we’ve got a style inherited from the “ul” element. That is a “list-style-type” of “disc.” That is actually what’s creating the bullet. And since it’s on the “ul” element I can click that and actually select it here. So that’s the element I want to style to get rid of the bullet, and since it’s in the gray here, that means it’s a browser default style. So the reason that unordered list gets the bullet is that the browser renders it that way by default. So we’ve got to basically undo that browser style.
So what selector should we use for this? The simplest thing we could use would be a “ul,” so we can try that and see if that works. The easiest way to prototype a style is also here in dev tools. If you hit this plus sign (at the top-right of the “Styles” panel), with the element you want to style selected, it will give you a new style declaration with that element as the selector. So we’ve just got a “ul” selector. So let’s try the style here. Actually, let’s style “type.” And we’re gonna say “none.” OK, and you can see that updated immediately.
Now one thing that’s important to note is that this style is just in our browser’s memory right now, so if we refresh this that style would be gone. That’s why I call this a prototype because we’re really just testing these style declarations over here. This is not permanent. What we can do is, if we decide this is what we want, then we can just move it manually over here to the CSS pane and add it to our actual CSS on CodePen and then once we save that, that’ll be a permanent part of our pen. But before we do that, let’s make sure this is exactly what we want. So let’s scroll through the page and just see if this rule has any other implications on other elements on the page. And one thing I can see is that these are also lists and they no longer have their bullets either. Which is actually OK in this case because I don’t want those to have bullets either. I don’t want my footer links to have bullets either.
But… and also if you look at this this tick box next to that style in dev tools, we can check and uncheck that to turn the style on and off. So if you’re not sure if it affected an element, you can just toggle it on and off and you can see there (on the rendered page) the bullets are appearing and disappearing as I toggle it on and off (in the “Styles” panel) so I know that it’s affecting those elements.
What else could this effect? So this selector is going to target every unordered list on this page. That might be too general for our use case, even though it’s not affecting anything right now, because it’s entirely possible we might want to put an unordered list down here in the content area and that we might want it to appear as a bulleted list. If we do that, we probably… we probably wouldn’t want to remove bullets from every unordered list on the page and then add them back to the ones in the content area. Since that’s kind of the default style already, it doesn’t really make a lot of sense to do that in my opinion.
So I think what we want to do is we want to find a more specific selector that’s only going to target, for now, this navigation list. So one cool way we can do that is with the “ul” elements selected here. We can go down to this bar (under the Elements panel in dev tools, below the document tree). This is sort of a breadcrumb trail of this unordered list’s lineage. So we think about the HTML document as sort of a family tree almost. So each element has a parent and possibly children and then other descendants further down the line. So we can see from this that this unordered list’s parent is the “nav” element. And it has a child that is the list item, and that list item has a child that is the “a” element. And if we go back, there’s a grandparent that’s a header. And we can actually use these in our selectors to target elements more specifically.
So what I’m going to try is, I’m going to try to write a descendant selector and what that means is that the selector has two different elements and we’re saying that one is a… it’s only targeted if one is a descendant of the other. So I know the “ul” that I care about right now is a descendant of the “nav” element. So let’s update this selector. And that is how you write a descendant selector: it just has a space between the two elements (like this: “nav ul”). The last element in the list is the one that’s actually being styled, and then all the preceding elements are… are sort of upstream from that element in the tree. So that means we’ve got somewhere there’s a “nav” element and inside that there is a “ul.” It can be at any depth. It can be directly inside it like it is in this case or it can be further down. So that’s a descendant selector.
If we wanted this to be more specific — if there were multiple layers inside this navigation and we wanted to say, “Oh, we only want to style unordered lists at the first level inside the ‘nav,’” — we could do that (like this: “nav > ul”). That’s a child selector. So that says, “style a “ul” that is a child of the navigation.” So if there was another element on the outside here, if it was a “nav” element and maybe inside that there’s a “div” and then inside that there’s a “ul,” that “ul” would not be affected by this style. We don’t really need that level of specificity because probably the only thing that’s ever going to be in this nav element is this “ul”. So we’ll just use this descendant selector because it’s simpler to write.
So now, if we scroll back down to our footer, we can see that the footer has the bullets again. We don’t really want that. But it does tell us that this selector is sufficiently specific to only target this navigation. And we’ll just circle back around and get the footer later. And now we know that if we have… if we add a “ul,” an unordered list, inside the content area, then it will have bullets, like we’d expect.
Now that we have a good selector and we got our style written, I want to port this over to the actual document. So I’m just going to select it here and copy it and I’m going to paste it into my pen inside the CSS pane, but, before I do that, let me show you what this will do if I don’t do this. Let’s save the pen.
So the pen does not have the style now. I’m going to refresh this page and now the bullets are back and that’s because the style prototype that we did inside dev tools was only in the browser’s memory, and It gets wiped out when you refresh or if you close the browser. Basically, if anything happens, that style goes away. That’s why I stress that dev tools, the “Styles” pane is good for prototyping, but it will not permanently change the actual page.
So I’ve still got this copy. Let’s go ahead and paste it in. And now, if we save that or actually even before we save that since it live reloads, we can see that the navigation does not have bullets. Now I’ll go ahead and save. OK, great.
Now we can get on to laying this out horizontally. And I’m just going to right-click and “inspect” again so that we can zoom down to that element. And just by sort of hovering over these elements, I’m gonna try to figure out why these elements are laid out vertically instead of horizontally. If I can find out why they’re laid out horizontally… or vertically, then I can figure out where I need to write the styles to lay them out horizontally,
So this is the innermost element: the “a.” It looks like there’s no reason I can see that that element would not be laid out horizontally. So let’s go up one more (level in the document tree). OK, now this appears to be the culprit because the element stretches the entire width of the content area. So that means nothing can be beside it because it takes up the entire width. Let’s try to see why that is. So now I’ve got the element selected. This is the list item element. And I know that if you’re looking at the display property, a display property with a value of “inline” will allow elements to be laid out horizontally across. A display property with a value of “block” does not because of block element takes up the entire width. I suspect this “list-item” value is similar to block in that respect. It may… it may be identical to block and… as far as the browser’s concerned.
So what I can do to test that is I can just prototype a style that overrides it here in dev tools. So let’s hit the ”+” (in the “Styles” pane) that’s going to give us an “li” selector and I’ll click inside the braces and let’s do “display: inline.” OK, perfect. So that gives us the horizontal layout.
Now you may know or you may have realized that this selector is not specific enough because that’s going to apply to every list item on the page, which is not what we want. We don’t want every list to be laid out horizontally. For now at least, we just want this navigation list. So we need to again get more specific, and we can sort of cheat off of our last style and probably use a descendant selector, just adding the “nav” into our selector (like this: “nav li”).
So what this selector says is, “Any list item that is inside the ‘nav’ element at any depth will be styled this way.” And I think that’s fine because, like I said previously, I don’t think this nav element is going to get any more complex than it is. So I’m not worried about targeting a certain level of depth below the navigation.
So now we’ll want to go ahead and port this style over to our stylesheet, and I’ll get rid of it here (by unchecking it in dev tools) just to make sure that took… and it did. So now the style that’s being applied is the one we’ve written here in the CSS pane. I’ll save that, and then there’s another thing I want to do here.
I’d like some more space between these. Oh and Chrome puts an extra couple spaces that we can take out. OK, now let’s get some more spacing between the actual list items and I’m going to do that… I’m gonna be moving these to the right side, so I think I’m gonna do that with a left margin. The left margin will be wasted on the first element because there won’t be anything to push away from it, but I don’t really care. I don’t think that’s problem. So “margin-left” and let’s do “0.5em.” OK, that gives the list items a little bit of room to breathe.
Now what do we want to do next? The next thing we’ll want to do is, let’s go ahead and move this to the right. And how are we going to do that? So we want to move the whole list. Let’s go ahead and write these… we don’t really need to prototype a selector again because we can just use the same one we used to remove the bullets. We remove the bullets from the whole list and we want to change the position of the whole list, so that same selector will work perfectly.
So I’m just going to add some more rules to this declaration. And let’s try “position: absolute.” OK, that looks like it’s not what we want., but the cool thing about “position: absolute” is then you can go in and define how far the element is from different edges of the viewport. So from the top edge of the viewport we want… we’re just going to put it at the top. So from the top… we’ll have it “0” from the top. That’s not great because it’s overlapping, but now we’re going to define how far it is from the right and I don’t want it on the right because then the link is going to be right up against the right edge of the page. So let’s put it 1em from the right. OK, that’s a pretty good position, I think.
So now we have a really obvious problem. And that’s that you can’t really see these links on top of the blue. So we’ve got a slightly lighter blue on top of a dark blue — not great. Let’s figure out what’s causing those to be colored blue and then we can overwrite that style.
So let’s go to the innermost element — that’s the “a” element — and if we look at this, it has a color defined. Color is “webkit-link.” Let’s prototype a style here, and it’s going to give us the “a” selector by default. We already know that’s probably not specific enough because we only want this color to apply in the navigation. So we want this to apply to links inside our navigation bar so let’s do “nav” (giving us the selector “nav a”). OK, so that selector is “a” elements that are descendants of the “nav” element. And let’s define the color. We’re just going to make it “white.” OK, perfect.
The other thing… I don’t really want the underlines. So I’m going to get rid of that. And that is on this same element. “underline” is a default style on a link element, and you can see that here in the gray “text-decoration: underline.” So we want to basically undo that “text-decoration.” We’re going to say “none” (giving us the rule “text-decoration: none”). OK, so now we’ve got a nice navigation menu with our three links, no underlines, and they’re positioned exactly where we want them. Now we’ll port this over to our actual style sheet. And we can turn it off here (in the dev tools “Styles” pane) to make sure it still works. It does.
OK, and I just want to emphasize one more time if we had not added the “nav” descendant selector to the overall selector, then this would have styled all links white which would have been a real problem down here in the content area because the background is also white. So those links would have been invisible.
Now if we move on down the page and the next thing I want to do is I would like the text here to wrap around this image, and I know that we can do that by floating. So “float” takes an object… or takes an element outside of the normal document flow and moves it to one side or the other. So what that’ll do is it’ll let elements that are normally block elements appear next to other elements, which they can’t normally do. And this text is inside a paragraph element, which is a block element. The image is inline. So if we had another inline element there, then it would just wrap beside it anyway. But since the next thing is a paragraph, which is block element, it takes up the full width, and it’s not going to wrap around that.
So let’s see. This (the image) is the element we want to style because the image is the one we want to actually take out of the flow and move it over to the left. So I’ve got that pulled up in dev tools here. And let’s start. We know we probably don’t want every image this way. In fact, I’m certain of it because this logo is an image and these gallery images are images; we don’t want any of them to have text wrapping around them or other elements wrapping around them. So we want to figure out a way to select just this image. And this one’s actually a little bit tricky because we don’t have a really great way to single out just this image.
Let’s start prototyping a style. So Chrome is going to give us just an “img” selector. Actually. I’m going to go ahead and write the “float” style. And you can see what it does if we apply it to all images. So it wrecks our layout up here in the header with the logo and it creates all kinds of havoc down here in the footer, too so we definitely don’t want that.
But what can we do to make this more specific? This is the image we want. It’s inside a section. So maybe that’s a way we can get there. It’s inside the “main” element. So maybe we can use that. The logo is not inside either of those so that would work there, but I want to be sure before I start messing around with this.
So one way I can do that is I can use this console pane at the bottom (at the very bottom of dev tools), and if you don’t see that, you can just hit the “Escape” key on the keyboard and that will pull up the console at the bottom. And what this does is this lets me write Javascript and see the output of it directly there in the console.
And I’m going to use that to see, if I wrote a given selector, what elements would I be selecting? Sometimes you can just prototype the style over here (in the “Styles pane) like we’ve been doing and go down through your page and look. Sometimes it may be harder to see what elements… if the style is really subtle, it may be hard to see exactly which elements it’s being applied to. So this is a useful trick in that case.
What I’m going to do is I’m going to write “document.querySelectorAll” and now I’m going to write my selector in here (inside the function call like this: “document.querySelectorAll(‘img’)”). So right now my selector is “img.” I know that one’s wrong, but let’s just use this to see how this technique works. That gives me a node list. If I expand that node list, I can hover over these and I can see that, OK, this selector selects six elements. As I hover over them (in the console) it highlights them (on the rendered page), so I know exactly which elements are going to get this style applied if I use that selector. That’s definitely not the one we want.
So what if I used “section,” because I know the image I want to target is inside a section? So what if I use that to define it or to zero in on it? Well, now I still have five images. I know that’s not right because I only want to apply to one. So the problem is that these gallery images are also inside the section, so they would also be affected by that selector.
So I need something else, and there are a few different ways you could solve this depending on what you actually want to achieve, which elements should be styled this way. You might say that only the first element on the page is going to be styled this way. Well, that’s definitely not true because the first element’s the logo. You might say only the second element or the second image on the page is going to be styled that way. You might say only the images in the first section are going to be styled that way and so that being your first section and then this being the image inside it. If you did that then you wouldn’t pick up these gallery images because they are not images inside the first section. So we’re actually going to go with that.
And that selector looks like this: “section:first-of-type” and then images descendant of that. That is what that selector targets, and this “:first-of-type” is called a pseudo-class. So this is like a class that is not a class you’ve written in your markup. This is a class that the browser knows about. Now let’s scroll down through the page and make sure that targets exactly what we want. And it looks like it does. That’s only affecting this one image and that’s that’s exactly what we want.
So again, I’m going to port this selector over to our permanent style sheet. And now I’m gonna make a few other tweaks, too, because this doesn’t look quite right. So the first thing I want to fix is there is no margin whatsoever on the right hand side of the image, and that’s not what we want. OK, that looks much nicer.
And then the second problem is I only want the text in the first section to appear to the right of this image. So what we need to do is we need to clear our floats. So what’s happening is once this gets floated out of the normal document flow, then all the elements after it will just line up directly to the right of it since its floated left. We don’t want that. We don’t want to go that far. So once we hit this next heading, we want to clear the floats. And actually let’s inspect that heading because that is where we’re going to apply our style. And I’m going to prototype the style over here (in the “Styles” pane). So that gives us an H2 selector and this one, it’s… I think it’s actually OK for it to not be very specific because I’m OK with all the H2’s clearing floats. I think that would be fine. If we write that style and then we come up with a use case later where we don’t want that. We can go back and refine the selector a little bit, but I think for now this really general H2 selector is OK.
So how do you clear a float? You use “clear” and we could just say “left” (like this: “clear: left”). Since the only thing we have floated is left, but I’m just going to say “both.” If there were something floated right, I think I would want header to clear it, too. And you can see, looks like that did what we want. So now only the paragraph text in that section with the image is lined up… is wrapped around to the right of the image.
So now again, we’ll pull this style over and make it permanent. OK, cool. We are making progress.
Now the next thing we want to do is I’m going to style this gallery. So I’m calling this “gallery,” and one nice thing about this is the section already has a class of gallery. So that’s going to make it really easy to hook in for some styling. And then inside it just has four images, and I think the way I want to lay this out is I want like a two by two grid. So two images on top, two images below. Let’s start figuring out how to do that.
The first thing I need to do is these are already lining up next to each other. So that’s good. That’s what I want. The only problem is they’re lining up just as many as as we can fit, which is fine. I just need to make sure that we can only fit two since that’s all I want. And to do that. I can just set the image widths to 50%. At that point, we won’t be able to get any more than two on a line. So let’s inspect one of these images and we’ll prototype a style.
We know this selector is not specific enough, but we also know we have a class we can hook into. So we want this style to affect any image descendant of the gallery… of an element with the “gallery” class (like this: “.gallery img”). And let’s just go with “width: 50%.” OK, that didn’t do exactly what we expected. Let’s see if we can figure out why.
It looks like the element is the right size. I’m gonna cheat a little bit here and say that there’s actually not a really good way to figure this out with dev tools. So the reason this is happening is because images are displayed as inline elements, which means they behave like text.
So if you put a bunch of images together, one on each line, let’s look at our HTML. So here’s the gallery. These images are one per line (in the markup), and that’s actually the problem. So the problem is, whenever you have white space in between images that are displayed inline, It creates an actual space. These images are behaving just like text. So this carriage return between… from one to the other is creating a literal space between them that we can’t… we can’t easily affect.
The easiest way to get rid of it is just to take the new lines out. That makes the markup a little bit uglier, but it is achieving exactly what we want and that’s putting the images side by side. And we’re still three wide because when we made a change it refreshed the CodePen and so our styles we typed in over here in… in dev tools are gone. So let’s prototype those one more time. So we want gallery images and we want the width 50%. OK, that is more like what I want. So I’m going to grab this and pull it over to our style sheet, and lock it in there.
OK, one more thing that brings up an interesting point is there is a horizontal line between the rows, and I don’t think I really want that either and that’s another side effect of the fact that these images are “display: inline.” So the “line-height” of the containing element is being applied when there’s a line break. So the images are wrapping just like text would if you had too much text to fit on the horizontal width. The text wraps down to the next line, and there is a space between those that’s based on the “line-height.”
So what we need to do is we just need to get rid of that line height, make the line height “0” so that there is no space between the inline elements. But we want to be really careful with this because, if we do this to any of our text areas, it’s going to be unreadable. So we just want to do it to these images. We don’t want to do it to the images themselves because line-height is applied to containers. The images don’t contain any inline elements. So putting a line height on them wouldn’t do anything. The line height needs to go on the gallery and we’ll just… we’ll just write it straight into here since we already know the selector. “line-height” is “0” and you can see that space popped out. So now we’re good. We’ve got a nice gallery layout.
OK, so the last thing we want to look at is the footer. This particular page has a bunch of footer links. And I think what I want to do is lay those out in three columns going across the footer, and I’m going to use Flexbox for that just because it is a really simple way to do layouts on one dimension. CSS Grid is a new technology that’s great for two-dimensional layouts, but Flexbox, really nice for one-dimensional layouts.
And let’s go down and find these elements. I’m just going to go ahead and inspect to get to them. OK,so each one of these is a section inside the footer., and we want all the sections to go across horizontally. So… and we’re gonna assume that nothing else is going to be in this footer area. It’s just going to be these three sections with the lists of links. So that will allow us to just apply Flexbox to the whole footer. And Flexbox is a display property, to start. So let’s do “footer” and “display: flex.” And wow, you can see we’re almost there. We’ve already got the three columns just with the default Flexbox styles.
So now what I’m going to do… the other thing I’d like to do is I’d like these to be centered. So let’s figure out how to do that and the one caveat to flexbox is, for me at least, I can never remember what the properties are, and I always end up here at this CSS-Tricks page. And I’ll link this on the video’s page as well. So I’m gonna just scroll down through here. These are nicely Illustrated, gives you each property. So this is the container and these are the items. We don’t really care about doing specific things with the items. We want the… to change the container so that it shifts where all the items are laid out inside the container. If you wanted to do things with individual items then you would look at the item properties, and those would get applied to the children of the footer which are the items inside the flexbox. But here we’re just going to look at the container.
No, not so far. OK. Here we go. So this is what I want. This is apparently the default for Flexbox, “flex-start,” the default property for the “justify-content…” or the default value rather for the “justify-content” property. So that’s what we have now there at the start of the flexbox, which, by the way, covers the entire width of the page. The footer is the box.
So what we want is we want this… we want to justify the content centered so that all of the three columns are in the center of the page. So let’s just add that to our container’s properties: “justify-content: center.” All right, that’s it. So yeah. Well, that’s it for the layout at least. There are a couple of other tweaks we want to make.
The first thing — we mentioned this earlier — we don’t want these bullets (on the footer links). So, how are we going to get rid of those bullets? Let’s look at what we did before. We did this “nav ul.” Now one thing we did here that we can go back and refactor now if we want… well wait. The simplest way to do this would be, we could just use this same style, and we could apply that to all of our “footer ul”s. So that’s going to get the job done.
This is not very D.R.Y. “D.R.Y.” is “don’t repeat yourself.” So what we’ve done is we’ve repeated this style, and we don’t really need to because what if someday we decide we want all these lists to have bullets. Then we’re gonna have to go back and change it in both places, and that’s not a big deal when you have two things, but when you have 10 things or 100 things, then it becomes a problem. So as much as we can we want to not repeat ourselves, and we can get there with a little bit of refactoring.
So what I’m going to do is I’m going to break this out of here. Instead of “nav ul,” I’m going to apply this to two different elements: I’m going to apply it to “nav ul” and to “footer ul.” OK, so what the comma does is that will apply the styles inside this block to both of these selectors (like this: “nav ul, footer ul”). So the selectors are unordered lists inside the “nav” element and unordered lists inside the “footer” element. Both of those… any element that’s described by either of those selectors will get this style. So if we scroll and look, OK, navigation menu still good and footer is still good.
So I like that and now we want to… we probably want to recolor these (footer) links because the contrast is not great here. It’s pretty tough to read and I only want to do this to links inside the footer. So I’m going to do “footer a,” “color” and usually the stuff in the footer is kind of the de-emphasized so I don’t want it as bright maybe as the navigation. So I’m going to go with “light-gray” for the color (like this: “color: light-gray”).
OK, so that’s readable but it’s not quite as not quite as bright as the navigation links. And I also don’t really want the underlines, so we’ll take those out. And that’s another thing that we could refactor if we wanted.
We’ve got another set of links here that we don’t want underlines on. We could refactor that if we wanted, but I’m not too worried about it now and we could potentially want those those two (different sets of links) to split at some point, to fork. So we might want underlines in the footer, might not want them in the head… the navigation. So we’ll just keep them separate for now. Now let’s break this out and take a look at our newly styled page.
Looks pretty good. So our page is looking a lot better, but more importantly than that really is that we’ve learned how to create selectors that are specific enough but not too specific. And we’ve learned how to sort of — using dev tools — decide what’s the best selector for a given element, so we don’t really have to guess as much anymore and it may be… hopefully it doesn’t seem as magical.
Thanks everybody for checking out this video. If you have any questions, feel free to post those in the comments below. I’ll try to take a look at them and answer them if I can. If you are trying to transition to a career in web development, or if you’re just trying to learn web development to work on your own personal projects go to RadDevon.com. I’ve got a lot of resources there that would be helpful to you. Some of its technical stuff kind of like this video, and then some of it is more softer skills like how to start getting jobs in web development if you’re new. Thanks again, and I’ll see you in the next video.