Let's look at how CSS can help us make our HTML more manageable. So let's take a specific example of what that actually means. Last week, you took all those boxes, those dibs and you rounded their corners. They were four, but what if there were 400 or 4,000? It would take forever and it will be so error-prone. What if you decided you want to change it back? It would just literally be horrible. So I'm going to show you how to use CSS to centralize that styling. This is a central feature of HTML that is going to be useful to you. Why? We'll be pretty obvious right away. So I'm going to pop down to Exhibit E, that talks about CSS and how to use it. Now, just like the last week, there is also some written tutorials here in the Codecademy tutorial. If you find that those are working better for you, and that me going and showing this stuff is not working as well, feel free to skip the rest of this video, pop down and have a look at those, and dive into the case and have some fun. All right. So with that said, here's our first entry that we're going to look at. It's for this catalog-part. I'm going to go look at it in a live case. I'll go over here to see. Now, the CSS is filled out, and by the way, the first thing I want to point out is, if we go down and look at these catalog-part divs, they are so much delightfully shorter. We just have the div, this reference to a class called catalog-part, and then the div closes here with the image inside of it. So just a lot less raw stuff for us to have to deal with and look at. I'm going to use the search, which is probably a good habit to get into, and I'm going to look for catalog-part over in the CSS. Here it is. Now, this is the entry that's now putting the styling on the individual divs that are of class catalog-part. This dot here means in CSS, this is a class called catalog-part. As you saw over in the HTML, these various div they are given the class catalog-part in the div when it's declared. So we said div class equals "catalog-part." That's what ties this together. The browser pulls on all these files and loops through them. It's going to say, "okay, here's some HTML with a class called catalog-part. Is there corresponding entry in the CSS? If so, I'm going to go and apply all that styling." Let me prove to you that that's really happening. So if we go and make this a little bigger, let's say we change the border width to 10 pixels, and we click "Run." Well, those borders get pretty big. Likewise, let's say we change one of these to catalog-dart. All of a sudden now, this element is not getting that styling anymore because, it's an entry of cat class equals catalog-part, and this corresponding CSS entry that's creating this linkage. That's essentially a lot of what debugging in CSS actually is. Is going through and making sure that you're tying the CSS entry that you want, and you give it at the right properties, and you've tied it to the HTML element in the right way. Let's see, I'm going to go back and fix this thing that I goofed up, nope it should be part I believe. Right? So if I click this, and I click "Run," these all look okay. All right. All our linkages are working, everything looks good. Terrific. Now, what are the other types of entries that you can create in CSS? This one has a hash. This isn't something you put on Twitter, it's not a hashtag nav-bar, or it is. But that's not what it means here. This is an ID. So if we go up here, we do a search for nav-bar, we can see there is a div that in fact has the ID nav-bar. So hash means ID, and the significance of these different types of CSS entries and these different linkages over the HTML is actually relatively systematic. I'm going to go back over here, and there's a list. There are a few different ways to tie CSS to HTML, but these are the most common. You can have an element or tag like paragraph that ties for instance, the font-family Arial, to all elements of type P, your paragraph. You could do the same thing for the divs. You can have a class or ID, which we saw two examples of just now. The key thing to keep in mind is that, these have increasing precedence. So if we have three entries that conflict, one is that all div let's say. One is a class of divs. One is a particular ID for a particular div. It's that last entry that will have precedence over the other. So the most specific entry always has precedence. That's important to keep in mind as you're debugging, and also as you're thinking about how you're going to take a given set of style attributes that you want to apply to an element, and how do you do it? Do you use an ID? Do you use a class? Make a good decision and just be ready to refactor. It's probably the best answer. The other thing that I wanted to show you. So I think that this will give you enough to go in, and tackle these questions for the case. So how do you round the corners this time using a CSS? How do you tackle these various items in Exhibit C? I'm looking at the style guide in Exhibit D, and then basically whatever else you want to try out, go ahead. The last thing I want to show you is a very powerful tool that we'll be using a lot. This is just an introduction. If you don't find you want to use this and to get into it, don't worry about it. But, take one of these element and we click, "Inspect" in Chrome, you must be using Google Chrome. Other browsers, I think have their own debug environments. But for consistency, I'm going to use Chrome. Then this lets us go in, and look at our HTML. So you can see this panel here, is showing us the item that we're looking at over here. What's cool is that it shows us the attributes that this thing actually has. If we have conflicts like what I mentioned earlier, we can actually see where it's getting these things from. So it's saying it's getting this RGB from this class catalog-part. I can even click here, and see the corresponding CSS entry. The last thing I wanted to mention is this idea of the box model. So every element, it has a certain size, which you can see here in the center of the box model. The next item out is padding, which is an attribute you can add with CSS. So padding let's elements have a little bit of breathing room. Try it out and see how it works. Beyond padding, outside of the padding in the box model, we have a border outside of that, beyond the border, we can have a margin. Those are things that can have styling or be used to create negative space, whitespace between items. So if you find items are scrunched together, the margin, the border, and the padding are things that you may want to play with, and those are all part of the box model. In closing, there are a couple of readings back down in Appendix E here that I'm going to show you. There is a CSS introduction. This is a written tutorial from the W3C schools. This one here, Learn CSS is one of these tutorials from Codecademy that's more structured. As you can see, this is a really big one, and I would not do this whole thing. What I would do is, if we pop in for a second, I would just do this module, Intro to CSS at a maximum. I would probably just go down to this item that says classes and IDs. I think that you'll find that that's enough to go to the case and get started with it. All right. So good luck and I hope you enjoy seeing how cool CSS is, and how useful it is for cleaning up your HTML.
