1 00:00:00,239 --> 00:00:02,100 Instructor: Now, I hope you had a play around 2 00:00:02,100 --> 00:00:04,320 with this example website 3 00:00:04,320 --> 00:00:08,520 where you could toggle the CSS on and off. 4 00:00:08,520 --> 00:00:13,520 How exactly did I add CSS to this plain HTML website? 5 00:00:14,137 --> 00:00:16,770 Well, that is what we're gonna be learning about 6 00:00:16,770 --> 00:00:18,450 in this lesson. 7 00:00:18,450 --> 00:00:23,450 There's three ways of adding CSS into an HTML website, 8 00:00:23,603 --> 00:00:28,603 inline, internal, and external. 9 00:00:29,220 --> 00:00:31,320 We're gonna be exploring all three 10 00:00:31,320 --> 00:00:33,930 of these different styles of adding CSS, 11 00:00:33,930 --> 00:00:36,300 and I'm gonna show you why they're important, 12 00:00:36,300 --> 00:00:40,110 and in which situations you would use which one. 13 00:00:40,110 --> 00:00:45,090 Now, the first one is the inline style of adding CSS. 14 00:00:45,090 --> 00:00:46,290 As the name suggests, 15 00:00:46,290 --> 00:00:51,290 it goes into the same line as a particular HTML element. 16 00:00:51,600 --> 00:00:55,740 So in this case, you can see we've got an HTML open tag 17 00:00:55,740 --> 00:00:58,590 and an HTML closing tag. 18 00:00:58,590 --> 00:01:01,560 Now, we know from learning about HTML boilerplate, 19 00:01:01,560 --> 00:01:05,790 this is an element that goes into all of our HTML documents. 20 00:01:05,790 --> 00:01:08,520 There's nothing special about this particular element. 21 00:01:08,520 --> 00:01:09,810 It just tells the browser 22 00:01:09,810 --> 00:01:13,233 that this file is made up of HTML. 23 00:01:13,233 --> 00:01:14,970 Now in this case, 24 00:01:14,970 --> 00:01:19,970 the inline CSS goes into the opening tag of the HTML. 25 00:01:21,390 --> 00:01:24,360 This is where the CSS exists. 26 00:01:24,360 --> 00:01:27,813 It's in the same line as the HTML tag. 27 00:01:28,800 --> 00:01:33,800 What the in-line CSS looks like is something like this. 28 00:01:35,220 --> 00:01:39,000 You've got a style attribute, 29 00:01:39,000 --> 00:01:42,870 which is an attribute that is globally available 30 00:01:42,870 --> 00:01:47,460 to all tags, not just HTML, but anything else. 31 00:01:47,460 --> 00:01:51,660 Image or break or anything you can think of, 32 00:01:51,660 --> 00:01:54,660 you can add the style attribute to it. 33 00:01:54,660 --> 00:01:57,450 As we know, normally attributes look like this. 34 00:01:57,450 --> 00:02:01,770 They have a name of the attribute, 35 00:02:01,770 --> 00:02:04,368 then we add the equal sign, 36 00:02:04,368 --> 00:02:09,032 and then finally we add a value for the attribute. 37 00:02:10,139 --> 00:02:14,700 In this value section is where we add our CSS code. 38 00:02:14,700 --> 00:02:18,390 Our CSS code is broken down like this. 39 00:02:18,390 --> 00:02:23,390 The first part of it is the property that you want to change 40 00:02:25,230 --> 00:02:30,000 and the second part is the value of that property 41 00:02:30,000 --> 00:02:31,473 that you want to set it to. 42 00:02:32,580 --> 00:02:34,350 So in this case, what we're trying to do 43 00:02:34,350 --> 00:02:38,670 is to set our website's background to blue, 44 00:02:38,670 --> 00:02:42,450 and if I go ahead and run this code 45 00:02:42,450 --> 00:02:44,550 and load it up in a browser, 46 00:02:44,550 --> 00:02:48,120 you would simply see a website that has a blue background, 47 00:02:48,120 --> 00:02:51,573 and this is achieved using our inline CSS. 48 00:02:52,470 --> 00:02:56,880 Inline elements are really useful for adding CSS style 49 00:02:56,880 --> 00:03:01,680 to just a single element on your HTML page. 50 00:03:01,680 --> 00:03:04,140 But normally that's quite cumbersome, 51 00:03:04,140 --> 00:03:05,430 because as you can imagine, 52 00:03:05,430 --> 00:03:07,980 there's tons of different HTML elements. 53 00:03:07,980 --> 00:03:09,990 If you have more and more of them 54 00:03:09,990 --> 00:03:12,480 and you wanted them to share similar styles, 55 00:03:12,480 --> 00:03:15,420 then you would have to add these inline styles 56 00:03:15,420 --> 00:03:18,060 to each and every single one of them, 57 00:03:18,060 --> 00:03:19,980 which is pretty tedious. 58 00:03:19,980 --> 00:03:23,700 It's not normally recommended to use inline styles 59 00:03:23,700 --> 00:03:25,920 in your entire document. 60 00:03:25,920 --> 00:03:29,610 It's only for specific sections or when you're testing 61 00:03:29,610 --> 00:03:33,210 or when you only want it in one single element 62 00:03:33,210 --> 00:03:36,510 or one line in your HTML document. 63 00:03:36,510 --> 00:03:39,450 Now the second way you can add CSS is 64 00:03:39,450 --> 00:03:42,570 through what's called internal CSS. 65 00:03:42,570 --> 00:03:46,410 Now this is done through a special HTML tag 66 00:03:46,410 --> 00:03:48,660 called the style element. 67 00:03:48,660 --> 00:03:52,800 We've got an open style tag and a closing style tag, 68 00:03:52,800 --> 00:03:55,620 and in between those two lines 69 00:03:55,620 --> 00:03:58,980 is where we add all of our CSS. 70 00:03:58,980 --> 00:04:02,700 All of this is our CSS. 71 00:04:02,700 --> 00:04:05,640 This CSS looks a little bit different 72 00:04:05,640 --> 00:04:08,011 from what you saw previously, right? 73 00:04:08,011 --> 00:04:11,790 Because previously all we had was this line. 74 00:04:11,790 --> 00:04:12,623 Now, in this case, 75 00:04:12,623 --> 00:04:14,730 we've got something a little bit extra here. 76 00:04:14,730 --> 00:04:16,380 Why is that? 77 00:04:16,380 --> 00:04:21,380 Well, this is because last time when we had the CSS rule, 78 00:04:21,839 --> 00:04:26,220 we had it inline inside a particular element. 79 00:04:26,220 --> 00:04:29,910 So we said for this HTML element, 80 00:04:29,910 --> 00:04:32,343 we want to apply a background color. 81 00:04:33,240 --> 00:04:36,030 Now in this case, it's a little bit different 82 00:04:36,030 --> 00:04:40,200 because our internal style can apply to anywhere 83 00:04:40,200 --> 00:04:43,230 within the same HTML document. 84 00:04:43,230 --> 00:04:45,690 So it could go into any of these elements, 85 00:04:45,690 --> 00:04:47,580 the HTML or the head 86 00:04:47,580 --> 00:04:51,300 or anything that you've got coming up later on as well. 87 00:04:51,300 --> 00:04:56,300 What we have to add in addition is what we call a selector, 88 00:04:56,970 --> 00:05:01,970 and this selector comes before a set of curly braces 89 00:05:02,010 --> 00:05:05,130 and then the CSS goes in between 90 00:05:05,130 --> 00:05:07,710 these two sets of curly braces. 91 00:05:07,710 --> 00:05:11,130 Now, when I say in between a set of curly braces, 92 00:05:11,130 --> 00:05:15,330 you have to imagine it a little bit like this. 93 00:05:15,330 --> 00:05:17,460 This is the opening curly brace, 94 00:05:17,460 --> 00:05:19,710 and this is the closing curly brace, 95 00:05:19,710 --> 00:05:22,770 and if you had it all on one line, 96 00:05:22,770 --> 00:05:25,380 then it would look something like this 97 00:05:25,380 --> 00:05:30,030 with your CSS going in between on multiple lines. 98 00:05:30,030 --> 00:05:34,140 That's why we open and close them on separate lines. 99 00:05:34,140 --> 00:05:36,360 But if you imagine it as one line, 100 00:05:36,360 --> 00:05:38,523 then it would look something like this. 101 00:05:39,510 --> 00:05:42,360 Our internal styling can apply 102 00:05:42,360 --> 00:05:45,581 to anywhere in our HTML document, 103 00:05:45,581 --> 00:05:49,770 and inside, we can target or select 104 00:05:49,770 --> 00:05:51,900 as many elements as we want. 105 00:05:51,900 --> 00:05:56,400 We could say, let's apply the background red to the HTML 106 00:05:56,400 --> 00:05:59,580 and when this code is rendered in the browser, 107 00:05:59,580 --> 00:06:04,140 you'll see the background of the entire HTML turn red. 108 00:06:04,140 --> 00:06:06,240 Internal styles are really useful 109 00:06:06,240 --> 00:06:10,770 for applying it only to one HTML document. 110 00:06:10,770 --> 00:06:14,580 As you can see, this style and any code that goes in there 111 00:06:14,580 --> 00:06:18,360 is limited to the HTML that it sits in. 112 00:06:18,360 --> 00:06:21,810 So it means if you have a multi-page website, 113 00:06:21,810 --> 00:06:25,920 then you probably shouldn't be using the internal style. 114 00:06:25,920 --> 00:06:27,630 Instead, you should be using 115 00:06:27,630 --> 00:06:31,950 something called an external CSS styling. 116 00:06:31,950 --> 00:06:32,970 Now, the biggest difference 117 00:06:32,970 --> 00:06:37,770 between the external and the internal and the inline styles 118 00:06:37,770 --> 00:06:42,510 is that this actually lives in a completely separate file, 119 00:06:42,510 --> 00:06:47,010 which you'll normally see as style.css, or main.css, 120 00:06:47,010 --> 00:06:51,483 or anything that has a .css extension. 121 00:06:52,410 --> 00:06:57,410 Inside this CSS file is where we write our CSS rules, 122 00:06:57,450 --> 00:07:01,380 so we've got our selector, we've got our property, 123 00:07:01,380 --> 00:07:03,060 and we've got values, 124 00:07:03,060 --> 00:07:06,720 and we can make many, many of these inside this file. 125 00:07:06,720 --> 00:07:10,380 Now how do we link up the style sheet file 126 00:07:10,380 --> 00:07:13,350 with our index.html? 127 00:07:13,350 --> 00:07:17,940 Well, inside the head section of our HTML, 128 00:07:17,940 --> 00:07:20,550 we would add a link element, 129 00:07:20,550 --> 00:07:23,370 which you'll notice is a self-closing tag 130 00:07:23,370 --> 00:07:26,250 so it doesn't need a closing tag, 131 00:07:26,250 --> 00:07:29,280 and we have two things that we normally write. 132 00:07:29,280 --> 00:07:32,464 One, which is a relationship, 133 00:07:32,464 --> 00:07:35,490 which refers to what is the role 134 00:07:35,490 --> 00:07:38,651 of this thing that we are linking to? 135 00:07:38,651 --> 00:07:41,940 And the second thing is the href, 136 00:07:41,940 --> 00:07:45,693 which is where is it located? 137 00:07:45,693 --> 00:07:49,140 In this case, we're saying it's in the same directory, 138 00:07:49,140 --> 00:07:53,460 and it's inside a file called styles.css, 139 00:07:53,460 --> 00:07:56,850 which points to this file right here, 140 00:07:56,850 --> 00:07:59,790 and when we go ahead and run this 141 00:07:59,790 --> 00:08:01,590 and show it in the browser, 142 00:08:01,590 --> 00:08:06,590 you'll see it turns our HTML's background to a green color. 143 00:08:07,320 --> 00:08:10,290 And this style of external CSS 144 00:08:10,290 --> 00:08:13,440 is what's used most commonly in web development, 145 00:08:13,440 --> 00:08:15,600 and this is what we're gonna be focusing on 146 00:08:15,600 --> 00:08:16,950 most of the time. 147 00:08:16,950 --> 00:08:19,920 But it's important to be aware of the other two styles, 148 00:08:19,920 --> 00:08:23,730 the inline, the internal, 149 00:08:23,730 --> 00:08:26,070 because you'll see it out there in the wild 150 00:08:26,070 --> 00:08:28,320 in other people's CSS code. 151 00:08:28,320 --> 00:08:30,660 So remember, inline is really useful 152 00:08:30,660 --> 00:08:34,878 when you only want to target a single element, 153 00:08:34,878 --> 00:08:37,140 and internal is really useful 154 00:08:37,140 --> 00:08:40,563 when you only want to target a single webpage. 155 00:08:42,090 --> 00:08:46,620 But for most cases, and when you have a multi-page website, 156 00:08:46,620 --> 00:08:47,850 then what you're gonna need 157 00:08:47,850 --> 00:08:51,300 is the external way of adding CSS 158 00:08:51,300 --> 00:08:54,120 through the use of a separate file, 159 00:08:54,120 --> 00:08:58,350 which will be called something-something.css, 160 00:08:58,350 --> 00:09:00,030 and it's inside this file 161 00:09:00,030 --> 00:09:02,760 where you're going to be writing the CSS code 162 00:09:02,760 --> 00:09:06,330 that can target an entire website 163 00:09:06,330 --> 00:09:08,913 with all of its multiple web pages. 164 00:09:09,870 --> 00:09:11,220 So these are the three ways 165 00:09:11,220 --> 00:09:15,150 that you can add CSS to your HTML documents. 166 00:09:15,150 --> 00:09:17,820 And don't worry, we're gonna be practicing this 167 00:09:17,820 --> 00:09:20,040 and all of its forms many, many times 168 00:09:20,040 --> 00:09:22,593 so that you understand how it works. 169 00:09:23,430 --> 00:09:27,240 Let's try an exercise and see how to add CSS 170 00:09:27,240 --> 00:09:30,273 in various different ways to our HTML file. 171 00:09:31,500 --> 00:09:33,390 All right, so once you've downloaded 172 00:09:33,390 --> 00:09:36,240 and extracted the project file 173 00:09:36,240 --> 00:09:38,280 and open it inside VS Code, 174 00:09:38,280 --> 00:09:40,590 you should see this folder, 175 00:09:40,590 --> 00:09:43,440 and here, notice there are five files 176 00:09:43,440 --> 00:09:46,230 that have already been created for you. 177 00:09:46,230 --> 00:09:49,050 And in this exercise, there is a little bit of revision 178 00:09:49,050 --> 00:09:53,100 about creating multiple, about file paths, 179 00:09:53,100 --> 00:09:54,450 but more importantly, 180 00:09:54,450 --> 00:09:56,310 we want you to practice 181 00:09:56,310 --> 00:09:59,910 using the three different ways of adding CSS, 182 00:09:59,910 --> 00:10:04,110 inline, internal, and external. 183 00:10:04,110 --> 00:10:06,450 So starting inside index.html, 184 00:10:06,450 --> 00:10:09,720 the first thing I want you to do is to create three links 185 00:10:09,720 --> 00:10:12,569 to the three different webpages, 186 00:10:12,569 --> 00:10:16,500 this one, this one, and this one. 187 00:10:16,500 --> 00:10:18,030 And once you've done that, 188 00:10:18,030 --> 00:10:21,210 then you can go inside each of those webpages, 189 00:10:21,210 --> 00:10:25,800 so starting with the inline, and then internal, external. 190 00:10:25,800 --> 00:10:27,450 And you're going to follow the instruction 191 00:10:27,450 --> 00:10:29,250 that the H1 tells you to. 192 00:10:29,250 --> 00:10:32,880 So in this case, we want to use inline styling 193 00:10:32,880 --> 00:10:36,213 in order to style this H1 in blue. 194 00:10:37,080 --> 00:10:39,480 And then you get to go to the internal, 195 00:10:39,480 --> 00:10:43,230 and do the same thing, but this time using internal styling 196 00:10:43,230 --> 00:10:45,150 and styling the H1 in red, 197 00:10:45,150 --> 00:10:48,000 and then finally using external styling, 198 00:10:48,000 --> 00:10:50,580 using this style.css file, 199 00:10:50,580 --> 00:10:53,850 and styling the H1 in green. 200 00:10:53,850 --> 00:10:54,930 If you want to take a look 201 00:10:54,930 --> 00:10:57,450 at what the final outcome will look like, 202 00:10:57,450 --> 00:10:59,550 you can go into the solution folder, 203 00:10:59,550 --> 00:11:03,570 right click on the solution.html, and show preview, 204 00:11:03,570 --> 00:11:06,000 and then make sure that you collapse this solution folder, 205 00:11:06,000 --> 00:11:09,300 because having all of it out, two versions of each file, 206 00:11:09,300 --> 00:11:11,040 is very confusing, 207 00:11:11,040 --> 00:11:13,080 so I recommend just collapsing that folder 208 00:11:13,080 --> 00:11:14,820 so you don't get confused. 209 00:11:14,820 --> 00:11:16,830 And this is what you are aiming for. 210 00:11:16,830 --> 00:11:19,350 On the index.html, which is the homepage, 211 00:11:19,350 --> 00:11:22,380 we've got an H1 and then we've got three links, 212 00:11:22,380 --> 00:11:24,330 and if we click on each of these, 213 00:11:24,330 --> 00:11:26,430 you can see they've got an H1 214 00:11:26,430 --> 00:11:28,770 that says, "Style Me in Blue," "Style Me in Red," 215 00:11:28,770 --> 00:11:30,060 and green, 216 00:11:30,060 --> 00:11:31,350 and we're going to achieve that 217 00:11:31,350 --> 00:11:35,010 using the three different ways of adding CSS. 218 00:11:35,010 --> 00:11:38,310 Once you're ready, go ahead and download the starting files 219 00:11:38,310 --> 00:11:41,640 and give this challenge a go. 220 00:11:41,640 --> 00:11:42,903 Pause the video now. 221 00:11:45,330 --> 00:11:46,950 All right, so how did that go? 222 00:11:46,950 --> 00:11:49,020 I'm gonna run through the solution code with you 223 00:11:49,020 --> 00:11:52,050 to explain some of the things that you would need to do 224 00:11:52,050 --> 00:11:53,610 to complete this challenge. 225 00:11:53,610 --> 00:11:57,990 The first thing we said was to style the homepage. 226 00:11:57,990 --> 00:12:00,270 So we added in three anchor tags, 227 00:12:00,270 --> 00:12:03,090 which is how we create links, 228 00:12:03,090 --> 00:12:04,950 and once we did that, 229 00:12:04,950 --> 00:12:09,480 we were able to use the href of each of the anchor tags 230 00:12:09,480 --> 00:12:13,770 in order to link to the relevant webpage. 231 00:12:13,770 --> 00:12:18,390 The first one links to the inline webpage, inline.html, 232 00:12:18,390 --> 00:12:22,951 internal, external, and we use the dot slash notation 233 00:12:22,951 --> 00:12:26,670 in order to reach within the current folder. 234 00:12:26,670 --> 00:12:29,880 So solution.html lives inside solution, 235 00:12:29,880 --> 00:12:32,310 and in this case, in order to get to inline.html, 236 00:12:32,310 --> 00:12:34,800 we use the dot slash to get to this folder, 237 00:12:34,800 --> 00:12:39,753 and then we forward slash to go to inline.html right here. 238 00:12:41,430 --> 00:12:43,620 Now, once you've created your three links, 239 00:12:43,620 --> 00:12:48,390 the next stage is to go into the first webpage, inline, 240 00:12:48,390 --> 00:12:52,170 and here we want to style that H1 using CSS, 241 00:12:52,170 --> 00:12:54,690 but adding it inline. 242 00:12:54,690 --> 00:12:59,690 As I said, it's in the literal line of the H1 element 243 00:12:59,940 --> 00:13:03,150 so it only applies to this H1 element, 244 00:13:03,150 --> 00:13:05,820 and we've added it in right here, 245 00:13:05,820 --> 00:13:08,640 saying that the style should be set 246 00:13:08,640 --> 00:13:12,723 so that the color of this text is blue. 247 00:13:13,710 --> 00:13:16,170 And remember that the inline style goes 248 00:13:16,170 --> 00:13:21,170 in the opening tag of the element that you want to target. 249 00:13:24,810 --> 00:13:26,910 The next one is internal. 250 00:13:26,910 --> 00:13:29,430 So we add internal styling 251 00:13:29,430 --> 00:13:34,430 usually by putting it inside the head section, 252 00:13:34,470 --> 00:13:38,940 so between the open and closing tags of the head element. 253 00:13:38,940 --> 00:13:42,810 And this is a convention that most developers will stick to, 254 00:13:42,810 --> 00:13:44,190 although this will work 255 00:13:44,190 --> 00:13:47,160 no matter where you put the style element. 256 00:13:47,160 --> 00:13:50,610 So here we've got an open and closing style tag, 257 00:13:50,610 --> 00:13:54,390 and in between we've added in our CSS. 258 00:13:54,390 --> 00:13:57,120 So we're saying that our selector 259 00:13:57,120 --> 00:14:00,420 is going to select all the H1 on this page, 260 00:14:00,420 --> 00:14:02,070 of which there is only one, 261 00:14:02,070 --> 00:14:06,210 and we're going to change its text color to red. 262 00:14:06,210 --> 00:14:09,270 And finally we've got the final version, 263 00:14:09,270 --> 00:14:11,550 which is the external HTML, 264 00:14:11,550 --> 00:14:15,360 and we do this by creating a link element, 265 00:14:15,360 --> 00:14:19,620 right again, inside the head section of your website. 266 00:14:19,620 --> 00:14:21,450 We establish the relationship, 267 00:14:21,450 --> 00:14:23,430 is we're setting up a style sheet, 268 00:14:23,430 --> 00:14:25,890 and then we provide a href 269 00:14:25,890 --> 00:14:29,820 to the location where our style sheet is located, 270 00:14:29,820 --> 00:14:32,520 which is in the current directory, 271 00:14:32,520 --> 00:14:35,490 and then it's in a file called style.CSS, 272 00:14:35,490 --> 00:14:38,223 so we can see that right here. 273 00:14:39,240 --> 00:14:42,420 And inside here, we've again targeted the H1 274 00:14:42,420 --> 00:14:44,493 and we've set the color to green, 275 00:14:45,570 --> 00:14:46,950 and all of that together 276 00:14:46,950 --> 00:14:51,840 creates these different web pages in our multi-page website 277 00:14:51,840 --> 00:14:56,840 with the code that sets the style in three different ways. 278 00:14:56,850 --> 00:14:58,410 So did you get that right? 279 00:14:58,410 --> 00:15:00,210 If you had any issues at all, 280 00:15:00,210 --> 00:15:02,250 be sure to go back into your code 281 00:15:02,250 --> 00:15:04,500 and fix anything that was wrong 282 00:15:04,500 --> 00:15:06,150 and make sure that you've understood 283 00:15:06,150 --> 00:15:09,660 the three different ways of adding CSS. 284 00:15:09,660 --> 00:15:11,490 In the next lesson, we're gonna learn more 285 00:15:11,490 --> 00:15:13,260 about the different selectors 286 00:15:13,260 --> 00:15:17,400 that we can use to select different parts of our HTML file. 287 00:15:17,400 --> 00:15:20,607 So for all of that and more, I'll see you there.