So welcome back. Now we're going to take a look at some more examples. The one thing we're not going to look at is exactly how this navigation bar works, at least until a little bit later. So the next thing we're going to take a look at is how fonts work. And there's a couple of ways that you can put fonts into a file. There are default fonts that every browser is required to produce, like Serif, Sans-Serif, Monospace, Cursive, and Fantasy. So you don't exactly know what's going on, but they're often used as fallback fonts. And so you can have those. Any font that is on the system, like Arial or Helvetica, and so if you're going to use Arial, not all systems have Arial, although most of them do these days, and you have to have more than one font. Now another thing that's really common these days is to include a font somehow. You find out about a font and here's a Lato font, and you look it up on the web and you find, "Oh, include this." And so I included this link because I found this really cool font Lato, and this extends the browser. The browser then learns about this font, it downloads the font, caches them and keeps them in the browser, and then I can make a font that's Lato. But just in case I'm off the Internet and I can't download this thing, I have sans-serif as a fallback for Lato. So Lato is a fancy font, etc., etc. So there's Arial and built-in fonts, etc., etc. And so that's how fonts work. Colors, there's a lot of cool stuff about colors. There's a couple of different things, we'll ignore the nav for the moment. I'm just using span tags here. There's some default colors in the earliest of browsers. These days we have all these fancy ones and you can go look these up and just Google for HTML colors. And there's a bunch of names and then they're consistent across browsers, but there's like 12 or so really solid names that are in all browsers since the beginning of time, but more modern browsers have a better palette of colors, although really good graphic artists want to have much better control of colors. The pound sign says that this is a hexadecimal number and it's got two digits. Hex means they go all the way up to F. So F as in A through F are numbers, 8B is the red level, 45 is the green level, and 13 is the blue level. And so this is a brownish color. And then there's what's called web-safe colors where you just have this ends up being 884411, but it sort of reduces the number of potential colors if you were mixing colors from various sources. And then in HTML5 you can see this color picker when you have a form, which we'll talk about in a bit. It's a color form for modern browsers. And then you can pop up with this button a color picker and I've got a little thing to print out what the color would be. And so when I pick the green, it basically puts 00ff00, that's red, green, and blue. It puts that into this thing which then the program could read this, or JavaScript could read it, or a server code could read it. But right now we're just kind of playing with the picker and we pick a different color. And so that magenta is all the red, none of the green, and all of the blue, and orange is all the red, some of the green, and none of the blue. So those are all just really strong colors. And so that's what's called an HTML color picker. Anchor tags. In the old days, anchor tags were kind of funky. They were blue if you hadn't yet visited them and they were purple if you had visited them. So this one I've obviously clicked on. And so we have a whole series of styling mechanisms that we can have. If we take a look at these, I have put these all inside of an id tag of cool. So this is basically saying, "Find the id tag of cool and then style anchor tags to make them a font-weight bold." So let's take a look here. So I got one paragraph that has this one here, and then I have a paragraph with an id tag of cool, and that's basically so I don't have to style. Usually you wouldn't say I'm only styling the anchor tags inside a tag that has an id of cool, but that way I can have the default on this one, that was my way of keeping the default. So normally you would just say, a links is red, if it's visited, it's orange, and so this one's been visited, so you don't see the red, it means it's unvisited. Hover you can change it. So you notice when I hover in the text-decoration goes away, the underscore goes away, and I have a text font color of white, and a background color of navy. Can I click on this one? There's one last moment that's really hard to catch, and that is the moment of active if the web was slow and you clicked on it, then it would tell the user. In the old days, this made more sense that it would turn red and then blink away, I don't know if we'll even see it. It kind of saw it. You sort of saw it. So there was a color while you click on it. Yeah, there it was. You might not see it in the screen, but that's what the active means is you've clicked on it but it hasn't yet been retrieved. And then like a moment later, the whole page goes away. Another thing we can do is we can play with images, okay? And so here is an image. One of the things that's really fun to do with images is float them to the right or float them to left. And then what happens is that the text is drawn around the image, so it wraps around the image. You'll notice where I floated this left, though I kind of got rid of everything, I floated it left before the h1. So what happens is the top of the h1 and the top of the image line up, and then all the text afterwards wraps around it. And so you'll notice that I've got the image first and then the h1 second, but the float sort of disconnects the image from the normal line of flow, floats it over, and then takes this next thing and the next paragraph and saves the space for the image and shoves everything, shoves the margin over so that it comes over here. Now once you start floating images, you've got to learn about this clear equals all. Because if we want this next paragraph, like this one, we don't want this paragraph for whatever reason, to be on the image. Now, if it goes far enough, you see this paragraph here moves back to the left margin, and then this next one starts there. But if the browser is wider and the text is there's not so much text, we don't want this to be up in here. And so you say br clear equals all. So between this paragraph and this paragraph, we do br clear equals all. You can put images right in the middle of a text like a character, you don't have to have them by themselves, and you can even make an image that's a clickable link, and so you can click on that image. Now, C in the CSS stands for cascading style sheets. So the idea is that the tag that's closest has more precedence than a further away tag, unless you say important, okay? So here we have some style. Here we have a body tag, a border style of dotted red, a border color that's red and important, and a border width that's five pixels. Background color, which is kind of a grayish, that's that gray. And an extra padding, so we've got to put some extra padding all the way around it, and extra margin. So if we take a look at this, we take a look at this paragraph right here, we see some things, and we take a look at what we've got. So we've inherited this, we've got a border style, a color. It wants to have a border color of green, but it doesn't because it says the border style is solid. So the border style of solid is down here in this second style tag. So the second style tag has precedence because it's closer to the paragraph. And so we tried to say border color green, but that one was overridden. So otherwise, this would have a solid green border, except that this red important is up there, and so the red important wins. And you can see it really easily here that this one was overridden and this border color from the previous one is taking precedence, okay? And so this is the second one, and it would normally take precedence over this one, except that this important is sort of like it is overriding the one that's closer. So another example of closer is the style tag, okay? And so here we go. We're putting this, I mean style attribute. We're saying border style equals dashed, border color equals blue. And so the border style equals dashed holds on, but our attempt to make the border color blue is overridden again by the red important, right? So important is up above that, okay? And so this dashed is winning and this blue is not winning because there is an overriding red important above it. And so if you want to override an important tag, we override an important tag right here, we basically say, I want a border style dashed. Come over here, border style dashed, and I want the border color to be blue and this is important. So now this one's closer and it says important. So among all the important ones, the closest important one wins. So now we see that the border color actually takes here, and we're overriding the far away. This one here from farther away got overridden because of this one. And so you can do that. Now, in general, while I've shown you how important works, you shouldn't do too much with important because usually you're taking CSSs from other places and you're patching it, and you can end up with really inconsistent looks and feels with important. Usually, when you see important, it means kind of something's kind of wrong and you're fighting with a framework or something else. So let's take a look at some blocks. And so let's see, background-color. My h1's colored blue. And I'm going to put some padding and a margin. So div, p, and h1 sort of live in a box. So let's take a look at, say, this paragraph right here. That's probably the thing to do. This is just a plain old paragraph. Nothing special, right? There we go. That's a paragraph, right there. So let's talk about the padding and the margin, right? So working from the inside out, there is the actual text that is, and it's wrapped. If I change the width of this, this whole block changes, right? It gets taller and narrower, but at some point, the inner part, this inner part right here, is however large it becomes. And in this case, it's 318 by 38 pixels, right? And then what happens is we sort of work from the inside out. So I'll go down here and see the box model. So the inside of this, the actual text is 619 pixels by 19 pixels and then I've asked to add 10 pixels of padding, and that is between this sort of text and the border. And then the border itself has a width and I specified that border width. I said I want a five-pixel border width and so the border width takes up five pixels. And then outside of that, there is margin. And so margin is space. Notice that the padding and the text itself has the background of the block, border has its own color, and then the margin has the color of the background document, okay? So this is the margin here. It's the color of the background document, right? So content, padding, border, margin. And then but the padding inherits from the text in the box from a background, and the margin inherits from the background document. And you can have different background colors, etc., etc., etc. Oh, by the way, this is an ordered list that we've got going on right here, okay? So that's CSS boxes. We can change the size of these boxes. It's a little tricky. So here we have an auto-sizing div where we're not mentioning anything about the height. If we take a look at the box model here, we see that this one is simply the size of the text, plus the padding, plus the border, plus the margin. And that's sort of how that box gets sized. You can say that you want to set the size of the box, okay? So I'm going to set that to be three ems. Three ems is three characters. But if you look, I have too much in here. And so you'll see that even though this box is three characters tall, it's four lines and so the three would fit, but the fourth one doesn't, and so it just overflows. So three ems, it's good to set to set sizes in ems when you can because then if someone makes the screen larger, oops, I didn't mean that. This one, if someone makes this larger or smaller. Now, the problem is, well, I don't know if we'd call it a problem. But in the old days, if you set a height in pixels and you zoomed the screen, the box where you set height in ems would zoom and the one that you set in pixels wouldn't, but they decided to make zooming work. So many people made boxes in pixels that they made it so that the zooming would pretend that pixels are really ems. So it kind of converts pixels to ems, but technically, you're supposed to avoid using pixels when you really mean characters. If you want three lines, don't look at your font and say, I'll make this 40 pixels in order to do that. And again, in this box, we still have overflowing text. And so we have a couple of things we can do when we want to change the overflow. We can tell a box that we would like the overflow to make a little scrollbar. And so here's that same stuff and then you can see we've got a little tiny baby scrollbar and it didn't sort of blop out of the box, right? And even if the scroll fits, you see you get little scrollbars, but you can't scroll it because there's only one line there and it fits in the box. And then another thing that you can do is you can just say, chop it off, right? Chop it off. Now, one thing with some JavaScript, you can put a little more here and that expands the box or it pops a dialig or whatever, but we're not going to worry about that for now. For now, we're just saying overflow hidden means lay this out as much as you need and then throw this text away, it's just not there anymore. Like where did all this text go? But it doesn't show it because we told it to chop it off. Okay. So on to the next one. You can move these things around. They are messy, here we go, let's make this a little different. So by default, I'll show you the HTML in a second for this, or maybe it just do view source, let's do view source. Okay, so if you just say div, div, they just follow after each other. And I've given them a border to make them a little picture, I've given some border, some padding, and some margin just so they don't touch each other too much. So by default, blocks. So I got a little border both on all sides and a bit of space between them, and they're nice. So however big they get, this one gets bigger. And I put a width on them just so that they wouldn't move around, and that's there's a width on it, right there, 10 ems, 10 characters wide. So they just follow each other. And then you can say, okay, this block right here, this number 3 would lay out right here, but I have told the number 3 block that I want to move relative to where you would normally be 20 pixels to the left and 20 pixels down from the top. And so this block, it lays out exactly as if it belongs right here, and then we shoved it over and moved it down, and it came over top of the number 4 block. And so there you go. And so the text afterwards, this number 4 block, just comes next. And it's basically, it's as if this laid out without the position relative and then this came afterwards, but then we sort of just shifted it, and that's why this overlaps, because this corner here is where 3 would have finished with a normal layout. So you've got to be careful with relative, I mean, you don't usually want to make it so that they sort of blop on top of each other. And so now, we're in 4, and then we're going to look at 5 and 6. And so 5 is what's called fixed text, and you'll see the 5 comes right here, but because I've got this as position fixed, this is fixed relative to the window. So it's 20 pixels out from the bottom and 30 percent of the way from the left margin. So you can see that this is 30 percent off the way from the left margin, and the bottom of it is 20 pixels up from the bottom. And you'll see that that green box never moves, and that is because the fixed text is relative to the window, and that's how we actually get this little link that never goes away, and so there is a link that never goes away. Absolute text, I don't know why they call it fixed and absolute, but absolute text is a little bit different. It's relative to the parent element, and so in this div right here, the parent element is the body tag. And so when it's saying "I would like this to be 40 pixels from the top and 30 percent of the way from the left," that means it's relative to the body tag. And so the body tag starts up here, and so this has been sized 30 percent from there and, whatever, 40 pixels down. And notice that that one goes with the scrolling, right? So that one goes with the scrolling. And you'll also notice that between 4, 5, and 6, it's as if there's nothing here, but if you look at the document, 5 and 6 are sitting there, and that's because they are plucked out of the normal rendering stream, and so they don't take up any space between 4 and 7. So they don't count in sort of the normal layout as the page is being laid out. And so here's number 7, for example. Well, actually, number 8. So here's number 8. So this is positioned relative with a left of negative 1,000 pixels. And so in a sense, this stuff right here has been shoved off the screen to the left, and so that's how we often will put text on that nobody sees, just move it to the left. But it takes up the vertical space anyways because it was just relative. It would have normally laid out here, but the left shoved it over there. And so that's basically some layout. And so now, we're going to talk about z-index. Let's take a look at the source code here. And so a z-index is the ability to what happens when things overlap, okay? And so this is a div, number 1 has a z-index of 100 and number 2 has a z-index of negative 100, zero is sort of the background document. And it works out pretty straightforward, and I'm just moving these so they have to lay on top of each other. And so you see this one here is negative 100, so it's kind of behind everything. This one is positive 100, so it's in front of everything. And this number 3 is I just put that there to be in the original document with no z-index whatsoever. So it's behind this thing that has a z-index of 100, okay? And so that's z-index. like this little note way over here by the right margin says, z-index is kind of tricky. Everyone tries to be on top and you'll put z-index of 100 and then you'll find that the navigation put itself as z-index of 1,000 or something like that, right? And so z-index is hard to debug and hard to fiddle it with, but at least now you know that when things look weird and they're overlapping in weird ways, z-index is what you're taking advantage of. And so now, we'll take a look at kind of how this navigation works. And so here's a couple of things that the navigation does. The body, of course, is font-family arial, sans-serif. The navigation bar itself, I guess I'll do a view source on this so we can look at the navigation bar. The navigation bar itself, this block, it's a block tag, that has a position of light gray and I've given it a height of 3 ems, so it's like three lines. And if I zoom this page in and out, it gets bigger and smaller, I'll get back to 100 percent. It's three lines tall, and I guess I didn't need to say arial, sans-serif, I did that in case someone else wanted to change the body tag, I guess. So then I have within I want ul tags within the nav, and that's one of the nice things about this nav being its own tag. I can style just the uls inside here, okay? And so what I'm doing here is I'm saying I don't want any little circles, little dots, little bullets, I don't want any of those. I want to take away any padding that it has by default, this is one of those things that this ul inherits. Let's go down here and take a look at this, and you'll see that this ul right here. So what's happening is this is the things that I've said in my CSS, and I'm overriding some default things. It's a display block, that's okay. And so I overrode the list type style. And continuing on, the list item inside of nav, that's what it is, nav in list item, I wanted to make that. So let's inspect this guy right here. Inspect. So if you look here, oh, and I've got a class of back and so I will have this positioned absolute, which is relative to the parent right here, and I have it 20 pixels to the left of that upper left-hand corner, and so that's how this comes over here. And then I have it colored dark blue because it's a nav, an anchor tag within an li tag within a nav. That's what this is saying. Dark blue text-decoration of none, and so that's where I get this color blue and no underlines. And then this is the dot back. So I use a back class to position this right here, and then I use the forward class to position this relative on the right, 20 pixels from the right. And so that's how I make the navigation bar work. And CSS is really a lot of work, we learned a lot about CSS, and this is just a really short introduction to get you a sense of what the basic mechanics of CSS are. Thanks for watching. [MUSIC]
