Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:00,860 --> 00:00:07,640
So in the last lesson we've started this brand new project where we're going to recreate a professional
2
00:00:07,640 --> 00:00:13,940
web designer’s personal site, and we're going to make it look as beautiful if not more beautiful than
3
00:00:14,060 --> 00:00:15,380
what we see here.
4
00:00:15,590 --> 00:00:23,960
So we started off strong by adding a favicon to our web site, but our web site is right now just a blue screen
5
00:00:24,290 --> 00:00:27,640
which is not that professional and not that pretty.
6
00:00:27,650 --> 00:00:30,090
So let's go ahead and change it.
7
00:00:30,380 --> 00:00:36,380
So head over to Atom and the first thing we're going to do is we're going to get rid of that awful background
8
00:00:36,380 --> 00:00:40,570
color and I'm actually going to just delete this entire body section here.
9
00:00:40,710 --> 00:00:47,120
I'm going to begin by having no styles whatsoever and I'm going to first specify the structure of our
10
00:00:47,160 --> 00:00:47,880
web site.
11
00:00:48,110 --> 00:00:52,520
Let's start off by recreating the content of this top part.
12
00:00:52,640 --> 00:00:59,210
So there is what seems to be an h1 and something that's just a paragraph just below it and then
13
00:00:59,210 --> 00:01:02,740
there's a few images and then we go onto the next part.
14
00:01:02,840 --> 00:01:05,380
So let's do that for ours as well.
15
00:01:05,420 --> 00:01:14,420
So let's go into the body and we're going to create an h1that's going to say ‘I'm Angela’, and after that
16
00:01:14,420 --> 00:01:21,860
we're going to create a paragraph that's just going to say ‘a programmer’, and let's hit save and let's
17
00:01:21,980 --> 00:01:23,000
check it out.
18
00:01:23,930 --> 00:01:24,640
So there we go.
19
00:01:24,650 --> 00:01:26,560
Looks pretty boring, right?
20
00:01:26,660 --> 00:01:29,580
And it looks nothing like this.
21
00:01:29,600 --> 00:01:38,180
So the difference here is that you see these two parts are kind of grouped together in what might be
22
00:01:38,240 --> 00:01:39,300
a box.
23
00:01:39,500 --> 00:01:45,860
And if you look at ours, and if I turn on Pesticide, which is a really really useful tool when you're
24
00:01:45,860 --> 00:01:47,210
debugging your CSS.
25
00:01:47,540 --> 00:01:52,670
Now you don't need to download it because I'm going to show you what I'm doing but if you want to have
26
00:01:52,670 --> 00:01:58,700
it as a tool then you just head over to pesticide.io and you can download and install it on Chrome
27
00:01:58,700 --> 00:02:05,900
for free, so you can see that what it does is that it highlights all of your HTML elements and essentially
28
00:02:05,960 --> 00:02:10,110
all of the boxes that are on screen.
29
00:02:10,160 --> 00:02:16,340
So as we mentioned before essentially all that we're doing when we're using CSS is we're specifying
30
00:02:16,340 --> 00:02:24,110
the style for how each of these HTML elements should be displayed and each element is basically just
31
00:02:24,170 --> 00:02:30,050
a box, so you can see that we've got a box up here which is the h1 and a box down here which is the
32
00:02:30,050 --> 00:02:31,110
paragraph,
33
00:02:31,300 --> 00:02:34,460
and that the box that's all around them is actually the body.
34
00:02:34,670 --> 00:02:40,640
And using Pesticide you can confirm this by holding down the control button and hovering over each section
35
00:02:40,640 --> 00:02:41,840
that you're interested in.
36
00:02:41,840 --> 00:02:47,750
So if I hover over here you can see that this is showing me that it's a paragraph element and up here
37
00:02:47,750 --> 00:02:48,850
is an h1,
38
00:02:49,130 --> 00:02:52,340
and in between and all around is the body.
39
00:02:52,340 --> 00:02:53,930
And that's what the blue line is.
40
00:02:53,930 --> 00:02:55,730
So this can be quite useful.
41
00:02:55,730 --> 00:03:03,950
Now what you might realize now is that we might want to have a box that's around this heading and the
42
00:03:03,950 --> 00:03:12,710
paragraph tag that we can expand its height and also push down our text to the center of it. So we can do
43
00:03:12,710 --> 00:03:14,190
this in a number of ways.
44
00:03:14,240 --> 00:03:20,340
But the way that I'm going to talk about here is an HTML element called the div..
45
00:03:20,360 --> 00:03:29,540
So let's go back into our index.html, and I'm going to create a new element called a div and we're
46
00:03:29,540 --> 00:03:31,830
just going to ignore the class for now.
47
00:03:31,940 --> 00:03:40,130
This div is a special HTML element that allows us to divide our content up on our web site so that we
48
00:03:40,130 --> 00:03:44,120
can structure each div separately.
49
00:03:44,270 --> 00:03:47,260
Now by itself it doesn't do anything.
50
00:03:47,260 --> 00:03:54,590
So if I save this div here and I head back over to Chrome and I turn off Pesticide and refresh,
51
00:03:54,770 --> 00:03:58,350
you can see that nothing, absolutely nothing, has changed.
52
00:03:58,610 --> 00:04:03,940
And that's one of the reasons why we're talking about an HTML element inside our CSS module. And
53
00:04:03,950 --> 00:04:11,270
it's because divs amongst other things don't do anything unless you use CSS with it.
54
00:04:11,270 --> 00:04:18,590
So if we turn on Pesticide again you can see that this top part of the body has now got a little bit
55
00:04:18,800 --> 00:04:20,840
thicker of a line.
56
00:04:20,840 --> 00:04:28,460
And if you right click on it and try to inspect it then we can select that div over here inside the
57
00:04:28,460 --> 00:04:29,690
Elements tab.
58
00:04:29,900 --> 00:04:37,970
And if you scroll this graphic up you can see that it's showing you that it has a width of 1424 pixels
59
00:04:38,420 --> 00:04:43,530
and a height of zero pixels which is why we can't see anything.
60
00:04:43,550 --> 00:04:49,010
It's something that's 0 pixels high even though it has a width so it doesn't appear.
61
00:04:49,340 --> 00:04:52,530
Now what you see up here where it says the outline.
62
00:04:52,580 --> 00:04:58,580
Now this comes from Pesticide and that's trying to show you where that div exists even though it has
63
00:04:58,580 --> 00:05:00,010
no dimensions.
64
00:05:00,440 --> 00:05:02,720
Now if we turn it off then that goes away.
65
00:05:02,720 --> 00:05:05,060
And this is what our code actually looks like.
66
00:05:05,060 --> 00:05:12,920
So in order for that div to have a function or in order to do anything we have to use CSS. So let's
67
00:05:12,920 --> 00:05:21,050
select that div inside Chrome Developer Tools, and let's specify some CSS for it inside our Developer
68
00:05:21,050 --> 00:05:21,830
Tools.
69
00:05:21,830 --> 00:05:28,050
So remember anything that we specify here doesn't get saved and it's only purpose is for us to experiment
70
00:05:28,160 --> 00:05:29,790
and see it live immediately.
71
00:05:29,990 --> 00:05:34,870
So let's give it a background color of blue,
72
00:05:35,060 --> 00:05:36,060
my favourite color.
73
00:05:36,470 --> 00:05:38,650
And you can see nothing has changed.
74
00:05:38,780 --> 00:05:46,940
But if I give it a height of say 100 pixels then immediately you can see it now appears.
75
00:05:46,940 --> 00:05:48,980
And here is our div.
76
00:05:49,040 --> 00:05:50,690
This is where it is.
77
00:05:51,010 --> 00:05:54,330
And if you hover over it that's what's going to be highlighted.
78
00:05:54,410 --> 00:06:00,590
And if I turn on Pesticide again you can see now if I hold on control and hover over you can see that
79
00:06:00,590 --> 00:06:06,260
if I turn on control and hover over this section it's showing you this is the div, this is the h1 and
80
00:06:06,260 --> 00:06:12,590
this is the p. So the div is only there for you to structure and divide up your content.
81
00:06:12,590 --> 00:06:20,450
So if we wanted our div to perform a similar function to what we've got up here which is the top part
82
00:06:20,450 --> 00:06:27,890
of the content, where he's grouped together a title, a subtitle and an image, then we can do that using
83
00:06:27,890 --> 00:06:29,260
a div.
84
00:06:29,330 --> 00:06:34,460
Now remember what I said before about how the changes that you implement in the Chrome Developer Tools
85
00:06:34,670 --> 00:06:36,730
don't persist in your code.
86
00:06:36,800 --> 00:06:41,030
So if you check back in Atom you won't see any extra code being added.
87
00:06:41,240 --> 00:06:47,100
And if you refresh this site then all of those things that you entered inside here will disappear.
88
00:06:47,210 --> 00:06:50,140
So that's just for testing basically.
89
00:06:50,150 --> 00:06:54,550
So let's head back to Atom and let's do something with this div.
90
00:06:54,800 --> 00:07:02,990
So essentially a div stands for a content division element and it basically allows you to split up or
91
00:07:02,990 --> 00:07:09,430
divide your content into separate containers or boxes so that you can affect the layout of each box
92
00:07:09,520 --> 00:07:15,700
separately, so that you can say that maybe these two things should be grouped together, and I'm going
93
00:07:15,700 --> 00:07:24,280
to structure it and style it separately from other content in my web site. So divs, as we saw before,
94
00:07:24,280 --> 00:07:32,800
can have a height if you specified it using the styles but you'll also have a height if it has content.
95
00:07:32,800 --> 00:07:41,230
So if we go ahead and move our heading and our paragraph inside our div here and hit save,
96
00:07:41,560 --> 00:07:49,050
then you'll see that if we bring up the Chrome Developer Tools again that this div now has a height
97
00:07:49,150 --> 00:07:56,730
has a height of seventy six point something pixels and that's just enough to fit all the content that's
98
00:07:56,730 --> 00:08:00,050
inside, which is the h1 and the paragraph.
99
00:08:00,060 --> 00:08:04,280
Now let's give it a permanent background color so that we can see it more easily.
100
00:08:04,470 --> 00:08:07,980
And to do that we have to go into our stylesheet.
101
00:08:07,980 --> 00:08:15,300
But before we do that let's go to Color Hunt and find a good color that we might want to use.
102
00:08:15,570 --> 00:08:18,600
So I'm actually going to stick to the same color palette I had before.
103
00:08:18,630 --> 00:08:22,300
And so maybe something like this.
104
00:08:22,620 --> 00:08:28,470
And if we head back into Atom and go into our stylesheet, then we can select our div.
105
00:08:28,800 --> 00:08:34,380
And we're going to change its background color to that particular hex code.
106
00:08:35,280 --> 00:08:43,410
Now if we hit save and we go back to our web site and we hit refresh then you'll see that our div now has
107
00:08:43,500 --> 00:08:48,420
a background color and we can see that box of the div more clearly.
108
00:08:48,420 --> 00:08:56,750
Now the strange thing is, why does that div not go all the way to the end on the left and on the top?
109
00:08:56,790 --> 00:08:59,810
It sort of stops just about here.
110
00:08:59,910 --> 00:09:00,950
Why is that?
111
00:09:01,230 --> 00:09:07,700
Well, remember how we said that the browser inserts their own default CSS, the style things?
112
00:09:07,800 --> 00:09:13,880
For example how the horizontal rules should look like or how the h1s should look like.
113
00:09:14,310 --> 00:09:21,450
Well, if you take a look at the body element then you'll see that there's this user agent stylesheet
114
00:09:21,510 --> 00:09:27,180
which we know to be the default styles that are applied by the browser, and you can see that it has a
115
00:09:27,180 --> 00:09:31,730
margin of 8 pixels from all the edges.
116
00:09:31,770 --> 00:09:39,180
So if we change this, and we can do that just down here by double clicking on it and then let's enter
117
00:09:39,180 --> 00:09:39,980
zero.
118
00:09:40,140 --> 00:09:46,200
Now if I hit enter you'll see that that left margin now disappears.
119
00:09:46,200 --> 00:09:49,700
Now you might think that we can do the same thing with the top margin.
120
00:09:49,710 --> 00:09:55,650
So if I delete that and hit enter then you would think that maybe our div would go all the way up to the
121
00:09:55,650 --> 00:09:57,510
top, but it doesn't.
122
00:09:57,510 --> 00:09:58,860
Now why is that?
123
00:09:58,860 --> 00:10:04,650
Well, because there's also default rules for our h1.
124
00:10:04,800 --> 00:10:11,850
And as you can see, when I hover over the h1, it already shows you the entire space that it's taking
125
00:10:11,850 --> 00:10:15,880
up and you can see that, inside the user agent stylesheet,
126
00:10:16,050 --> 00:10:19,260
it’s got a whole bunch of default styles.
127
00:10:19,260 --> 00:10:27,770
For example, it says that it should have a margin-before, of this amount, and a margin-after, of this amount.
128
00:10:27,780 --> 00:10:35,400
So margin-before is at the top, margin-after is at the bottom, margin-start is on the left, margin-end
129
00:10:35,460 --> 00:10:37,080
is on the right.
130
00:10:37,110 --> 00:10:43,200
So this margin is what is responsible for that gap that we still have.
131
00:10:43,380 --> 00:10:51,060
So if I go ahead and change this to zero then you can see now our div is now sticking right to the top
132
00:10:51,300 --> 00:10:52,370
of the page.
133
00:10:52,440 --> 00:11:00,670
Now as you remember these changes, whether I edit it here or if I edit it inside the style section here,
134
00:11:01,080 --> 00:11:09,860
so I can say margin-right is zero pixels as well,
135
00:11:10,000 --> 00:11:15,740
then I get rid of that right little space, but remember none of this is permanent.
136
00:11:15,760 --> 00:11:23,740
So the challenge for you is to go and implement these styles in order to override the default browser
137
00:11:23,740 --> 00:11:32,030
styles and make our div go all the way to all three edges: the left, the top, and the right.
138
00:11:32,030 --> 00:11:34,990
So, pause the video and give that a go.
139
00:11:37,880 --> 00:11:44,950
All right. So all we need to do is just to transplant these changes we made here over to our stylesheet.
140
00:11:45,230 --> 00:11:51,350
So you'll notice that when I select for example the heading and I double click on the margin and I hit
141
00:11:51,480 --> 00:11:59,210
0 then you'll see that it inserts this line of code here where it says the margin top should be zero
142
00:11:59,210 --> 00:11:59,870
pixels.
143
00:11:59,930 --> 00:12:02,610
So I'm just going to do that again for the bottom here.
144
00:12:02,690 --> 00:12:03,810
I’m going to hit 0.
145
00:12:03,860 --> 00:12:08,990
And I want you to watch over here what shows up.
146
00:12:08,990 --> 00:12:14,460
It's written some more code telling us that the margin-bottom should be 0 pixels as well.
147
00:12:14,480 --> 00:12:20,330
So we now know what is the CSS that we have to write for our stylesheet in order for it to have the
148
00:12:20,330 --> 00:12:22,010
same appearance.
149
00:12:22,010 --> 00:12:27,230
So let's head over to our stylesheet and let's go ahead and select
150
00:12:27,230 --> 00:12:29,570
firstly the body element.
151
00:12:29,570 --> 00:12:34,180
And we're going to override that 8 pixel margin that it has.
152
00:12:34,250 --> 00:12:37,790
And we're just going to say margin is 0.
153
00:12:38,000 --> 00:12:45,800
And this means that all four sides is going to be set to 0 pixels for its margin property.
154
00:12:45,830 --> 00:12:51,230
The other one that we wanted change was the h1, and this one we don't really care so much about the
155
00:12:51,230 --> 00:12:59,660
other three sides. All we care is about the margin-top, and we want to set this to 0 pixels. So when it's
156
00:12:59,750 --> 00:13:03,050
0 you don't actually have to specify the unit,
157
00:13:03,050 --> 00:13:06,060
so pixels or whatever else it may be.
158
00:13:06,070 --> 00:13:13,520
So now go ahead and hit save and head back to our web site, and let's close this down and refresh, and
159
00:13:13,520 --> 00:13:18,170
you can see that our div now goes to all three edges.
160
00:13:18,170 --> 00:13:20,300
Now what is this diagram all about?
161
00:13:20,300 --> 00:13:24,840
It's got this margin border padding and all of these things.
162
00:13:24,950 --> 00:13:31,030
Well that's what we're going to dig into in the next lesson where we talk about the CSS box model.
163
00:13:31,130 --> 00:13:32,080
So I'll see you there.
16663
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.