5.4 Start stylin’ - Video Tutorials & Practice Problems

<v Instructor>We mentioned briefly before</v> the idea of cascading in cascading style sheets that involves having elements inherit the properties. So the properties cascade from one element to the next. In this section, we'll get into a little more detail about what that means, in particular we'll be talking about the idea of parent and child elements and specificity. So let's take a look at the diagram. This is a diagram of what's called the Document Object Model or DOM. You can see here the HTML element is the parent and the body is the child and so on down the list but there's also this idea of specificity and Lee maybe you can say a little bit about what that means. <v ->Sure, what it means is that</v> a style that's applied to something very general in the DOM like the HTML tag or the body tag, something that wraps everything else that is a very general specificity. So then as you start targeting things that are farther and farther down the DOM which you'll see in a second, how you actually target sub objects, that has a higher specificity and so that style will be preferentially applied to that element and will overwrite something that is just applied to the body. You saw this in one of the first sections when we talked about just how CSS looks and showed the font size changing based on a more specific style declaration. <v ->All right, let's take a look at a concrete example</v> of using our sample website here. So here's our Index.HTML page and one thing you might notice here is that we've got these red links and they're created, they're made red by this inline style. And we talked about this in learning of HTML to be dangerous. This is not the preferred way to do things though and if you look at this, that means this is terrible, right? You've got the same style applied three different times. This is a violation of the dry principle, which is don't repeat yourself. And Lee, you call this programmer's itch, right? You see this, you're like that can't be right. <v ->Exactly, every time that you see yourself</v> repeating something over and over, you should suddenly get this programmer's itch to fix it. <v ->Now, if you look carefully,</v> you'll see that it's not just the color red that's repeated, we've also got a repeated border on these divs here. Just giving us this black border. And we've got repeated styles here for the green links inside the divs. So let's eliminate that duplication using an inline style sheet. Is that what it's called? Inline style sheet? <v ->It's called an Internal Style Sheet.</v> <v ->Internal Style Sheet.</v> There we go. See, this is why we have Lee around 'cause I don't know this stuff as well as he does. Okay. So let's make an internal style sheet using the style tag. It traditionally goes in the head. I think technically it doesn't have to right, Lee? <v ->It can go anywhere on the page but</v> it's just best practice to stick it in the head. <v ->Okay. So let's use the style tag.</v> <v ->And the reason for is.</v> <v ->Yeah.</v> <v ->Is that if you happen to make an error</v> in this section, the head section is not shown to users. Whereas if you have your style just on the page and you make an error for some reason that affects how the page is displayed, all of that is gonna get shown to the user. <v ->Oh really? That's interesting.</v> I didn't realize, I don't think I've put it anywhere but the head, which is of course the right practice. Okay. So let's hoist up one of these rules. Let's start with the rule that styles the div border. So that's this one here and we can actually just copy the stuff inside here. Copy that and then what we're gonna do here is make a style for divs. So the way CSS works is you give it the name of the tag and then in curly braces, you can put this rule and now there's, we have this here, right? We've got an anatomy, right? <v ->Let's take a look at the diagram.</v> <v ->Let's go to the board.</v> <v ->Go to the board.</v> So, so yeah, here's, here's the. Here's the anatomy of this declaration. <v ->So the whole thing is called a Declaration</v> and note that people get a little squirrely with this and call things basically what they want. But first you have a selector, which is in our case div, then you've got the curly braces, then you've got your actual, what is actually the declaration and the declaration consists of a property which is the way of telling the browser, okay we're gonna be changing this aspect of an element. And then you have the value, which is when you're saying this is how I want that property to be. And then you end each value with or each declaration with a semicolon to say, I'm done giving styles now. <v ->Right. Now, technically</v> I think you don't need the semicolon if there's only one. <v ->That is correct.</v> <v ->One thing in here but it's,</v> it's just a good idea to put it in because that way you don't have to remember, it certainly doesn't do any harm. All right. So let's take a look at the result of that. We need to save it first. Now I'm gonna, I'm just gonna refresh, you'll see that nothing changes, which isn't surprising at all given that we actually haven't eliminated the style here. So now we're gonna get rid of it. And what we're doing here is a refactoring. This is when you change the form of the code without changing its function. In this case, the appearance should be the same. So I'm just getting rid of these. So that's what the CSS rule does. It's basically replacement for that inline style. Save it and now refresh it again. It's still the same. By the way, if you wanna check this sometimes you can just like comment it out. So your text editor typically will have a way to do this. So you can see here at this point those borders should go away. Oh, we got one that's still there. Ha! yes. So we actually caught it. You can see it's actually a good idea to double check it like this. There we go. <v ->Yeah, because of the visual nature of this,</v> CSS is not the kind of programming language where you can write a whole bunch and then just assume that everything's correct. Over time you're gonna get used to the idea of saving your document and refreshing in a browser just to see what happened. <v ->So by the way, you might notice</v> that we've taken some care to format this just the right way, but we don't have to. CSS is like HTML. It's not sensitive to white space. We could do this, same thing, but this is not good. This is the kind of thing. It becomes really hard to read really quickly. <v ->Yeah, it's fine for one.</v> But if you have a whole bunch of different CSS declarations that would be impossible to read as the example in the text shows. Gets real, real complicated, real fast. And another thing to do is when you're adding declarations, to add them alphabetically, it just helps. So if you were to add a font size to this border, it would be helpful to put it after the border instead of before it, because eventually you're gonna be going through many, many declarations and you don't wanna have to think about where to find things. <v ->I did not know about that rule before doing this tutorial.</v> That was one, one of the things that was new to me, I thought, I mean it's obviously a great idea, but I'm sure if I look over the CSS I've written in the past it just looks completely crazy to someone like you who actually knows the convention, like what is wrong with this guy? <v ->And just to show you,</v> most texts editors will make this easy to do. So if you were to put it out of alphabetical order like this, you can highlight it and then press something like F5 and it will sort it back into alphabetical order for you. <v ->That is pretty cool.</v> All right. So let's get rid of this here. And that's that border we talked about, now let's take a look at one of the other styles. We've got these, these links, we've got red links and green links. Let's start with the red links. Now inside of this style, we as the convention to alphabetize these, or is it just? <v ->No. The convention there is more to group things by</v> whether or not they're general or more specific. So when we're talking about something that's gonna affect all divs or all links the way that we currently have things, you want the more stuff at the top and then you want the more specific stuff below that. <v ->Okay. So in this case, we're going to style these links.</v> We can just, well, I can type it in. You can see the editor actually just adds the semicolon. It's nice and convenient. So we've got that there. And let's then eliminate these text are actually lets you do multiple of them, but at the same time but let's just do one at a time. And like that, refresh it should not change anything again. We're refactoring it. I do like to just double check like this. Yeah. So this is the default blue and then back to red. All right, well we've got one left though. Look at this. We've got color green, but we have a problem now, right? Because we just used this, this style for, for the A tag, for the anchor tag. So how do we style color green? <v ->And watch if we take a look at this and actually try</v> let's say add another anchor tag. <v ->Yeah. What's gonna happen here.</v> <v ->And make the color green.</v> <v ->Right?</v> <v ->What happens?</v> <v ->Yeah. So let's save that and take a look,</v> see if you can figure out, oh, they all turn green and that's part of the cascading nature, right? Because we've, I guess this is, that's actually technically part of cascading or is that... <v ->It is.</v> <v ->So things that come after</v> have higher specificity, so. <v ->Right.</v> <v ->So what happened is we interrupted the cascade</v> and reset it back to the top with green. So everything becomes green then. <v ->Yeah.</v> <v ->The way it goes is</v> just the final rule in, in the sequence. So here is color red, but then this one comes after so it overrides it. So we could see this here now we're back to where we were. So somehow we have to style just this thing in here. So, so we can get rid of this here, these, so these are over, these are even more specific, right? These are overriding the red, but if we do this and I've still got, if I've still got this commented out here. <v ->Now everything will be red.</v> <v ->Right. Now they're all red</v> because this rule for a is applying to these anchor tags. So we need some way of specifying just the anchor tags here. And now the best way to do this is a technique we'll talk about in the next section, which is to use CSS selectors. But for now, Lee what's the kind of the quick and dirty way to do this? <v ->We're gonna increase our specificity by saying,</v> okay only make links that are inside of divs green. And we do that by adding an additional selector in front of that link. <v ->Like that.</v> There we go. <v ->Right. And, and this works because the other anchors here</v> the other anchor tags, these red links here are inside of li tags, right? So they're not in particular, they're not inside of divs. So now we're saying that anchor tags inside of divs should be green with the global rule where they're red so that means that the first one should be red and the second ones or the second block should be green. Let's take a look. There we go. <v ->There we go.</v>