Hello and welcome to Web Applications for Everybody. We are taking a look today at Cascading Style Sheets. You can download the source code and unzip and it on your computer if you like or you can browse this code and just play with it in the browser because it's all static content, so it's just as easy to play with it in the browser. And of course, we're going to want to take a look at this in the developer console. It just makes a lot more sense to get into this and so here we go. We're taking a look at CSS. There's a couple of ways to do this. We can see here, we can see the style attribute, style color equals blue and there's all kinds of various CSS parameters, color is the parameter and blue is one of the values and you've got to look all these things up. One of the nice things that we can see is we can see over here, as we move between elements in the Document Object Model, we can see what the CSS values are and so arial, sans, like for example, this is cascading. The body on here is arial or sans-serif and that means an arial font, if we can get it, sans-serif is a fallback font. This h1, this little bit right here, this h1 is being colored. This is ours. Browsers have their own defaults, so display block, font size 2em, which is twice as big as the rest of the font, etc., etc. So this came from the browser and then this came from the stylesheet. So this is cascading and the bottom ones here, I mean, this is the most important one because it's the one we said that's closest and that's how the cascading works. Yeah, saw that. And saw that. And then the cascading is again, we take a look at this little guy here, right here, and so the closest one is we want a monospace font family. But the body said the font family is arial and sans-serif, but this one has been overridden, and we can kind of see that and that's why this particular text is monospace. Another thing we can do is we put border-style. Now, when I'm working with this stuff, I tend to remember border a lot because it's a good way for you to mark something out and say what am I doing here? And we'll see, like when we're moving text around. Border, solid border, a red border, and a five-pixel border, and so that's what we see. And you can also see that there's some extra padding around there as well or some extra margin. And margin top, that's another one. Let's scroll this up a bit. Margin top throws 5em's of space above the text and so this is a normal paragraph. We've got five extra ems. Now, what's an em? Em is the height of a character in the current font. And so em is a really convenient measure. There's ems and pixels and percents. So margin before, that's 1em over here. The paragraph already has an em, margin before and then come down to here. We've added the margin top, so this margin top overrode the margin top that was part of the paragraph tag automatically. So that's these style rules. So let's keep on going. While this is technically possible, this would really be overwhelming to put a style on every tag and so one of the things we tend to do is we want to put style rules that are generic. So we'll say we would like the body tag and this is a style rule This is a selector, body, and then font family, and again, font-family works is please give me the arial font and if that's not available, give me sans-serif font, curly brace, curly brace, h1 tags, we want to go through the whole document and paint h1 tags blue. Go through the whole document, find every paragraph tag, set the border-style to solid, border color to red, five pixels. So you see that every paragraph and we're going to change our anchor tags to have green and have no text-decoration because they're defaulted to have underscore and we're going to make the background color light gray. Why? Just so we see it. So you can see that particular thing up there. And then if you look down into the text here, we have paragraph tags and an anchor tag, and no style equals down here. So what we've done, ignore that little part there, that's what puts this little thing in the corner. So that's not what we're talking about. We put no style tags whatsoever, and we put all the style tags up here. But now we've also done something that all the paragraphs have to have the same style, which sometimes is what you want, and sometimes it's not what you want. Now what happens again now, if you have multiple pages, as we have here, it gets a little tiresome to put this text in every page. And so what's really common instead, so now we have the same basic rough paragraph stuff here, nothing in here, we have a pre tag of course. We have a paragraph tag. There's no style equals on these things, but up in the head, we have one line right here that basically says, let's take a look at this stylesheet, and if we were to look at the stylesheet.css, it is in the same folder, rules.css, it's in the same folder as that .htm file, and it's exactly the stuff we had there. It's just a set of selectors and then a select of key values we want color blue, border style, border color, etc., etc., etc. And so it really is the same as what we showed before, except now that we have to put this into every file, and you'll see we'll put this now, from now on in every one that I'm looking at. But now our problem is that we've done something with this to do all the headers, right? All h1s, all paragraphs, but we need better ways to mark text. And so we have these tags, and these tags that we use just to put handles on, and in the old days, like this paragraph tag has this border, see that has the margin up there. It has the border, but it has this 1em margin, that's that space that you're seeing that makes paragraphs look good. I mean, it's not a bad thing. And so if you look at that, we have all these colors, we've got the strong tag, by default, the thing uses a serif font, and I don't like that. So let's get down to here. Well, let's just look at it here, the span tag, inspect element, right there. Okay. So the first thing is, the span tag is an inline tag that has no styling. The problem is before CSS, which is a long time ago, all these tags had default text styling, but the span tag is an inline tag with absolutely no styling whatsoever. Then the div tag is a block tag that has no styling whatsoever, and it can be nested. So it's kind of like a paragraph tag, but it has no styling whatsoever, Now I've added a one-pixel style, and you'll see that these div tags don't have any extra space, like the paragraph tags came with space. Now, some people would go and turn off the space on a paragraph tag, and there's even CSS files that you can to take all the styling, the font styling, off tags. But you'll notice these divs don't have any space, they're really kind of a block. When I put these pixel on, you see the border, if you look really close, you'll see that there's one-pixel blue line and a one-pixel orange or sienna line right there. But the divs can be nested, and they don't themselves start. And so you'll notice that here they don't start with any kind of formatting that comes from the browser. Whereas if we look at paragraphs, there is formatting that comes from the browser. And so the div tag and span tag are just ways to put handles around blocks of text or chunks of text and then style those. But then, we still have to figure out how to style, how to grab our handles and make it so that our styling doesn't just touch one thing. So here I've got a couple of things. I've got the body tag and I'm setting font-family, you'll see me do this all the time, and now I have a pound sign and this says go find all the tags named body, this says go find all the tags with a attribute of first, id equals first, id equals second, and then class and shout. So if we take a look at the text, there is the notion of an id tag, okay? An id tag that is unique within the document. So we're going to call this div first, we're going to call this div second, and this div third, and they correspond to first, second, and third, okay? And so first is monospace, second is green. So everything that's in this block that's second has been green. But you can only have one id named first. But class you can have all over the place. We can put the morespace class on a couple of different tags. All morespace does is shove it in from the left and the right, margin left and margin right. So it kind of pushes this in, and so you can put this on here, you can put it in another place, and so the morespace pulls in something here. So here's another paragraph that's got morespace. That one has morespace, this one has morespace, see that one? And so you can put morespace on as many times as you like, and then div third. And so the hierarchical section means in this case this one's a little bit and loud is red. So where's loud at? Let's inspect that one. Inspect element. The loud is not only red, but it's also forced uppercase, text transform to uppercase. Shouting and loud, and you can have more than one class on a tag. And then you can be even more precise with your selection. Basically this says find a third id and then only paragraphs within that tag third, make their background color yellow. And so that means that background color yellow does not apply to this tag, it doesn't apply to this paragraph, it doesn't apply to this paragraph. But when you see div id third, we have selected this paragraph and this paragraph, and they have a background color of yellow. So continuing on, let's take a look at a simple navigation bar. Now there's this nav tag that's an HTML5 thing, and if you look at most navigation on pages, let's go to the next one, they are pretty, and they got colors, and they move around and stuff. But we want to be careful when we build our HTML for these kinds of things to make them very, very simple. And so what I've got is a navigation is usually we use a nav tag, which is a block tag that says, "Hey, this is our navigation." Useful for screen readers, etc. And then we're going to say we're going to have a list of two links. And so that's what we're doing. Unsigned list, unordered list, and a list element that's just no paragraph here, just just an include, just a anchor tag, and we're going to put a class equals back and class is equals forward so we can style these two things differently in the future. And so this is what this looks like with no CSS whatsoever. And so this is a nice, elegant, clear HTML. And so if you were just looking at this HTML like a screen reader might be looking at it, you can see what this really intends to mean. Now then what we do is we add a little bit of HTML to this. And so for now we're just not going to bother, But in navbar.css is the HTML or the CSS that it makes this pretty. And so there's a whole bunch of stuff and we'll come back and take a look at that in a second, okay? So there's our styled nav bar. So I'll come back in another video and pick up right here. [MUSIC]
