1 00:00:00,330 --> 00:00:00,740 All right. 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? 3 00:00:08,130 --> 00:00:10,770 But we're going to change up very very quickly. 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 5 00:00:16,140 --> 00:00:17,490 top section. 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 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. 8 00:00:29,460 --> 00:00:32,430 Now if you double click on this folder, you'll see two images. 9 00:00:32,430 --> 00:00:34,360 One is a cloud. 10 00:00:34,370 --> 00:00:35,940 Another is a mountain. 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. 12 00:00:40,050 --> 00:00:43,510 So let's go ahead and add those images to our project folder. 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 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, 15 00:00:59,070 --> 00:01:00,640 the cloud and the mountain. 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. 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 18 00:01:13,320 --> 00:01:14,830 of our top container. 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 20 00:01:25,360 --> 00:01:29,890 going to have another cloud below this paragraph tag. 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. 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". 23 00:01:42,160 --> 00:01:42,390 All right. 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. 25 00:01:49,340 --> 00:01:52,480 Now it looks a little bit weird, right? 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 27 00:02:00,490 --> 00:02:01,750 paragraph tag, 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? 29 00:02:08,860 --> 00:02:14,910 Well, to understand this we have to look at the CSS display property. 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 31 00:02:21,640 --> 00:02:23,050 each one of these does. 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 33 00:02:31,810 --> 00:02:35,410 image, as is the box around the mountain 34 00:02:35,440 --> 00:02:36,550 and this cloud. 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. 36 00:02:45,400 --> 00:02:47,180 So what's going on here? 37 00:02:47,470 --> 00:02:53,500 Well by default some elements are what's called block display, 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 39 00:03:00,610 --> 00:03:04,330 whole width of the screen on a web page, 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. 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 42 00:03:18,500 --> 00:03:24,140 h1 through to h6, our divs, our lists and list items, as well as forms. 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 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. 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. 46 00:03:44,750 --> 00:03:46,900 So let's create a paragraph called Hello. 47 00:03:47,020 --> 00:03:52,140 Another one called World. 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 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. 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. 51 00:04:16,170 --> 00:04:18,690 Now here's a related problem. 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. 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 54 00:04:34,620 --> 00:04:35,140 tag? 55 00:04:35,310 --> 00:04:39,720 How can I only target one part of this paragraph tag? 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 57 00:04:47,730 --> 00:04:48,570 differently? 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. 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'. 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 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 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 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 64 00:05:40,840 --> 00:05:41,850 out. 65 00:05:42,070 --> 00:05:47,810 You can see that because the paragraph element are blocking elements, 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. 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. 68 00:06:02,470 --> 00:06:04,560 We can't have it looking like this. 69 00:06:04,570 --> 00:06:11,120 So let me show you the solution. Instead of having three paragraph tags, 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, 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 72 00:06:26,110 --> 00:06:32,040 word 'pro', and we can give that span a class of pro. 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 74 00:06:38,560 --> 00:06:43,170 is going to be applied to the word in this span. 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. 76 00:06:49,330 --> 00:06:53,750 And this sentence is still on the same line. 77 00:06:53,770 --> 00:06:57,570 Now why is that? If we switch on Pesticide once more, 78 00:06:57,880 --> 00:06:59,970 and I hold down the control key, 79 00:07:00,040 --> 00:07:01,310 you can see that over here 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, 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 82 00:07:20,620 --> 00:07:23,670 to format it or style it differently. 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 84 00:07:29,380 --> 00:07:34,680 divs, don't do very much unless they're used in conjunction with CSS. 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 86 00:07:41,340 --> 00:07:43,230 inline display element. 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 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 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 90 00:08:07,810 --> 00:08:08,780 mountain. 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 92 00:08:14,950 --> 00:08:17,450 elements and also your anchor tags. 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 94 00:08:25,710 --> 00:08:30,590 site and our Contact Me web site, they show up next to each other. 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 96 00:08:38,830 --> 00:08:39,570 the same line, 97 00:08:39,580 --> 00:08:41,910 in fact they encourage them to. 98 00:08:42,130 --> 00:08:45,400 And so this is why they called inline elements. 99 00:08:45,400 --> 00:08:51,250 Now if we head back into our code pen and we create another span. 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, 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 102 00:09:09,820 --> 00:09:11,200 it a background color, 103 00:09:14,650 --> 00:09:19,430 then you can see that these elements are inline. 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 105 00:09:26,260 --> 00:09:29,350 line until we run out of space horizontally. 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. 107 00:09:36,580 --> 00:09:39,480 Surely it seems far more flexible. 108 00:09:39,940 --> 00:09:43,100 Well there's just one problem with inline elements. 109 00:09:43,120 --> 00:09:46,570 You can't actually change the width. 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. 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 112 00:10:05,140 --> 00:10:09,990 but it still doesn't let any other element sit on the same line. 113 00:10:10,180 --> 00:10:12,030 So what can you do? 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, 115 00:10:20,890 --> 00:10:24,580 which we know is by default a block element, 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 117 00:10:34,720 --> 00:10:39,070 allows everything to sit next to each other on the same line. 118 00:10:39,190 --> 00:10:43,600 But you can see we've just lost the ability to change its width. Now 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 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. 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 122 00:11:05,510 --> 00:11:06,410 their widths? 123 00:11:06,410 --> 00:11:08,400 Which one should I choose then? 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 125 00:11:15,080 --> 00:11:20,040 inline block, and this kind of gives you the best of both worlds. 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, 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 128 00:11:35,750 --> 00:11:41,520 wide, but I'm also able to make them go onto the same line, 129 00:11:41,620 --> 00:11:44,590 so act almost like inline elements. 130 00:11:44,640 --> 00:11:47,800 And this is kind of what image elements are like 131 00:11:47,840 --> 00:11:49,260 by default. 132 00:11:49,460 --> 00:11:55,680 Now I say kind of because, as always, reality is much more complex than that. 133 00:11:55,880 --> 00:12:00,860 But if you're interested I'll provide a link to more discussion around this. 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 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 136 00:12:11,960 --> 00:12:17,690 and they also get displayed as if they're inline elements next to each other. 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. 138 00:12:24,050 --> 00:12:27,000 The last one is simply display none. 139 00:12:27,140 --> 00:12:30,110 And that just gets rid of our element. 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. 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 142 00:12:46,100 --> 00:12:46,730 here, 143 00:12:46,800 --> 00:12:48,400 .second-p. 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 145 00:13:00,440 --> 00:13:05,740 that element from the website as if it didn't exist. 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 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 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. 149 00:13:28,700 --> 00:13:32,840 It's almost like I've just gone ahead and deleted it from the HTML. 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. 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 152 00:13:44,810 --> 00:13:47,400 you might want to hide and show the answer, 153 00:13:47,670 --> 00:13:49,570 there's two ways that you can do this. 154 00:13:49,580 --> 00:13:52,340 One is display none as you've seen here, 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. 156 00:13:56,900 --> 00:14:00,290 The other one is a property called visibility. 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 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. 159 00:14:17,690 --> 00:14:20,430 It just can't be seen anymore. 160 00:14:20,660 --> 00:14:23,930 So whenever you're trying to make things disappear or reappear, 161 00:14:24,050 --> 00:14:29,670 think about what effect you want to have, and choose between these two properties. 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: 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 164 00:14:42,290 --> 00:14:43,100 element, 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 166 00:14:50,270 --> 00:14:51,200 if we're not. 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 168 00:14:59,810 --> 00:15:04,580 your HTML elements should be displayed on screen. 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.