Bill Rosener: Hello, Dr. Bell, welcome back in this video we'll be learning more about cascading style sheets as we format something for table layout. Let's go and start by taking a look at the before and the after. Here's before we've got some hyperlinks.
Bill Rosener: and they're just going. I don't even really care this really going nowhere. And then here is the after and a couple of things here. We're gonna alternate in this case, maybe pink and blue. And then the Hoover. I've got that to green. So when my mouse, wherever my mouse is on, that's gonna be set to green, okay, now that we know what we want to do. Let's get started here. So probably easiest way to do this would go to the assignment. 12. Press on the assignment, 12 folder.
Bill Rosener: go ahead and press on Css table layout before go ahead. And just simply right. Click. Here.
Bill Rosener: I'm in Google Chrome, and this may vary from one browser to next view page source.
Bill Rosener: And then here it is. We're just gonna grab this code.
Bill Rosener: copy it.
Bill Rosener: I'm not gonna go to a visual studio code. I'm gonna come up here to file new file. I'm gonna call this one
Bill Rosener: assignment 12 dot HTML,
Bill Rosener: and I'll create the file.
Bill Rosener: Now I'm gonna go ahead and maybe I'll enter a few blank lines and paste.
Bill Rosener: So the probably the very 1st step we're gonna do is begin working on the style we're gonna be specifying a layout. Then we'll be saying every other color is like maybe a light blue or light pink, and then the Hoover color. So at the very top. I'm gonna stop a style
Bill Rosener: hand.
Bill Rosener: Then I'm gonna go ahead and 1st of all, we'll start with the body
Bill Rosener: and we'll add maybe a font family.
Bill Rosener: and once you ever get to the point where you've identified, you can just press the tab key
Bill Rosener: and this, but maybe I'll you can specify whatever font you want. I'm gonna go with Brandon.
Bill Rosener: And actually, what it's gonna do is it's gonna but press the tab there. It's 1st of all gonna try and display this font, then this font, then this font. And if these fonts are not available, it's just gonna go with Singh and Sharif.
Bill Rosener: and then I'm gonna go with a font size.
Bill Rosener: and you can specify pixels.
Bill Rosener: But a lot of times they recommend using em, and that's going to be the height of a capital
Bill Rosener: M,
Bill Rosener: for example, right there.
Bill Rosener: Okay? And then maybe I tell you what, let me also go ahead. And so the body is gonna be a certain file size. And then I'm gonna go ahead and say.
Bill Rosener: anchor tags
Bill Rosener: or none.
Bill Rosener: Okay, I'll tell you. Well, let's go ahead and say this, we've made that 2 changes so far, we're going to specify in the body, the whole body here, and I'll tell you what, if I want to, and let me go ahead and put a body tag here
Bill Rosener: and I'll close the body. Tag down here.
Bill Rosener: Okay.
Bill Rosener: and let me go ahead and save this.
Bill Rosener: Then I'm gonna go ahead and right click open in default browser.
Bill Rosener: And there we go. So I've increased the font size. And notice, I've also
Bill Rosener: decreased or removed the underlining.
Bill Rosener: Okay, that was by Dex decoration and the font size.
Bill Rosener: Okay, now, kind of moving on, we're gonna start working on some code to format this.
Bill Rosener: we're going to create a layout table.
Bill Rosener: And we're just going to simply display this in table format.
Bill Rosener: Okay? And now I'll just via a layout row.
Bill Rosener: and we're going to display this in table row.
Bill Rosener: And we're going to go ahead with empty cells.
Bill Rosener: I am going to show them.
Bill Rosener: Okay. So we're gonna kind of specify. 1st of all, we're gonna be current kind of this big table. Then we're gonna work on the rows which are table rows.
Bill Rosener: Okay. Now, we're gonna start working on a little code here
Bill Rosener: specifying the layout.
Bill Rosener: and we're going to put the nth
Bill Rosener: child
Bill Rosener: is even so, if it's even
Bill Rosener: put a little curly bracket here at the end.
Bill Rosener: and here are the background color.
Bill Rosener: I'm gonna go with light blue.
Bill Rosener: And then, if you want, we're gonna do, it's gonna repeat this exact same thing.
Bill Rosener: and we're going to put odd.
Bill Rosener: And I'll pick a different color. And rather than light blue. I'm gonna put a light pink and maybe at this point I've made enough changes. Let me go ahead and save this. Take a look. See what we've got here going on so far.
Bill Rosener: someone come. Actually, nothing is gonna happen yet until I get down and start working
Bill Rosener: on specifying
Bill Rosener: my information here.
Bill Rosener: So down here below, I'm gonna go ahead and create a layout table.
Bill Rosener: and maybe I'll grab that code and put it way at the end.
Bill Rosener: There we go.
Bill Rosener: Now. I'm going to come up here.
Bill Rosener: and I'm going to put a start in my table, and I'll just create a layout
Bill Rosener: row.
Bill Rosener: And here I'm just going to grab this code right here
Bill Rosener: so and grab that top line, cut it
Bill Rosener: and paste it.
Bill Rosener: At this point I can actually remove this line. Break at the end.
Bill Rosener: I'd say, well, let me do one more
Bill Rosener: layout room
Bill Rosener: and let me grab
Bill Rosener: another same.
Bill Rosener: Okay, let me go ahead and make quite a few changes. Here, let me go ahead and save this.
Bill Rosener: I'll save.
Bill Rosener: Come back to my browser and hit refresh.
Bill Rosener: Okay, so we've got the 1st 2 Alabama and Alaska.
Bill Rosener: At 1 point we need to take over. Let's go ahead and finish this, and we'll come back and add the Hoover.
Bill Rosener: So I'm just gonna continue this process
Bill Rosener: layout row. I tell you what, it might be easier for me to copy and paste. So I'm gonna go ahead and
Bill Rosener: grab some code here. I'm just gonna paste this several times.
Bill Rosener: and I probably did too many of those. But that's fine. So next I'm gonna come along and grab Arizona. Cut it
Bill Rosener: our way up to the top paste.
Bill Rosener: Repeat that for Arkansas.
Bill Rosener: Come on.
Bill Rosener: Need to remove these line breaks.
Bill Rosener: Maybe I'll remove these before I forget.
Bill Rosener: Okay, now, moving on down
Bill Rosener: Colorado, and 2 more
Bill Rosener: delete. My line breaks and delete all these extra ones which I should count in when I was copy and pasting. But
Bill Rosener: no. Well.
Bill Rosener: okay, let's go ahead and take a look at what we got so far.
Bill Rosener: File save
Bill Rosener: come back to my browser refresh, and that's looking good. So anyway, we take a look here, what did we do up here? With some we we specified, using even an odd on this child. The odd job one was light blue one was
Bill Rosener: bright pink.
Bill Rosener: Okay, one last step here is. Let's go ahead and add a
Bill Rosener: layout
Bill Rosener: row.
Bill Rosener: Seda Hoover.
Bill Rosener: and picking the color you want here.
Bill Rosener: it doesn't matter.
Bill Rosener: Coral. Okay, let's go ahead and save that.
Bill Rosener: Come back to my browser and refresh.
Bill Rosener: and let's take a look. See what happens.
Bill Rosener: And sure enough, now, as I run my mouse over top of this, it's actually changing the Hoover to coral, anyway. Hopefully, in this video, you learned that tool just come come back here one last time. So at the very top here we've got an internal style sheet.
Bill Rosener: The 1st thing we did is, we worked with the body, changing the font. And again, if I came right up here and change this to 1.5, it's gonna make this quite a bit larger, save that
Bill Rosener: and refresh oops.
Bill Rosener: Okay, made that larger.
Bill Rosener: So the 1st style sheets were working with the body, changing the font type font size. We turned off the underlining. Then we began working on the layout with an even and odd, and then following the Hoover.
Bill Rosener: and then we had to format all this information down below here. Well, hopefully, in this video, you learn a little bit more about cascade style sheets. And I'll catch the next video. Thanks a lot.