1 00:00:01,060 --> 00:00:09,820 Now in the last lesson, we looked at how we can implement a CSS style and apply it to all instances of 2 00:00:09,820 --> 00:00:13,930 a particular HTML element on a single page. 3 00:00:13,930 --> 00:00:23,710 So we changed the style for our horizontal rule and by adding this internal CSS to our index.html page 4 00:00:24,130 --> 00:00:29,920 we managed to affect the style of all the horizontal rules on the same page. 5 00:00:29,920 --> 00:00:37,780 Now we're going to take it one step further and we're going to change our web site that uses internal 6 00:00:37,890 --> 00:00:47,040 CSS to external CSS and to do that we first have to create a new folder in our personal site. 7 00:00:47,260 --> 00:00:51,510 So I'm going to create a new folder that's called simply CSS. 8 00:00:51,790 --> 00:00:58,450 And inside this folder I'm going to create a new file and that file is going to be called 9 00:00:58,490 --> 00:00:59,570 styles.css. 10 00:00:59,590 --> 00:01:06,460 So with that extension the browser will recognize it as a CSS file. 11 00:01:06,460 --> 00:01:14,320 So once you hit Enter you'll see that we have this brand new file called styles.css and we're 12 00:01:14,320 --> 00:01:22,740 going to move our code for the body and the horizontal rule over to this page. 13 00:01:22,870 --> 00:01:28,270 I'm going to hit save and we're going to remove the style tag. 14 00:01:28,510 --> 00:01:35,020 So now if I hit save and I refresh our web site you can see that all the style that we've applied is now 15 00:01:35,140 --> 00:01:40,550 gone because we've deleted it from the style tag in the header. 16 00:01:40,570 --> 00:01:46,250 Now instead what we're going to do is we're going to create a new link. 17 00:01:46,480 --> 00:01:55,630 And if you write link and you hit enter then it will autofill to say that this link has a relationship 18 00:01:56,020 --> 00:01:58,750 of something called the stylesheet. 19 00:01:58,750 --> 00:02:07,000 So when your browser reads your web page it'll go from the top to the bottom and once it hits this line 20 00:02:07,090 --> 00:02:12,540 it’ll see that "oh this is where the stylesheet for this web page resides". 21 00:02:12,610 --> 00:02:16,090 And I can go over here to fetch it. 22 00:02:16,090 --> 00:02:21,610 Now we need to change this href to point towards our styles.css. 23 00:02:21,730 --> 00:02:24,050 So the first thing we need to change is the file name. 24 00:02:24,070 --> 00:02:29,740 Our file’s not called master.css, it’s called styles.css, and the other thing that we 25 00:02:29,740 --> 00:02:33,210 have to change is this forward slash here. 26 00:02:33,210 --> 00:02:41,560 Now if an href starts off with a forward slash then it's pointing towards the root of your web site. 27 00:02:41,820 --> 00:02:45,940 It's saying that you'll find this file inside a folder called css 28 00:02:46,120 --> 00:02:52,330 inside the root of your web site. Now we're going to talk about the root a little bit later on especially 29 00:02:52,330 --> 00:02:54,650 once we start getting into Javascript. 30 00:02:54,910 --> 00:03:01,730 But for now just know that when you have a static web site that's not yet hosted anywhere, 31 00:03:01,900 --> 00:03:04,770 you can't tap into this file using the root. 32 00:03:04,780 --> 00:03:12,730 So instead we're going to say that this file resides in a folder called css and it's on the same level 33 00:03:13,060 --> 00:03:14,860 as this current file. 34 00:03:14,860 --> 00:03:23,680 So index.html is here and on the same level as it there is a folder called css inside of which there 35 00:03:23,680 --> 00:03:29,380 is a file called styles.css and that is going to be our stylesheet. 36 00:03:29,620 --> 00:03:37,840 So your browser then takes this file here then applies all of these styles to the specified elements 37 00:03:38,260 --> 00:03:41,100 inside your index.html. 38 00:03:41,470 --> 00:03:48,050 So let's hit save and let's refresh our page to make sure that it worked. 39 00:03:48,190 --> 00:03:48,990 And it has. 40 00:03:49,120 --> 00:03:53,360 So this is what we call the external CSS. 41 00:03:53,500 --> 00:04:04,510 And if we apply this style sheet to our Contact Me page as well as our Hobbies page then you'll see 42 00:04:04,510 --> 00:04:13,900 that once we go to it then you'll see that all of our styles gets applied across all three pages and 43 00:04:13,930 --> 00:04:21,810 all we have to do is just add this simple link that points towards this external stylesheet. 44 00:04:22,000 --> 00:04:29,340 And anything that we change in this single location will affect all three web pages. 45 00:04:29,470 --> 00:04:35,310 So we'll know that the style is consistent across all three pages. 46 00:04:35,320 --> 00:04:46,510 Now as a challenge I want you to select the h1 and the h3 elements on all three pages and I 47 00:04:46,510 --> 00:04:52,280 want you to change its color property to this particular color that we had on colorhunt. 48 00:04:52,300 --> 00:04:54,620 So 66BFBF. 49 00:04:54,820 --> 00:05:02,130 And by the end of it you should end up with your site looking similar to this where on all three pages 50 00:05:02,460 --> 00:05:08,800 the h1s and the h3s are colored in this new shade. 51 00:05:08,940 --> 00:05:15,660 Now remember if you don't know which CSS property to change or if the property that you're trying to 52 00:05:15,660 --> 00:05:26,790 change isn't working you can always go to Google and say ‘change text color css’ and that will help you 53 00:05:26,790 --> 00:05:29,760 figure out which property you need to change. 54 00:05:29,760 --> 00:05:33,340 So go ahead, pause the video and give it a go. 55 00:05:38,510 --> 00:05:38,870 All right. 56 00:05:38,870 --> 00:05:40,670 So how did that go? 57 00:05:41,000 --> 00:05:46,820 Well if you have any difficulty figuring out which property you need to change, because it's a property 58 00:05:46,820 --> 00:05:48,840 that we haven't used before, 59 00:05:48,980 --> 00:05:54,340 then you needed to look at some of the documentation. 60 00:05:54,710 --> 00:05:59,440 And in this case, for example changing the text using CSS, 61 00:05:59,540 --> 00:06:05,440 the first thing that it talks about is changing the text color, which is exactly what we want to do. 62 00:06:05,570 --> 00:06:12,470 And it tells you that the property that you need is something called color and you can specify the color 63 00:06:12,530 --> 00:06:19,240 just as we did before for the background color with a name or with a hex value or with an RGB value. 64 00:06:19,520 --> 00:06:24,430 So our value that we had was here, which is 66BFBF, 65 00:06:24,650 --> 00:06:29,320 we’re going to copy it and we're going to go into the styles.css, 66 00:06:29,390 --> 00:06:31,590 so our external style sheet, 67 00:06:31,880 --> 00:06:40,650 and we're going to select the element that we want to change which is the h1 as well as the h3. 68 00:06:41,270 --> 00:06:49,410 And the property that we want to change was called color and the value that we're going to give it is the 69 00:06:49,410 --> 00:06:54,790 hex code 66BFBF and we want that to be true 70 00:06:54,900 --> 00:06:56,420 in both cases. 71 00:06:56,460 --> 00:07:04,110 So now if you hit save and you go over to your site and you hit refresh then the black text becomes 72 00:07:04,110 --> 00:07:06,720 that nice green turquoise color. 73 00:07:07,080 --> 00:07:12,670 And the changes are also reflected in Hobbies and Contact Me. 74 00:07:14,240 --> 00:07:16,350 So did you get that right? 75 00:07:16,370 --> 00:07:20,270 Did you manage to figure out which property you needed to change? 76 00:07:20,270 --> 00:07:22,270 If yes then great. 77 00:07:22,340 --> 00:07:29,120 Perfect. If you want to take this challenge even further then you can style the text in more ways than 78 00:07:29,120 --> 00:07:30,490 we've specified here 79 00:07:30,560 --> 00:07:35,330 by looking through the documentation and changing anything that you want to change. 80 00:07:35,580 --> 00:07:40,380 So, for example, it's a bit odd to have the h1 the same color as the h3. 81 00:07:40,580 --> 00:07:45,260 So you could differentiate those two by making the styles of each of them different. 82 00:07:45,260 --> 00:07:52,160 Now if you've created something wonderful, wacky, or completely different from what I have then it's a 83 00:07:52,160 --> 00:07:58,070 good time to show off what you've done and head over to the Q&A section and show all of your fellow 84 00:07:58,080 --> 00:08:05,600 students and post a screenshot of what your web site looks like and which CSS properties you changed 85 00:08:05,660 --> 00:08:07,080 in order to achieve it. 86 00:08:07,100 --> 00:08:13,640 Now in the next lesson we're going to look at some potential bugs that you might come across and ways 87 00:08:13,700 --> 00:08:20,950 in which you can help yourself by diagnosing what the problem is and how you can fix it yourself. 88 00:08:20,990 --> 00:08:25,010 So we're starting to learn about the important skill of debugging. 89 00:08:25,040 --> 00:08:28,640 So for all of that and more I'll see you on the next lesson.