#100DaysOfWeb in Python Transcripts
Chapter: Days 13-16: CSS Layout and Design
Lecture: Demo: Layout

Login or purchase this course to watch this video and the rest of the course contents.
0:00 Let's look at applying this box model
0:02 and controlling the layout or display style
0:05 of a couple of elements to do something
0:07 kind of mind blowing if you haven't seen it before.
0:10 So I want to focus on the layout.html page
0:13 and it has this thing in here
0:14 so this is an ordered list
0:16 so like 1, 2, 3
0:18 and then a bunch of list items
0:20 and each list item is a hyperlink.
0:23 What I'd like to do is turn that thing into a navigational
0:26 structure stuck at the top of the page
0:29 and we're not going to touch the HTML at all
0:30 we're going to do this purely with CSS.
0:32 And then there's this page content stuff at the bottom
0:35 and that's just there to take up some space
0:37 and make it look legit.
0:39 So over here we have our page loaded up
0:41 let's click on layout.
0:43 Well, that's no surprise, right?
0:44 It's an ordered list, 1, 2, 3, four
0:46 of these items and it's kind of like a little navigation
0:49 and you can navigate around and go back home and so on.
0:52 By the way, here's a bunch of Lorem Ipsum
0:55 that's like fake text put out there
0:58 but it's Hipster Ipsum, which is kind of fun.
1:01 So we have sustainable twee slow-carb whatever iPhone
1:05 kale chips, things like that.
1:07 That's a little bit of a humor there
1:08 but the idea is we're just going to focus on this, right?
1:11 This just lives here as, theoretically
1:13 the content of the page
1:15 with some important message for everyone.
1:18 So we're probably going to do more CSS here than anywhere else.
1:21 Let's start with going over to our layout.css file
1:26 and if you look, back here you can see
1:28 at the top we're including this extra CSS file.
1:32 So it's going to apply all the styles
1:34 we put there automatically.
1:36 So I made a couple of notes
1:37 things I would like to do.
1:38 So let's actually work on this one first
1:41 I'll put it at the top.
1:42 So I would like these list items
1:43 displayed horizontally, okay?
1:47 So we look over here, they look like vertical
1:49 they have the numbers, their display style
1:52 is technically the list item
1:54 which gives them their number and so on.
1:56 So let's just go over here, and I want to say
1:58 actually, let's give this an id of a class of nav.
2:06 I'll call it custom nav.
2:08 So it doesn't clash with anything
2:09 that might be in somewhere.
2:11 So we're going to go over here and say
2:13 I would like all the things contained
2:14 within custom nav that are list items
2:18 I want them to display horizontally.
2:20 So I can say display as inline
2:23 and it can be either inline or inline block.
2:26 I want to set padding and margin and stuff like that
2:29 so we're going to go for inline block
2:30 and with that minor change, let's see what we get.
2:33 Well it kind of could be like a nav thing
2:36 up at the top, right?
2:38 Doesn't look like a nav, but it could be.
2:42 We also want to set the padding on them.
2:44 I'll stick this is here just so we remember
2:46 I won't do that just yet.
2:48 The next thing I want to do
2:51 well let's change this over here
2:52 let's put this 1 up
2:53 that's where I want to change the background
2:55 of the nav, so we could just target ol
2:59 but let's do custom nav
3:04 its background color
3:07 oh my goodness, cool thing
3:08 lets us pick all the colors that it's seen us
3:10 use elsewhere
3:12 and then also, you can come over here
3:13 and get a little wheel to change it
3:15 but we're happy with that
3:16 so let's see how that looks.
3:18 Looking pretty good, yeah, looking good.
3:20 Don't really like the color, the blue
3:22 and the fact it gets darker and get underlines
3:24 so let's keep rolling with this.
3:26 Let's make the navs, the hyperlinks bold
3:31 so that's easy.
3:32 Come down here and say I want to target
3:35 all the hyperlinks contained within the custom nav.
3:40 I want to just say font weight is bold
3:45 there we go, good and bold.
3:46 Not sure we really want it to look that way
3:48 but, oh no, sorry, this is supposed to be
3:50 within the page, so that would be
3:52 within page content.
3:56 So let's go down here and change
3:59 that to hyperlinks contained within the page
4:02 see if that worked.
4:04 So notice down here this is not bold.
4:06 We refresh. Now it is.
4:08 Okay, great. What else do we want to do?
4:10 We want the hyperlinks to have that color
4:15 the hyperlinks in the custom nav
4:21 to have the color #AAA
4:22 So color, #AAA, just like that
4:29 and it's pretty good, but if you have
4:30 visited them
4:34 but we also want to make sure if you visit them
4:37 for some reason I think it's not really recording
4:39 when we visited it
4:41 we can apply what's called a pseudostyle, I believe
4:44 come down here and say visited
4:46 so put the colon saying, not just this item
4:49 but when it has the additional property it's visited
4:52 also make it that way
4:55 and we want the items here to not have an underline.
5:00 So if you over here you can see underlines
5:02 and maybe that's good
5:03 if you want it, I decided I don't, so we want text decoration.
5:08 It's going to be n1.
5:12 Come down here now, notice you still get the pointer
5:14 but nome of those. What else do we want to do?
5:18 It says we want the hyperlinks visited
5:21 when they're actually being visited
5:23 like when you click on it, if you watch
5:26 it's kind of hard to see
5:27 maybe if I click on the layout when I can get it to work.
5:30 No, not easily. But when it gets into this active mode
5:36 we want it to have a yellow.
5:39 So let's go ahead and set that style.
5:41 I'm going to try and get it to work. So we have active as 1 of its pseudostyles
5:45 and then we just set its color
5:47 we'll just take a quick way out and say yellow.
5:51 Now, see really quickly as I click on it it's yellow?
5:54 That indicates, or it tells people
5:55 hey, you just clicked that.
5:57 Super! Are we out of items?
6:00 I think we are out of little descriptions.
6:02 We also want to give a little spacing
6:04 like it's hard to see home, CSS selector, CSS box
6:08 this is all just going together, that's not super good.
6:11 So let's set the padding to be 5 px
6:15 but the padding right to be 10 px.
6:19 Let's try that.
6:21 There we go, that looks like a navigation, doesn't it?
6:25 I really like it.
6:27 Maybe even a little more space, but it's okay.
6:29 I can see our little navigation is working quite well.
6:33 Did we touch the HTML? No, not at all.
6:36 Remember what it started out as.
6:38 Like, let's do this.
6:43 It started out looking like that, right?
6:45 It looked like just a ordered list
6:47 1, 2, 3, four.
6:48 We added, you know, pretty small amount of styles
6:51 and now we have a cool navigation right
6:53 at the top of our page.
6:55 So that's how you can control layout.
6:57 We change this from list item to inline block
7:01 to turn it into this horizontal strip
7:03 and then we set a bunch of its box properties
7:05 the padding and whatnot, to make it look good
7:08 and then did a few other cool little tricks
7:11 around pseudo classes and things
7:14 like that with the hyperlinks and so when we click
7:16 this it turns yellow.
7:17 Pretty cool huh?