Introduction to Web Development CSS Resets and the Developer Tools

[00:00:00]
>> [MUSIC]

[00:00:03]
>> Speaker 1: The other question was on resets, on why it's useful or not?
>> Brian Holt: So, there's such a thing as CSS reset. It's just a little tiny, in fact, let's just go find it. I like meyerweb.css.reset. This is just a really smart guy. Don't quote me on it, I believe he is a Mozilla employee, Eric Meyer.

[00:00:37] He just gives you like this really general CSS style sheet that takes all of those default stylings, you know how the, sorry I lost my train of thought. You know how the headers are bold and different sizes and stuff like that? It takes all of that default styling and just does away with them.

[00:00:58] And so, everything just starts from a very normal, very same place. Why is that useful? Because different browsers have different default styles which is really frustrating. Something you're gonna find out if you go further in front-end development is supporting different browsers is hard because they all do things differently.

[00:01:16] So what this does is it gets all the browsers on equal footing. Now what do I recommend about it? I recommend using them. You should use something like this. In fact, I recommend this very one. But no, seriously, margin 0, padding 0, border 0, font size 100%, font inherit, vertical-align baseline.

[00:01:35] Just very sane defaults that kind of bring all of the browsers onto a level playing field. So, just search for Meyer web CSS reset and you'll find it. Or, you could even search for CSS reset and I think it's still the top result. That's the CSS reset, it's just like a little tiny stylesheet.

[00:01:58]
>> Speaker 3: I use normalize.
>> Brian Holt: Normalize works really well. Yeah, all of them work. They're all pretty similar, too. Cool, and then we asked a little bit about the developer tools. Let's just check it out for a second. So again, Inspect Element, right? So, I have also no class right here.

[00:02:26] See that it's background color's cyan, border red. So, you can kind of see the cascade effect here, right? Because it says parent-div, div and then this one shows up. And if you scroll down, this one is still trying to enforce it's background color, but it's being outspecified by this one, so it gets crossed out.

[00:02:45] So like if I undo this one, if I uncheck it, now it's gonna be back to orange, right? That kind of makes sense what's going on there? Keep in mind that as soon as I refresh the page, everything that I do in this inspector goes away. Or another interesting thing if I look here at this two ids plus classes and I Inspect Element here.

[00:03:10] Notice that it says element.style, that's the elements own style. So, I did the inline style, that's what this element.style is. It's pink, again, if I get rid of that, it goes back to purple, what the ID was styled on. Good question.
>> Speaker 1: I think, explain how you could get the boxes to line up using float, I believe, and vertical align, if you can explain that.

[00:03:37]
>> Brian Holt: Vertical align is another tough one. We'll talk about floats here in just a sec. So I have this two classes right here, right? But notice it's left-aligned. So if I go down here to the div one, right here. So this is the one that's div, right? And I add a new thing that says text-align: center, notice how all text now is centered in all of these, right?

[00:04:07] Now the next question you might ask is, how do I vertically align this? Vertical aligning is tough because there's five different ways to do it and there's no one way to do it. It really depends on what you're doing, where. There is a property that's called vertical-align. I'll put it in here, vertical-align: middle; is what you'd put, but notice it has absolutely no effect.

[00:04:40] Why does it not work? It only works on tables, so it has to be like, it has to be put into a table, and then have the table display in the middle. It's a total mess, I would recommend probably never doing it that way. There is a lot of like, hacks to it.

[00:05:00] Like making the line height equal, like there's a thousand ways to kind of hack it together. I'm not gonna go into them, because they are really hacky and difficult to kind of wrap your mind around. So, I would say there are lots of resources on Google, such as Google that when you need to cross that bridge but it's a huge pain the ass.

[00:05:23] And, I'll give you the reason, the reason is that, document flow. The document's trying to fit as much as they can on one line, so it's for the most part agnostic. for how tall things are, and it's really worried about how wide things are. So everything's in terms of how wide it is.

[00:05:43] And so because of that, when it creates a div, it does not necessarily know how tall it's going to be when it first creates it, because what happens is that it goes through and has to render everything inside of it. And it will then have to go back out and center everything on the way back out which is not really performant.

[00:06:04] Anyway, the tldr, the summary of that is that browsers try to be agnostic to the height, and they just worry mostly about the width.