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