1 1 00:00:00,360 --> 00:00:01,870 Hi guys, and welcome back. 2 2 00:00:01,870 --> 00:00:02,960 In this lecture, let's take a look 3 3 00:00:02,960 --> 00:00:05,530 at some HTML and CSS code. 4 4 00:00:05,530 --> 00:00:08,220 This will help you understand what the code looks like 5 5 00:00:08,220 --> 00:00:11,790 and also how HTML and CSS interact with each other. 6 6 00:00:11,790 --> 00:00:13,690 We're gonna go quite quickly in this lecture 7 7 00:00:13,690 --> 00:00:16,540 because its aim is not to teach you HTML and CSS, 8 8 00:00:16,540 --> 00:00:18,640 but just to have a quick look at it. 9 9 00:00:18,640 --> 00:00:20,570 In the next few lectures in this section 10 10 00:00:20,570 --> 00:00:22,410 and in the next we're gonna go into everything 11 11 00:00:22,410 --> 00:00:23,380 in much more detail, 12 12 00:00:23,380 --> 00:00:27,050 so don't worry if not everything makes sense at this point. 13 13 00:00:27,050 --> 00:00:27,950 Let's get started. 14 14 00:00:28,800 --> 00:00:31,700 I'm gonna start off by creating an HTML file. 15 15 00:00:31,700 --> 00:00:34,390 I'm gonna call mine index.html. 16 16 00:00:34,390 --> 00:00:36,300 This is just the normal name 17 17 00:00:36,300 --> 00:00:39,923 for the sort of main HTML file in a webpage. 18 18 00:00:40,770 --> 00:00:41,710 Now that I've created this, 19 19 00:00:41,710 --> 00:00:45,330 I'm just gonna hide away the sidebar here 20 20 00:00:45,330 --> 00:00:47,150 so that we can focus on the code. 21 21 00:00:47,150 --> 00:00:51,730 An HTML5 document, HTML5 is the latest version of HTML 22 22 00:00:51,730 --> 00:00:54,120 almost always starts with similar code. 23 23 00:00:54,120 --> 00:00:55,360 So I'm just gonna paste it in here 24 24 00:00:55,360 --> 00:00:57,210 so that we can go a bit quicker. 25 25 00:00:57,210 --> 00:01:00,700 We've got the doc type element that tells the browser 26 26 00:01:00,700 --> 00:01:03,060 that this is an HTML document. 27 27 00:01:03,060 --> 00:01:05,110 When the browser receives this code, 28 28 00:01:05,110 --> 00:01:08,430 which basically is just text written in a specific way, 29 29 00:01:08,430 --> 00:01:10,680 if we tell the browser that it is HTML code, 30 30 00:01:10,680 --> 00:01:13,100 then it can try to understand it by following 31 31 00:01:13,100 --> 00:01:14,980 the HTML rules it knows. 32 32 00:01:14,980 --> 00:01:17,600 So that's why the doc type is important. 33 33 00:01:17,600 --> 00:01:21,070 Then we've got the HTML element and inside it, 34 34 00:01:21,070 --> 00:01:25,170 we have the head and body elements. 35 35 00:01:25,170 --> 00:01:27,060 I've used indentation in here 36 36 00:01:27,060 --> 00:01:30,140 to distinguish between the different containers. 37 37 00:01:30,140 --> 00:01:34,320 So the HTML element contains the head and body elements 38 38 00:01:34,320 --> 00:01:37,830 and the head element contains these elements over here. 39 39 00:01:37,830 --> 00:01:39,890 HTML doesn't care about the indentation 40 40 00:01:39,890 --> 00:01:41,850 and the new lines and so forth. 41 41 00:01:41,850 --> 00:01:44,500 It could be all in one line for all it cares. 42 42 00:01:44,500 --> 00:01:47,700 The head element contains page level data 43 43 00:01:47,700 --> 00:01:51,160 or information for the browser about this webpage. 44 44 00:01:51,160 --> 00:01:54,430 The body contains what the user is gonna see in the page. 45 45 00:01:54,430 --> 00:01:55,263 You can see that in the head, 46 46 00:01:55,263 --> 00:01:57,330 we've got a couple of meta elements. 47 47 00:01:57,330 --> 00:01:59,250 These are just information. 48 48 00:01:59,250 --> 00:02:01,040 For example, this one tells the browser, 49 49 00:02:01,040 --> 00:02:04,350 the type of character set that is used in this webpage, 50 50 00:02:04,350 --> 00:02:06,360 UTF-8 is pretty common. 51 51 00:02:06,360 --> 00:02:08,820 And this element here tells the browser 52 52 00:02:08,820 --> 00:02:12,020 how this page will scale with the size of different devices. 53 53 00:02:12,020 --> 00:02:14,320 This is important for responsive design, 54 54 00:02:14,320 --> 00:02:16,240 as we will learn more about later on. 55 55 00:02:16,240 --> 00:02:18,000 Finally, we've got the title here 56 56 00:02:18,000 --> 00:02:20,690 that shows up in your browser and in your tabs, 57 57 00:02:20,690 --> 00:02:22,610 this is just the page title. 58 58 00:02:22,610 --> 00:02:25,650 You can see that we've got elements and some elements have 59 59 00:02:25,650 --> 00:02:29,190 attributes like the HTML element or these meta elements. 60 60 00:02:29,190 --> 00:02:32,910 Attributes are just the names equal something, 61 61 00:02:32,910 --> 00:02:35,200 and they add a bit more information to the element. 62 62 00:02:35,200 --> 00:02:36,280 For example, here, 63 63 00:02:36,280 --> 00:02:39,410 we're telling the browser that this element or this entire 64 64 00:02:39,410 --> 00:02:42,380 HTML page really is written in English. 65 65 00:02:42,380 --> 00:02:44,480 Let's add a bit more code to the body element 66 66 00:02:44,480 --> 00:02:46,420 so something shows up when we open the file, 67 67 00:02:46,420 --> 00:02:48,290 which we're gonna do in a moment. 68 68 00:02:48,290 --> 00:02:50,480 I've added three new elements inside the body, 69 69 00:02:50,480 --> 00:02:51,800 an H1 element, 70 70 00:02:51,800 --> 00:02:54,700 which is the most important title in the page, 71 71 00:02:54,700 --> 00:02:57,690 and two P elements, which are for paragraphs. 72 72 00:02:57,690 --> 00:03:00,280 We're gonna discuss both of these later on. 73 73 00:03:00,280 --> 00:03:02,293 Let me open up the page though first. 74 74 00:03:06,130 --> 00:03:08,610 If we open the page now you can see that the title 75 75 00:03:08,610 --> 00:03:11,020 looks larger and bolder, 76 76 00:03:11,020 --> 00:03:12,810 and the paragraphs look smaller 77 77 00:03:12,810 --> 00:03:15,940 and they are slightly separated from each other. 78 78 00:03:15,940 --> 00:03:19,330 That's because my browser is applying some default CSS 79 79 00:03:19,330 --> 00:03:23,640 styles to the H1 elements and the P elements. 80 80 00:03:23,640 --> 00:03:25,700 My Browser thinks that because the H1 81 81 00:03:25,700 --> 00:03:28,260 is the most important title, it should be larger and bolder, 82 82 00:03:28,260 --> 00:03:29,260 which makes sense, 83 83 00:03:29,260 --> 00:03:31,010 but we can change these styles later on. 84 84 00:03:31,010 --> 00:03:32,430 We could make all of these look the same 85 85 00:03:32,430 --> 00:03:33,263 if we wanted to, 86 86 00:03:33,263 --> 00:03:35,580 or we can make them look completely different, 87 87 00:03:35,580 --> 00:03:38,763 but first let's add a bit more code to the HTML file. 88 88 00:03:42,380 --> 00:03:43,760 So in fact there's quite a bit of code, 89 89 00:03:43,760 --> 00:03:45,770 but this is the new element here. 90 90 00:03:45,770 --> 00:03:47,780 We've got another paragraph and inside it 91 91 00:03:47,780 --> 00:03:49,390 we've got some plain text. 92 92 00:03:49,390 --> 00:03:52,310 And then we've also got another element, 93 93 00:03:52,310 --> 00:03:55,530 an I element, and it stands for idiomatic text. 94 94 00:03:55,530 --> 00:03:58,410 And here I've added the attribute, lang=la 95 95 00:03:58,410 --> 00:04:02,270 to tell the browser that this is some Latin text. 96 96 00:04:02,270 --> 00:04:03,630 This can be particularly helpful 97 97 00:04:03,630 --> 00:04:05,340 for things like screen readers, 98 98 00:04:05,340 --> 00:04:07,190 and also since it's a separate tag, 99 99 00:04:07,190 --> 00:04:09,480 it means that we can apply a different style to it. 100 100 00:04:09,480 --> 00:04:12,320 If we want to later on using CSS. 101 101 00:04:12,320 --> 00:04:15,390 The block quote element also has a lang=la, 102 102 00:04:15,390 --> 00:04:18,130 because this is all Latin text. 103 103 00:04:18,130 --> 00:04:21,640 A block quote is used to quote someone or in someplace else 104 104 00:04:21,640 --> 00:04:24,050 so we're also going to apply some different styles to it, 105 105 00:04:24,050 --> 00:04:27,020 to make that clear to a reader of the page. 106 106 00:04:27,020 --> 00:04:27,950 Finally, at the bottom, 107 107 00:04:27,950 --> 00:04:31,170 we've got an anchor or A element to link away 108 108 00:04:31,170 --> 00:04:33,400 to the original site or someplace else. 109 109 00:04:33,400 --> 00:04:35,930 Here we're linking to lipsum.com. 110 110 00:04:35,930 --> 00:04:38,840 The href attribute is the link that the user will navigate 111 111 00:04:38,840 --> 00:04:40,220 to when they click. 112 112 00:04:40,220 --> 00:04:42,470 And what they're gonna click on is the text 113 113 00:04:42,470 --> 00:04:45,780 that is inside the content of the element. 114 114 00:04:45,780 --> 00:04:47,390 Note that as well as plain text here, 115 115 00:04:47,390 --> 00:04:50,720 we've got a span and an emoji inside the span. 116 116 00:04:50,720 --> 00:04:53,860 This is just so we can style the emoji slightly differently 117 117 00:04:53,860 --> 00:04:55,070 to the text. 118 118 00:04:55,070 --> 00:04:56,310 Okay so I'm gonna refresh the page 119 119 00:04:56,310 --> 00:04:58,960 and we're gonna see this appear here. 120 120 00:04:58,960 --> 00:05:00,830 And you can see that the block quote element 121 121 00:05:00,830 --> 00:05:03,010 has a slightly different style from the paragraphs, 122 122 00:05:03,010 --> 00:05:05,330 it's slightly indented in there. 123 123 00:05:05,330 --> 00:05:07,110 and you can see that the link there 124 124 00:05:07,110 --> 00:05:10,440 looks just like a traditional link back from 1990s. 125 125 00:05:10,440 --> 00:05:13,660 And the emoji is just off-center. 126 126 00:05:13,660 --> 00:05:15,310 So this is slightly annoying to me. 127 127 00:05:15,310 --> 00:05:17,450 That's why we've put this span in here and we're gonna 128 128 00:05:17,450 --> 00:05:20,780 slightly nudge it to make it centred with the text. 129 129 00:05:20,780 --> 00:05:23,460 So you can see that this page doesn't look so good, 130 130 00:05:23,460 --> 00:05:24,530 but it does load. 131 131 00:05:24,530 --> 00:05:28,600 Now we're going to use CSS to change the default styles 132 132 00:05:28,600 --> 00:05:32,730 that my browser is applying and add some custom styles. 133 133 00:05:32,730 --> 00:05:35,770 So, first of all, I'm going to bring back the sidebar here. 134 134 00:05:35,770 --> 00:05:38,920 I'm gonna create a page called style.CSS. 135 135 00:05:38,920 --> 00:05:40,660 And now that we've got this created, 136 136 00:05:40,660 --> 00:05:45,110 we have to go into the HTML file and link to the CSS file. 137 137 00:05:45,110 --> 00:05:46,630 So I'm just gonna close this again. 138 138 00:05:46,630 --> 00:05:49,260 And now what we're gonna do is right here in the head, 139 139 00:05:49,260 --> 00:05:51,130 we're going to add the link. 140 140 00:05:51,130 --> 00:05:54,060 So I'm just gonna copy that and put it in here. 141 141 00:05:54,060 --> 00:05:56,600 You can see we've added a link tag. 142 142 00:05:56,600 --> 00:05:59,430 The relationship type is stylesheet, 143 143 00:05:59,430 --> 00:06:02,070 this tells us that we're gonna load a CSS file 144 144 00:06:02,070 --> 00:06:05,290 and the href here is what file we're loading. 145 145 00:06:05,290 --> 00:06:06,620 Because they're both in the same folder 146 146 00:06:06,620 --> 00:06:08,270 we can just put the file name there 147 147 00:06:08,270 --> 00:06:09,330 and it'll load just fine. 148 148 00:06:09,330 --> 00:06:10,510 But if it was in a different folder, 149 149 00:06:10,510 --> 00:06:11,860 we'd have to change things up a bit. 150 150 00:06:11,860 --> 00:06:14,260 We'll go into more detail later on. 151 151 00:06:14,260 --> 00:06:17,710 CSS is made up of selectors and properties. 152 152 00:06:17,710 --> 00:06:20,890 A selector tells the browser which element to modify 153 153 00:06:20,890 --> 00:06:24,130 and a property modifies a particular style of the element. 154 154 00:06:24,130 --> 00:06:26,270 So, for example, if we could have this, 155 155 00:06:26,270 --> 00:06:29,100 we put the body selector and then inside curly braces, 156 156 00:06:29,100 --> 00:06:30,890 we put the properties one in each line, 157 157 00:06:30,890 --> 00:06:32,640 separated by semi-colons. 158 158 00:06:32,640 --> 00:06:35,270 Here we're changing the font size of the body element 159 159 00:06:35,270 --> 00:06:37,330 to be 36 pixels. 160 160 00:06:37,330 --> 00:06:39,530 So if we save this and we refresh the page, 161 161 00:06:39,530 --> 00:06:41,250 everything gets much bigger. 162 162 00:06:41,250 --> 00:06:42,990 Obviously we don't really want to do this, 163 163 00:06:42,990 --> 00:06:46,001 but you can see that we've targeted the body element, 164 164 00:06:46,001 --> 00:06:47,560 we've changed the font size, and the font sizes 165 165 00:06:47,560 --> 00:06:49,860 of all the paragraphs, and the block quotes, 166 166 00:06:49,860 --> 00:06:51,130 and everything has changed. 167 167 00:06:51,130 --> 00:06:54,170 That is because font-size is an inheritable property. 168 168 00:06:54,170 --> 00:06:57,360 So when we change a parent element or a container, 169 169 00:06:57,360 --> 00:06:59,960 then it also changes the stuff underneath. 170 170 00:06:59,960 --> 00:07:02,240 And we're gonna look into inheritable properties 171 171 00:07:02,240 --> 00:07:05,000 in much more detail later on as well, of course. 172 172 00:07:05,000 --> 00:07:06,480 But let's change this slightly 173 173 00:07:06,480 --> 00:07:08,790 because we don't really want the text to be this big, 174 174 00:07:08,790 --> 00:07:10,800 so I'm gonna change it into this. 175 175 00:07:10,800 --> 00:07:12,240 We're changing the font family, 176 176 00:07:12,240 --> 00:07:14,600 this allows us to change the type of font that we're using, 177 177 00:07:14,600 --> 00:07:16,460 the font size to 16 pixels. 178 178 00:07:16,460 --> 00:07:19,630 The maximum width of the element is gonna be 576 pixels 179 179 00:07:19,630 --> 00:07:22,980 and then we're gonna set some margins. 180 180 00:07:22,980 --> 00:07:25,640 So what this does is it limits the maximum width 181 181 00:07:25,640 --> 00:07:28,110 of the element to this size. 182 182 00:07:28,110 --> 00:07:30,430 And then when we apply margin: 0 auto, 183 183 00:07:30,430 --> 00:07:33,120 it's going to remove the margins or the space 184 184 00:07:33,120 --> 00:07:34,300 at the top and at the bottom, 185 185 00:07:34,300 --> 00:07:36,870 and it's gonna calculate the space at the left and right 186 186 00:07:36,870 --> 00:07:40,210 to be the maximum it can so that they're equal, 187 187 00:07:40,210 --> 00:07:43,030 that way we centre the element in the page. 188 188 00:07:43,030 --> 00:07:44,860 You can see also that the font family has changed, 189 189 00:07:44,860 --> 00:07:48,680 that now it's the default Windows font, which is Segoe UI. 190 190 00:07:48,680 --> 00:07:50,550 If Apple system doesn't exist, 191 191 00:07:50,550 --> 00:07:52,650 then we go onto BlinkMacSystemFont. 192 192 00:07:52,650 --> 00:07:55,540 If that doesn't exist, then we go to Segoe UI and so forth. 193 193 00:07:55,540 --> 00:07:57,500 Because I'm on Windows these two fonts 194 194 00:07:57,500 --> 00:07:59,110 are not installed in my computer 195 195 00:07:59,110 --> 00:08:01,500 so the browser is gonna use this one. 196 196 00:08:01,500 --> 00:08:03,450 If this one didn't exist, this would go to the next one 197 197 00:08:03,450 --> 00:08:04,610 and so on. 198 198 00:08:04,610 --> 00:08:06,850 Let's add a couple more styles to the paragraphs 199 199 00:08:06,850 --> 00:08:08,830 and the block quote. 200 200 00:08:08,830 --> 00:08:10,920 Here what we're doing is we're changing the line height 201 201 00:08:10,920 --> 00:08:13,050 and the margin at the bottom of each paragraph, 202 202 00:08:13,050 --> 00:08:15,750 so that they're slightly more separated from each other. 203 203 00:08:15,750 --> 00:08:16,840 And also the block quote 204 204 00:08:16,840 --> 00:08:18,480 is gonna have a slightly different margin 205 205 00:08:18,480 --> 00:08:20,770 and also a border on the side. 206 206 00:08:20,770 --> 00:08:23,320 You can see that we've also changed the text to italics 207 207 00:08:23,320 --> 00:08:25,240 just to make it look a bit more like a quote. 208 208 00:08:25,240 --> 00:08:27,110 And you can see that this HTML page is starting to look 209 209 00:08:27,110 --> 00:08:30,060 much better than it did without any CSS, 210 210 00:08:30,060 --> 00:08:30,950 but all we've done really 211 211 00:08:30,950 --> 00:08:33,880 is changed a few spacing properties. 212 212 00:08:33,880 --> 00:08:35,830 Again, if not everything makes sense at this point, 213 213 00:08:35,830 --> 00:08:38,480 I don't expect it to, and just don't worry about it. 214 214 00:08:38,480 --> 00:08:40,960 We're gonna look into each of these properties in detail, 215 215 00:08:40,960 --> 00:08:43,130 as we go through the course. 216 216 00:08:43,130 --> 00:08:44,820 Let's also change the link. 217 217 00:08:44,820 --> 00:08:46,840 At the moment this link looks a little bit plain 218 218 00:08:46,840 --> 00:08:51,160 so we're gonna add some styles to display it in a block. 219 219 00:08:51,160 --> 00:08:54,140 Display block makes it take up 100% of the width 220 220 00:08:54,140 --> 00:08:56,940 of the container, so it's gonna go from left to right. 221 221 00:08:56,940 --> 00:08:59,810 At the moment it only occupies this size there. 222 222 00:08:59,810 --> 00:09:01,210 So if we refresh now, 223 223 00:09:01,210 --> 00:09:04,490 you can see that it occupies the entire space there, 224 224 00:09:04,490 --> 00:09:07,090 but because we've added width: fit-content, 225 225 00:09:07,090 --> 00:09:09,870 then it's going to be limited to the content size 226 226 00:09:09,870 --> 00:09:13,600 but within sort of the 100% width there. 227 227 00:09:13,600 --> 00:09:16,180 We're gonna look into that in more detail later on as well. 228 228 00:09:16,180 --> 00:09:18,380 We've given it a background colour and some padding 229 229 00:09:18,380 --> 00:09:21,470 to separate the text from the sides of the element 230 230 00:09:21,470 --> 00:09:25,280 and that allows us to give it this button-like look. 231 231 00:09:25,280 --> 00:09:27,140 However, notice that when we hover over it, 232 232 00:09:27,140 --> 00:09:30,790 although a cursor of a hand does appear, 233 233 00:09:30,790 --> 00:09:32,730 it doesn't seem all that clickable. 234 234 00:09:32,730 --> 00:09:33,660 So we're gonna change that. 235 235 00:09:33,660 --> 00:09:35,860 In order to make it look even more clickable 236 236 00:09:35,860 --> 00:09:37,890 we're gonna add a different set of styles 237 237 00:09:37,890 --> 00:09:41,570 when we hover over, or when we put our mouse over the button 238 238 00:09:41,570 --> 00:09:42,403 or the link. 239 239 00:09:42,403 --> 00:09:44,070 So now when I go over it, 240 240 00:09:44,070 --> 00:09:45,800 a small shadow appears underneath, 241 241 00:09:45,800 --> 00:09:47,340 and that makes it look much more clickable. 242 242 00:09:47,340 --> 00:09:48,890 It sort of pops out at you 243 243 00:09:48,890 --> 00:09:51,660 and makes you believe that it can be clicked. 244 244 00:09:51,660 --> 00:09:53,640 Notice that changing the styles here 245 245 00:09:53,640 --> 00:09:56,120 does not change the HTML at all. 246 246 00:09:56,120 --> 00:09:58,970 So this is still just a link and when you click it, 247 247 00:09:58,970 --> 00:10:03,590 you go to the link that the href property was linking to. 248 248 00:10:03,590 --> 00:10:06,550 But look how the emoji there is not quite centred 249 249 00:10:06,550 --> 00:10:08,160 with the text, it's just a bit too low. 250 250 00:10:08,160 --> 00:10:09,600 So we have to nudge it into place, 251 251 00:10:09,600 --> 00:10:12,190 and to do that, we're gonna use that span 252 252 00:10:12,190 --> 00:10:13,770 that had a class of .finger. 253 253 00:10:13,770 --> 00:10:15,970 We're going to target that element there 254 254 00:10:15,970 --> 00:10:17,840 and we're gonna just make a couple of changes there 255 255 00:10:17,840 --> 00:10:21,763 to separate it and now it does appear centred. 256 256 00:10:22,710 --> 00:10:24,180 So that's about everything for this lecture. 257 257 00:10:24,180 --> 00:10:25,890 I know that we've gone really quickly, 258 258 00:10:25,890 --> 00:10:28,780 but the aim was to show you that HTML and CSS 259 259 00:10:28,780 --> 00:10:30,150 are completely separate, 260 260 00:10:30,150 --> 00:10:31,840 and you can change almost everything 261 261 00:10:31,840 --> 00:10:33,320 about your page with CSS. 262 262 00:10:33,320 --> 00:10:35,970 I wanted to show you what that really looks like. 263 263 00:10:35,970 --> 00:10:38,140 So thank you very much for joining me in this video. 264 264 00:10:38,140 --> 00:10:39,540 If you're confused and you don't know 265 265 00:10:39,540 --> 00:10:41,290 really what's going on, don't worry, 266 266 00:10:41,290 --> 00:10:44,090 we're going to go into everything step by step 267 267 00:10:44,090 --> 00:10:45,580 and everything is going to be clear 268 268 00:10:45,580 --> 00:10:47,400 as we go through the next few sections. 269 269 00:10:47,400 --> 00:10:49,350 So thank you very much for joining me in this video. 270 270 00:10:49,350 --> 00:10:52,000 Thanks for watching and I'll see you in the next one.