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 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 them 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 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 the Arial Font, if we can get it, Sans Serif is a fallback font. And so that this H1, this little bit right here, this H1 is being colored. Browsers have their own default so display block, font size two em which is twice as big as the rest of the font, etc, etc. This came from the browser and then this came from the style sheet. So this is cascading and the bottom ones here are, I mean, this is the most important one because this is the one we said that's closest. And that's how the cascading works. You saw that. Saw that and then the cascading is, again, we take a look at this little guy right here and so the closest one is we want a monospace font family but the body said the font family's Arial and Sans Serif but this one has been overridden. 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 in here? And we'll see, like when we're moving text around border, solid border, a red border and a five pixel border. 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. Scroll this up a bit. Margin top throws five ems of space above the text and so this is a normal paragraph. We 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 percent. So a margin before, that's one em over here, the paragraph already has an em, margin before. And then, I'll come down here. Here we've added the margin top. This margin top overrode the margin top that was part of the paragraph tag automatically. So that's the style rules. 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 the selector, body and then font family, and again, font family works. Says please give me the Arial font and if that's not available give me Sans Serif font. Curly brace, curly brace, H1 tags. We're gonna go through the whole document and paint H1 tags blue, go through the whole document, 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 gonna change our anchor tags to have green and have no text decoration because they're defaulted by, to have their default to have underscore and we're going to make the background color like gray, wide 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 done 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 now 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 style sheet and if we were to look at the style sheet dot CSS it is in the same folder rules dot 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, what we want, color blue, border style, border color, et cetera, et cetera, et cetera. And so it really is the same as what we saw- what we showed before except now that we have in, we that, we have to put this into every file and you'll see we'll put this now from now on and everyone that I'm looking at and so- but now our problem is 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- 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 those- the margin up there, you know, has, has the border but it has this one em margin and that's- that's that space that you're seeing that makes paragraphs look good. I mean that's not a bad thing. And so, if so, if you look at that we have all these, that, these colors got this strong tag, by default the thing used a Serif font. I don't like that. So let's get down to here and this, well, let's just look at it here, the span tag, inspect element, right there. Okay. So the first thing is is the span tag is an inline tag that has no styling. The problem is is before CSS, which is long time ago, all these tags had default text styling. But the span tag is an inline tag with absolutely no styling whatsoever. And then the DIV tag is a tag that- a block tag that has no styling whatsoever and it can be nested so it's kind of like a paragraph tag but with, it has no styling whatsoever and 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, to fight 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 pixels on you see the border. If you look really close you'll see that there is a blue, a 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 the div tag and span tag are just are 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. And 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 can, is unique within the document so we're going to call this div first or call this div second and this div third and they correspond to first, second, and third. Okay. And so, you know, first is a- first is monospace. What is it? First is monospace, second is green so everything that's in this block that's second has been green. And then so- but you can only have one id named first but class you can have all over the place. So we can have, we can put the more space class on a couple of different tags. So this tag is more space, all more space does is shove it in from the left and the right, margin left and margin right. So it's kind of pushes this in. And so you can put this on here. You can put it another place and so the more space pulls in something here. So here's another paragraph that's got more space. That one has more space. This one has more space. See that one. And so you can put more space on as many times as you like and then you know div third. So the hierarchical section means, in this case, this here, this one's a little bit loud as read, so where's loud at? It wasn't inspect that one. Inspect element, you know, so that's a, that, and this loud is not only read but it's also forced uppercase, text transformed to uppercase. Shouting and loud. And you can have more than one class on- on a tag and then you can be even more precise with your selection. This is basically, this says finding 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 by the end- this paragraph doesn't paired by this two paragraphs. But when you say 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're pretty and they got colors and they move around and stuff. But what we don't, 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 describe it, we use a nav tag which is a block tag that says, hey, this is our navigation, useful for screen readers, et cetera. And then we're going to say, we're going to have- we're going have two, a list of two, two links. And so that's what we're doing, unsigned list, unordered list and a list element that's just, you know, paragraph here just, just didn't include, just a anchor tag. And we're going to put a classic equals back and classic 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, 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 nav, navbar.CSS, is the HTML or the CSS that, it makes this pretty and so there's a whole bunch of stuff then we'll come back and take a look at that in a second. Okay. And so there's our style nav bar. So I'll come back in another video and pick up right here.
