WEBVTT 0 00:00.330 --> 00:00.740 All right. 1 00:00.780 --> 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 00:08.130 --> 00:10.770 But we're going to change up very very quickly. 3 00:10.770 --> 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 00:16.140 --> 00:17.490 top section. 5 00:17.490 --> 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 00:23.820 --> 00:29.350 you extract that zip file you should now have a folder called CSS - My Site Images. 7 00:29.460 --> 00:32.430 Now if you double click on this folder, you'll see two images. 8 00:32.430 --> 00:34.360 One is a cloud. 9 00:34.370 --> 00:35.940 Another is a mountain. 10 00:35.940 --> 00:39.820 And we're going to try and recreate the scene that they've got over here. 11 00:40.050 --> 00:43.510 So let's go ahead and add those images to our project folder. 12 00:43.680 --> 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 00:50.750 --> 00:58.820 here called images, and inside this images folder is where we're going to drag and drop those two pngs, 14 00:59.070 --> 01:00.640 the cloud and the mountain. 15 01:00.640 --> 01:05.090 So we're going to put it inside here so that we can use it inside our web site. 16 01:05.100 --> 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 01:13.320 --> 01:14.830 of our top container. 18 01:15.030 --> 01:25.360 So the source will be images/cloud.png, and the alt text will just be "cloud-img", and we're 19 01:25.360 --> 01:29.890 going to have another cloud below this paragraph tag. 20 01:30.070 --> 01:35.090 And finally we're going to have an image of our mountain right at the bottom. 21 01:35.200 --> 01:42.160 So that will be images/mountain.png, and the alt text will just be "mountain-img". 22 01:42.160 --> 01:42.390 All right. 23 01:42.400 --> 01:49.330 Let's hit save and let's refresh to see what our page looks like right now. 24 01:49.340 --> 01:52.480 Now it looks a little bit weird, right? 25 01:52.480 --> 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 02:00.490 --> 02:01.750 paragraph tag, 27 02:01.870 --> 02:08.490 but this cloud is on the same line and next to this mountain image? What is going on here? 28 02:08.860 --> 02:14.910 Well, to understand this we have to look at the CSS display property. 29 02:14.980 --> 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 02:21.640 --> 02:23.050 each one of these does. 31 02:23.050 --> 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 02:31.810 --> 02:35.410 image, as is the box around the mountain 33 02:35.440 --> 02:36.550 and this cloud. 34 02:36.720 --> 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 02:45.400 --> 02:47.180 So what's going on here? 36 02:47.470 --> 02:53.500 Well by default some elements are what's called block display, 37 02:53.500 --> 03:00.610 for example this h1 and this paragraph tag. And block elements are those that take up essentially the 38 03:00.610 --> 03:04.330 whole width of the screen on a web page, 39 03:04.420 --> 03:12.190 so effectively blocking out any other elements from sitting next to it on the left or on the right. 40 03:12.190 --> 03:18.460 Now the most common block elements that we would have seen already are our paragraphs, our headers, so 41 03:18.500 --> 03:24.140 h1 through to h6, our divs, our lists and list items, as well as forms. 42 03:24.490 --> 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 03:31.210 --> 03:37.090 JS editor, and I'm going to have my view with my editors on the right. 44 03:37.090 --> 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 03:44.750 --> 03:46.900 So let's create a paragraph called Hello. 46 03:47.020 --> 03:52.140 Another one called World. 47 03:52.320 --> 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 04:01.530 --> 04:08.360 you can see that the entire paragraph takes up the whole width of the web page. 49 04:08.460 --> 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 04:16.170 --> 04:18.690 Now here's a related problem. 51 04:18.750 --> 04:25.940 Say if I wanted to look at this paragraph tag, which we now know to be a block element. 52 04:26.250 --> 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 04:34.620 --> 04:35.140 tag? 54 04:35.310 --> 04:39.720 How can I only target one part of this paragraph tag? 55 04:39.870 --> 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 04:47.730 --> 04:48.570 differently? 57 04:48.720 --> 04:56.500 Well some of you might think that I could just split up this sentence into three paragraph tags. 58 04:56.580 --> 05:09.510 So what if it was 'a' plus a space, then it was 'pro' and then it was 'grammer', 'a programmer'. 59 05:09.510 --> 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 05:16.920 --> 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 05:24.360 --> 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 05:30.840 --> 05:40.840 you just have to change the text decoration to underline. Now what happens in this case? Let's check it 63 05:40.840 --> 05:41.850 out. 64 05:42.070 --> 05:47.810 You can see that because the paragraph element are blocking elements, 65 05:47.980 --> 05:54.660 they take up the entire width, and they block everything else from being on the same line as themselves. 66 05:54.670 --> 06:02.440 This doesn't actually work even though we've been able to target just one part of that line. 67 06:02.470 --> 06:04.560 We can't have it looking like this. 68 06:04.570 --> 06:11.120 So let me show you the solution. Instead of having three paragraph tags, 69 06:11.320 --> 06:17.220 so let's just undo this to where we were before, and we've got a single paragraph element, 70 06:17.440 --> 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 06:26.110 --> 06:32.040 word 'pro', and we can give that span a class of pro. 72 06:32.170 --> 06:38.500 And because we've already selected that class in CSS, and we're making that part underlined, then that 73 06:38.560 --> 06:43.170 is going to be applied to the word in this span. 74 06:43.180 --> 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 06:49.330 --> 06:53.750 And this sentence is still on the same line. 76 06:53.770 --> 06:57.570 Now why is that? If we switch on Pesticide once more, 77 06:57.880 --> 06:59.970 and I hold down the control key, 78 07:00.040 --> 07:01.310 you can see that over here 79 07:01.330 --> 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 07:13.600 --> 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 07:20.620 --> 07:23.670 to format it or style it differently. 82 07:23.860 --> 07:29.380 Now the reason why I'm showing you this here, instead of inside the HTML module, is because spans, like 83 07:29.380 --> 07:34.680 divs, don't do very much unless they're used in conjunction with CSS. 84 07:34.750 --> 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 07:41.340 --> 07:43.230 inline display element. 86 07:43.390 --> 07:52.060 So unlike block display elements, for example the heading and also the paragraph element, an inline display 87 07:52.060 --> 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 07:59.620 --> 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 08:07.810 --> 08:08.780 mountain. 90 08:08.800 --> 08:14.950 So some of the common inline elements that you're going to come across are things like span, image 91 08:14.950 --> 08:17.450 elements and also your anchor tags. 92 08:17.620 --> 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 08:25.710 --> 08:30.590 site and our Contact Me web site, they show up next to each other. 94 08:30.790 --> 08:38.830 And this is because they are inline elements and they do not block other elements from occurring on 95 08:38.830 --> 08:39.570 the same line, 96 08:39.580 --> 08:41.910 in fact they encourage them to. 97 08:42.130 --> 08:45.400 And so this is why they called inline elements. 98 08:45.400 --> 08:51.250 Now if we head back into our code pen and we create another span. 99 08:53.860 --> 09:01.330 Now while you can have spans that are nested inside paragraph tags or h1s or whatever else it may be, 100 09:01.360 --> 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 09:09.820 --> 09:11.200 it a background color, 102 09:14.650 --> 09:19.430 then you can see that these elements are inline. 103 09:19.540 --> 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 09:26.260 --> 09:29.350 line until we run out of space horizontally. 105 09:29.470 --> 09:36.580 Now you might wonder why would we ever use block elements if we can simply use inline elements. 106 09:36.580 --> 09:39.480 Surely it seems far more flexible. 107 09:39.940 --> 09:43.100 Well there's just one problem with inline elements. 108 09:43.120 --> 09:46.570 You can't actually change the width. 109 09:46.690 --> 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 09:55.750 --> 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 10:05.140 --> 10:09.990 but it still doesn't let any other element sit on the same line. 112 10:10.180 --> 10:12.030 So what can you do? 113 10:12.370 --> 10:20.560 Well, you can actually change the display property of any given element. So I can make a paragraph element, 114 10:20.890 --> 10:24.580 which we know is by default a block element, 115 10:24.600 --> 10:34.720 I can change its display value to be inline, and that makes all of our paragraphs inline elements and 116 10:34.720 --> 10:39.070 allows everything to sit next to each other on the same line. 117 10:39.190 --> 10:43.600 But you can see we've just lost the ability to change its width. Now 118 10:43.600 --> 10:52.910 similarly I can change the display property of our inline elements to block elements, and this allows 119 10:52.910 --> 10:57.590 me to change its width but it doesn't let them sit on the same line. 120 10:57.740 --> 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 11:05.510 --> 11:06.410 their widths? 122 11:06.410 --> 11:08.400 Which one should I choose then? 123 11:08.600 --> 11:14.990 Well, you don't actually have to choose because there is another type of display which is called the 124 11:15.080 --> 11:20.040 inline block, and this kind of gives you the best of both worlds. 125 11:20.060 --> 11:29.660 So if instead of changing the paragraph element to inline I'm going to change it to inline-block, 126 11:30.350 --> 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 11:35.750 --> 11:41.520 wide, but I'm also able to make them go onto the same line, 128 11:41.620 --> 11:44.590 so act almost like inline elements. 129 11:44.640 --> 11:47.800 And this is kind of what image elements are like 130 11:47.840 --> 11:49.260 by default. 131 11:49.460 --> 11:55.680 Now I say kind of because, as always, reality is much more complex than that. 132 11:55.880 --> 12:00.860 But if you're interested I'll provide a link to more discussion around this. 133 12:00.920 --> 12:07.310 But for our purposes we're just going to treat images as if they are inline block elements because 134 12:07.310 --> 12:11.750 we're able to change its width and height to whatever it is that we desire 135 12:11.960 --> 12:17.690 and they also get displayed as if they're inline elements next to each other. 136 12:18.020 --> 12:23.760 So we've now covered three out of the four display values that we have access to. 137 12:24.050 --> 12:27.000 The last one is simply display none. 138 12:27.140 --> 12:30.110 And that just gets rid of our element. 139 12:30.110 --> 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 12:39.110 --> 12:45.870 I'm going to call this second-p and I'm going to target it down 141 12:46.100 --> 12:46.730 here, 142 12:46.800 --> 12:48.400 .second-p. 143 12:48.770 --> 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 13:00.440 --> 13:05.740 that element from the website as if it didn't exist. 145 13:05.750 --> 13:13.040 So if I get rid of this display block and allow our spans to continue being inline elements you can 146 13:13.040 --> 13:22.220 see that there's no gap between the first Hello and the second Hello. That World paragraph has now completely 147 13:22.310 --> 13:28.700 disappeared out of the flow of the document as if it never was written inside the code. 148 13:28.700 --> 13:32.840 It's almost like I've just gone ahead and deleted it from the HTML. 149 13:33.020 --> 13:39.440 But of course I haven't, and all that I've done is just set its display value to none. 150 13:39.440 --> 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 13:44.810 --> 13:47.400 you might want to hide and show the answer, 152 13:47.670 --> 13:49.570 there's two ways that you can do this. 153 13:49.580 --> 13:52.340 One is display none as you've seen here, 154 13:52.430 --> 13:56.880 which takes that element out of the flow and it's as if it never existed. 155 13:56.900 --> 14:00.290 The other one is a property called visibility. 156 14:00.620 --> 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 14:09.860 --> 14:17.680 its original position, and all the other elements still flow around it as if it's still there. 158 14:17.690 --> 14:20.430 It just can't be seen anymore. 159 14:20.660 --> 14:23.930 So whenever you're trying to make things disappear or reappear, 160 14:24.050 --> 14:29.670 think about what effect you want to have, and choose between these two properties. 161 14:29.750 --> 14:36.400 So as we've seen in this lesson the position of elements on screen are determined by many things: 162 14:36.440 --> 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 14:42.290 --> 14:43.100 element, 164 14:43.310 --> 14:50.270 whether its display block or whether it's display inline, whether we're allowed to set its width or 165 14:50.270 --> 14:51.200 if we're not. 166 14:51.290 --> 14:59.810 But even before CSS comes into play, you have to remember that there's already rules that govern how 167 14:59.810 --> 15:04.580 your HTML elements should be displayed on screen. 168 15:04.580 --> 15:10.220 So to learn about that and to learn more about CSS positioning, I'll see you on the next lesson.