0
1
00:00:00,330 --> 00:00:00,740
All right.
1

2
00:00:00,780 --> 00:00:07,740
So our web site is still looking a little bit sparse and in fact it's looking nothing like this, is it?
2

3
00:00:08,130 --> 00:00:10,770
But we're going to change up very very quickly.
3

4
00:00:10,770 --> 00:00:16,140
Let's go ahead and add the rest of the content in order to have all the images that we need for our
4

5
00:00:16,140 --> 00:00:17,490
top section.
5

6
00:00:17,490 --> 00:00:23,820
Now in this lesson if you look at the resources you'll find a zip file that you can download and once
6

7
00:00:23,820 --> 00:00:29,350
you extract that zip file you should now have a folder called CSS - My Site Images.
7

8
00:00:29,460 --> 00:00:32,430
Now if you double click on this folder, you'll see two images.
8

9
00:00:32,430 --> 00:00:34,360
One is a cloud.
9

10
00:00:34,370 --> 00:00:35,940
Another is a mountain.
10

11
00:00:35,940 --> 00:00:39,820
And we're going to try and recreate the scene that they've got over here.
11

12
00:00:40,050 --> 00:00:43,510
So let's go ahead and add those images to our project folder.
12

13
00:00:43,680 --> 00:00:50,750
So if you pull up Atom and find your project folder' then we're going to go and create a new folder in
13

14
00:00:50,750 --> 00:00:58,820
here called images, and inside this images folder is where we're going to drag and drop those two pngs,
14

15
00:00:59,070 --> 00:01:00,640
the cloud and the mountain.
15

16
00:01:00,640 --> 00:01:05,090
So we're going to put it inside here so that we can use it inside our web site.
16

17
00:01:05,100 --> 00:01:13,080
So now we're going to go ahead and look at our images so that we have a image of a cloud at the top
17

18
00:01:13,320 --> 00:01:14,830
of our top container.
18

19
00:01:15,030 --> 00:01:25,360
So the source will be images/cloud.png, and the alt text will just be "cloud-img", and we're
19

20
00:01:25,360 --> 00:01:29,890
going to have another cloud below this paragraph tag.
20

21
00:01:30,070 --> 00:01:35,090
And finally we're going to have an image of our mountain right at the bottom.
21

22
00:01:35,200 --> 00:01:42,160
So that will be images/mountain.png, and the alt text will just be "mountain-img".
22

23
00:01:42,160 --> 00:01:42,390
All right.
23

24
00:01:42,400 --> 00:01:49,330
Let's hit save and let's refresh to see what our page looks like right now.
24

25
00:01:49,340 --> 00:01:52,480
Now it looks a little bit weird, right?
25

26
00:01:52,480 --> 00:02:00,430
Why is it that this cloud is taking up its own line and it's not next to either this heading or this
26

27
00:02:00,490 --> 00:02:01,750
paragraph tag,
27

28
00:02:01,870 --> 00:02:08,490
but this cloud is on the same line and next to this mountain image? What is going on here?
28

29
00:02:08,860 --> 00:02:14,910
Well, to understand this we have to look at the CSS display property.
29

30
00:02:14,980 --> 00:02:21,580
Now the display property has four different values and we're going to look at them in turn and see what
30

31
00:02:21,640 --> 00:02:23,050
each one of these does.
31

32
00:02:23,050 --> 00:02:31,810
Now if we switch on Pesticide again, you can see that the box around the cloud is only as large as the
32

33
00:02:31,810 --> 00:02:35,410
image, as is the box around the mountain
33

34
00:02:35,440 --> 00:02:36,550
and this cloud.
34

35
00:02:36,720 --> 00:02:45,120
But the box around the h1, and also the paragraph element, they're as long as the width of the page.
35

36
00:02:45,400 --> 00:02:47,180
So what's going on here?
36

37
00:02:47,470 --> 00:02:53,500
Well by default some elements are what's called block display,
37

38
00:02:53,500 --> 00:03:00,610
for example this h1 and this paragraph tag. And block elements are those that take up essentially the
38

39
00:03:00,610 --> 00:03:04,330
whole width of the screen on a web page,
39

40
00:03:04,420 --> 00:03:12,190
so effectively blocking out any other elements from sitting next to it on the left or on the right.
40

41
00:03:12,190 --> 00:03:18,460
Now the most common block elements that we would have seen already are our paragraphs, our headers, so
41

42
00:03:18,500 --> 00:03:24,140
h1 through to h6, our divs, our lists and list items, as well as forms.
42

43
00:03:24,490 --> 00:03:31,090
And if we head over to Code Pen, and I'm just going to create a new anonymous pen. Let me just get rid of the
43

44
00:03:31,210 --> 00:03:37,090
JS editor, and I'm going to have my view with my editors on the right.
44

45
00:03:37,090 --> 00:03:44,740
So now I'm going to go ahead and create two block elements. So we know that paragraphs are block elements.
45

46
00:03:44,750 --> 00:03:46,900
So let's create a paragraph called Hello.
46

47
00:03:47,020 --> 00:03:52,140
Another one called World.
47

48
00:03:52,320 --> 00:04:01,470
Now if I select the paragraph tag in my CSS and I give them both a background color of, say, red, then
48

49
00:04:01,530 --> 00:04:08,360
you can see that the entire paragraph takes up the whole width of the web page.
49

50
00:04:08,460 --> 00:04:16,170
So it's blocking any other element from being on the same line next to it, on the right on the left.
50

51
00:04:16,170 --> 00:04:18,690
Now here's a related problem.
51

52
00:04:18,750 --> 00:04:25,940
Say if I wanted to look at this paragraph tag, which we now know to be a block element.
52

53
00:04:26,250 --> 00:04:34,620
What if I wanted to style the pro part of it differently from the rest of the words in this paragraph
53

54
00:04:34,620 --> 00:04:35,140
tag?
54

55
00:04:35,310 --> 00:04:39,720
How can I only target one part of this paragraph tag?
55

56
00:04:39,870 --> 00:04:47,730
How can I, say for example, underline the word pro so that it says 'a programmer', but style these three characters
56

57
00:04:47,730 --> 00:04:48,570
differently?
57

58
00:04:48,720 --> 00:04:56,500
Well some of you might think that I could just split up this sentence into three paragraph tags.
58

59
00:04:56,580 --> 00:05:09,510
So what if it was 'a' plus a space, then it was 'pro' and then it was 'grammer', 'a programmer'.
59

60
00:05:09,510 --> 00:05:16,920
So now I've got this separate paragraph tag for the word pro and I can give it a class of say just the
60

61
00:05:16,920 --> 00:05:24,360
word pro and I can go into styles and style it differently from the others, so I can say .pro, and
61

62
00:05:24,360 --> 00:05:30,600
this one, if you do a little bit of research on Google, you'll find that in order to make it underlined
62

63
00:05:30,840 --> 00:05:40,840
you just have to change the text decoration to underline. Now what happens in this case? Let's check it
63

64
00:05:40,840 --> 00:05:41,850
out.
64

65
00:05:42,070 --> 00:05:47,810
You can see that because the paragraph element are blocking elements,
65

66
00:05:47,980 --> 00:05:54,660
they take up the entire width, and they block everything else from being on the same line as themselves.
66

67
00:05:54,670 --> 00:06:02,440
This doesn't actually work even though we've been able to target just one part of that line.
67

68
00:06:02,470 --> 00:06:04,560
We can't have it looking like this.
68

69
00:06:04,570 --> 00:06:11,120
So let me show you the solution. Instead of having three paragraph tags,
69

70
00:06:11,320 --> 00:06:17,220
so let's just undo this to where we were before, and we've got a single paragraph element,
70

71
00:06:17,440 --> 00:06:26,110
what we can do is, we can use another HTML element called a span, and inside the span we can add that
71

72
00:06:26,110 --> 00:06:32,040
word 'pro', and we can give that span a class of pro.
72

73
00:06:32,170 --> 00:06:38,500
And because we've already selected that class in CSS, and we're making that part underlined, then that
73

74
00:06:38,560 --> 00:06:43,170
is going to be applied to the word in this span.
74

75
00:06:43,180 --> 00:06:49,180
Now if we hit save and we refresh you can see that we've achieved what we set out to do.
75

76
00:06:49,330 --> 00:06:53,750
And this sentence is still on the same line.
76

77
00:06:53,770 --> 00:06:57,570
Now why is that? If we switch on Pesticide once more,
77

78
00:06:57,880 --> 00:06:59,970
and I hold down the control key,
78

79
00:07:00,040 --> 00:07:01,310
you can see that over here
79

80
00:07:01,330 --> 00:07:13,510
I'm hovering over the entire paragraph element, but one part of it has a span, and this allows us to select,
80

81
00:07:13,600 --> 00:07:20,620
almost like as if you would highlight a section of your text, just select one part of the text in order
81

82
00:07:20,620 --> 00:07:23,670
to format it or style it differently.
82

83
00:07:23,860 --> 00:07:29,380
Now the reason why I'm showing you this here, instead of inside the HTML module, is because spans, like
83

84
00:07:29,380 --> 00:07:34,680
divs, don't do very much unless they're used in conjunction with CSS.
84

85
00:07:34,750 --> 00:07:41,300
But another reason why I'm showing it to you now is because the span element is what's known as an 
85

86
00:07:41,340 --> 00:07:43,230
inline display element.
86

87
00:07:43,390 --> 00:07:52,060
So unlike block display elements, for example the heading and also the paragraph element, an inline display
87

88
00:07:52,060 --> 00:07:59,620
element only takes up as much space as it needs to in the height and in its width so you can see that
88

89
00:07:59,620 --> 00:08:07,730
the box around the span is only as large as it needs to be as is the box around our cloud and also our
89

90
00:08:07,810 --> 00:08:08,780
mountain.
90

91
00:08:08,800 --> 00:08:14,950
So some of the common inline elements that you're going to come across are things like span, image
91

92
00:08:14,950 --> 00:08:17,450
elements and also your anchor tags.
92

93
00:08:17,620 --> 00:08:25,690
If you think back to our CV web site that we created in our HTML module, the links for our Hobbies web
93

94
00:08:25,710 --> 00:08:30,590
site and our Contact Me web site, they show up next to each other.
94

95
00:08:30,790 --> 00:08:38,830
And this is because they are inline elements and they do not block other elements from occurring on
95

96
00:08:38,830 --> 00:08:39,570
the same line,
96

97
00:08:39,580 --> 00:08:41,910
in fact they encourage them to.
97

98
00:08:42,130 --> 00:08:45,400
And so this is why they called inline elements.
98

99
00:08:45,400 --> 00:08:51,250
Now if we head back into our code pen and we create another span.
99

100
00:08:53,860 --> 00:09:01,330
Now while you can have spans that are nested inside paragraph tags or h1s or whatever else it may be,
100

101
00:09:01,360 --> 00:09:09,820
you can also have them as standalones. But you can see here, if we select our span element and we also give
101

102
00:09:09,820 --> 00:09:11,200
it a background color,
102

103
00:09:14,650 --> 00:09:19,430
then you can see that these elements are inline.
103

104
00:09:19,540 --> 00:09:26,260
And even if we had a whole bunch more of these spans they would continue to be stacked onto the same
104

105
00:09:26,260 --> 00:09:29,350
line until we run out of space horizontally.
105

106
00:09:29,470 --> 00:09:36,580
Now you might wonder why would we ever use block elements if we can simply use inline elements.
106

107
00:09:36,580 --> 00:09:39,480
Surely it seems far more flexible.
107

108
00:09:39,940 --> 00:09:43,100
Well there's just one problem with inline elements.
108

109
00:09:43,120 --> 00:09:46,570
You can't actually change the width.
109

110
00:09:46,690 --> 00:09:55,520
So if I said the width of all the spans should be 100 pixels you can see that absolutely nothing happens.
110

111
00:09:55,750 --> 00:10:04,860
But if I specify a width, the same width, to our block elements, then you can see that it complies very eagerly
111

112
00:10:05,140 --> 00:10:09,990
but it still doesn't let any other element sit on the same line.
112

113
00:10:10,180 --> 00:10:12,030
So what can you do?
113

114
00:10:12,370 --> 00:10:20,560
Well, you can actually change the display property of any given element. So I can make a paragraph element,
114

115
00:10:20,890 --> 00:10:24,580
which we know is by default a block element,
115

116
00:10:24,600 --> 00:10:34,720
I can change its display value to be inline, and that makes all of our paragraphs inline elements and
116

117
00:10:34,720 --> 00:10:39,070
allows everything to sit next to each other on the same line.
117

118
00:10:39,190 --> 00:10:43,600
But you can see we've just lost the ability to change its width. Now
118

119
00:10:43,600 --> 00:10:52,910
similarly I can change the display property of our inline elements to block elements, and this allows
119

120
00:10:52,910 --> 00:10:57,590
me to change its width but it doesn't let them sit on the same line.
120

121
00:10:57,740 --> 00:11:05,510
So what should I do if I wanted elements that can occupy the same line but at the same time I can set
121

122
00:11:05,510 --> 00:11:06,410
their widths?
122

123
00:11:06,410 --> 00:11:08,400
Which one should I choose then?
123

124
00:11:08,600 --> 00:11:14,990
Well, you don't actually have to choose because there is another type of display which is called the
124

125
00:11:15,080 --> 00:11:20,040
inline block, and this kind of gives you the best of both worlds.
125

126
00:11:20,060 --> 00:11:29,660
So if instead of changing the paragraph element to inline I'm going to change it to inline-block,
126

127
00:11:30,350 --> 00:11:35,750
then you'll see that not only am I allowed to change its width, you can see that it's now 100 pixels
127

128
00:11:35,750 --> 00:11:41,520
wide, but I'm also able to make them go onto the same line,
128

129
00:11:41,620 --> 00:11:44,590
so act almost like inline elements.
129

130
00:11:44,640 --> 00:11:47,800
And this is kind of what image elements are like
130

131
00:11:47,840 --> 00:11:49,260
by default.
131

132
00:11:49,460 --> 00:11:55,680
Now I say kind of because, as always, reality is much more complex than that.
132

133
00:11:55,880 --> 00:12:00,860
But if you're interested I'll provide a link to more discussion around this.
133

134
00:12:00,920 --> 00:12:07,310
But for our purposes we're just going to treat images as if they are inline block elements because
134

135
00:12:07,310 --> 00:12:11,750
we're able to change its width and height to whatever it is that we desire
135

136
00:12:11,960 --> 00:12:17,690
and they also get displayed as if they're inline elements next to each other.
136

137
00:12:18,020 --> 00:12:23,760
So we've now covered three out of the four display values that we have access to.
137

138
00:12:24,050 --> 00:12:27,000
The last one is simply display none.
138

139
00:12:27,140 --> 00:12:30,110
And that just gets rid of our element.
139

140
00:12:30,110 --> 00:12:39,110
So let's head back into our code pen and I'm going to give our second paragraph element a separate class.
140

141
00:12:39,110 --> 00:12:45,870
I'm going to call this second-p and I'm going to target it down 
141

142
00:12:46,100 --> 00:12:46,730
here,
142

143
00:12:46,800 --> 00:12:48,400
.second-p.
143

144
00:12:48,770 --> 00:12:59,990
And I'm going to set its display value to none, and you can see what that does is that it simply removes
144

145
00:13:00,440 --> 00:13:05,740
that element from the website as if it didn't exist.
145

146
00:13:05,750 --> 00:13:13,040
So if I get rid of this display block and allow our spans to continue being inline elements you can
146

147
00:13:13,040 --> 00:13:22,220
see that there's no gap between the first Hello and the second Hello. That World paragraph has now completely
147

148
00:13:22,310 --> 00:13:28,700
disappeared out of the flow of the document as if it never was written inside the code.
148

149
00:13:28,700 --> 00:13:32,840
It's almost like I've just gone ahead and deleted it from the HTML.
149

150
00:13:33,020 --> 00:13:39,440
But of course I haven't, and all that I've done is just set its display value to none.
150

151
00:13:39,440 --> 00:13:44,810
Now when you try to figure out how to hide things on your web page, for example if you had a quiz, then
151

152
00:13:44,810 --> 00:13:47,400
you might want to hide and show the answer,
152

153
00:13:47,670 --> 00:13:49,570
there's two ways that you can do this.
153

154
00:13:49,580 --> 00:13:52,340
One is display none as you've seen here,
154

155
00:13:52,430 --> 00:13:56,880
which takes that element out of the flow and it's as if it never existed.
155

156
00:13:56,900 --> 00:14:00,290
The other one is a property called visibility.
156

157
00:14:00,620 --> 00:14:09,800
And this you can set to hidden, and what this does is that it makes that element disappear but it keeps
157

158
00:14:09,860 --> 00:14:17,680
its original position, and all the other elements still flow around it as if it's still there.
158

159
00:14:17,690 --> 00:14:20,430
It just can't be seen anymore.
159

160
00:14:20,660 --> 00:14:23,930
So whenever you're trying to make things disappear or reappear,
160

161
00:14:24,050 --> 00:14:29,670
think about what effect you want to have, and choose between these two properties.
161

162
00:14:29,750 --> 00:14:36,400
So as we've seen in this lesson the position of elements on screen are determined by many things:
162

163
00:14:36,440 --> 00:14:42,290
the box model, the margins, the size of the border, the size of the width and the height of the actual
163

164
00:14:42,290 --> 00:14:43,100
element,
164

165
00:14:43,310 --> 00:14:50,270
whether its display block or whether it's display inline, whether we're allowed to set its width or
165

166
00:14:50,270 --> 00:14:51,200
if we're not.
166

167
00:14:51,290 --> 00:14:59,810
But even before CSS comes into play, you have to remember that there's already rules that govern how
167

168
00:14:59,810 --> 00:15:04,580
your HTML elements should be displayed on screen.
168

169
00:15:04,580 --> 00:15:10,220
So to learn about that and to learn more about CSS positioning, I'll see you on the next lesson.