Python for Entrepreneurs Transcripts
Chapter: Web design foundations
Lecture: CSS: Layout Demo
Login or
purchase this course
to watch this video and the rest of the course contents.
0:01
Here we are in PyCharm again, with our little demo app, and notice we are in the layout template here,
0:07
and we have an extremely simple set of content in our body, it's just an ordered list, with five list items, each of which is a URL.
0:15
So let's take a look at this and see how we can play with the layout to change how this stuff appears on the screen,
0:21
and just a way to have something practical we are going to create this navigational-like thing.
0:27
All right, so let's run this, see where we are starting from. All right, so you saw this picture in the introduction,
0:34
and here we just have these items, you can there is really not much going on and it's really just this ordered list, OK.
0:42
The other thing we want to observe is we want to include in this layout.css
0:45
and of course we are using our cache_id thing so we don't have to worry about that.
0:49
Right, now if we look over here, this just says: "Make the fonts big, and put no spacing or no padding in the body." So we're here in our layout page,
0:59
so what we want to do is we want to target the LIs that are in this ordered list, so let's go and work at that first.
1:06
The first thing we want to do realize that these are display block, I think they are actually something like list display or list items,
1:12
or something like that but effectively, they take up a whole screen, if I come over and I say, let's just try to highlight them for a minute,
1:21
so we say like background color is yellow, just make it something totally obvious that will stand out,
1:27
you can see they more or less take up the entire width, other than their little number there.
1:31
What we want to do is tell them: "Don't take up the whole thing, just take up as much space as you need to."
1:36
So we can come down here and say "display", this is basically the CSS command
1:40
or CSS property that we are going to focus on for this demo is the "display".
1:44
So, there is things like "block" and there is this list item which is out,
1:49
it's actually displayed right now but it's also behaving more like a block if you will. What we want to do is say look,
1:56
we'd still like to apply the box model to these list items, but we want them to flow, kind of like words in HTML do,
2:02
and the word wrap and not taking new lines on their own just sort of take however space they need.
2:06
So we can do that by just setting them to inline-block. Now if I run it, you can see OK, this looks more interesting, this looks different,
2:14
now let's go over here and let's set this to be my favorite dark color #222 and run it again, this is all right, we'd like to set the color here
2:25
and this is something that you'll see that's a little bit funky in CSS.
2:28
Sometimes you try to set the color and what these are, are actually are hyperlinks, and so I can come down here and I can say: "You know what,
2:35
I want the color of everything in there to be let's say white, OK." And nothing happens. The reason nothing happens is we are not,
2:43
the anchors actually have a stronger color setting than just the list item.
2:50
So, we want to set for all the anchors that are contained within the list item we want to set their color, so we'll set this to be color.
3:03
Now if we run it, now it's starting to get white, and notice, if we hover over it, we are still getting this little color, like,
3:10
so there is three color settings for anchors, or hyperlinks, one is the main color, the next one is what happens when you hover over it
3:19
and the third is what happens when you click it, while it's loading the next page, so these are what are called pseudo classes, or pseudo property,
3:27
so the hyperlink we come over here and we hit ":" and this really works for anything,
3:31
we could say hover and set this pseudo property because of the colon here, and here we can set it to be, let's set this to be like kind of a gray,
3:40
so let's say "aaa" to make it kind of obvious, darker when we hover, notice because we said this hover pseudo property
3:49
now we have this color is white, let's also set the text decoration to none, by default the text decoration is underlined, so now just like this,
3:59
all right, we are getting in there, we've set the display to inline-block to get this to float across the top, we've tweaked our colors a little bit,
4:05
now it turns out we are actually coloring the wrong thing, I set the color like that so you could really clearly see the list items
4:11
but the thing that we really want to set is the ordered list, I want to set its background color and if we leave these alone
4:18
it will just inherit from whatever is contained within, now I try this again, here we go, we are starting to get somewhere,
4:25
OK, it's starting to look like navigation, and let's maybe put a little bit of padding, these little box on it, let's say 5 all the way around,
4:39
and see how that looks, oops we've got to say 5 what, 5 pixels, little nice space here, maybe we want to have them a little more spread out
4:48
on the border, so we can say padding, right let's put this like 10.
4:55
Now if I refresh it, you can see there is a little more separation between each of them. Here, let me pull this up and then I'll go back
5:01
on like a quick tweak, so we don't have anything there, now if I refresh it, you can see this is how it looked before,
5:10
this is how it looks now, and all we had to do to make that happen, let's put this back for you, is basically set the display to inline-block
5:18
for the list items and then we did a little bit of work with the box model and a little bit of coloring with the pseudo properties on the links.
5:28
And notice, if I click this, it's sort of for a second, here it's been visited, we can go change this again, and we can change all
5:40
this like so, we don't want to do it here, sorry, we can do it up here, we can say we have this, we can come over and say "visited"
5:48
and we can also hit the other state that we might have for this which would be "active". Maybe we could even, maybe we'll do something different
5:59
for "active", so you can see it more clear, make this yellow, OK, so if I click this you can see I probably stop for just a second,
6:12
you can see the yellow, so that's the "active". All right, so from this, to that, change a few layout properties and change of the colors, pretty nice.