1 00:00:00,700 --> 00:00:01,810 Welcome back everyone. 2 00:00:01,810 --> 00:00:02,500 All right. 3 00:00:02,530 --> 00:00:07,840 So what I'm going to do actually is I'm just going to go ahead and delete this statement because we 4 00:00:07,840 --> 00:00:09,210 don't really need it anymore. 5 00:00:09,530 --> 00:00:14,320 And I'll just go ahead and you know everything works out good here. 6 00:00:14,350 --> 00:00:15,690 I'll just move this over. 7 00:00:15,790 --> 00:00:24,760 Now one thing that we can do is we can actually change the CSX or any style point within javascript 8 00:00:24,760 --> 00:00:26,930 and is actually it's kind of cool. 9 00:00:27,100 --> 00:00:33,220 So what it is is that technically you can do everything within the same HTML file if you really wanted 10 00:00:33,220 --> 00:00:37,740 to you could add the script you can add in the style points etc.. 11 00:00:37,750 --> 00:00:41,370 So essentially if you wanted to change anything here you can do that. 12 00:00:41,380 --> 00:00:44,470 The reason why CSSA and Javascript were invented. 13 00:00:44,800 --> 00:00:48,930 And for the most part why they are in separate files is to make it look a lot easier. 14 00:00:49,020 --> 00:00:49,540 OK. 15 00:00:49,690 --> 00:00:54,510 So as you can see the C Ss remember it changes the style of it so it makes it. 16 00:00:54,690 --> 00:00:58,120 So the short answer is that it makes it look different. 17 00:00:58,120 --> 00:01:03,150 And what I'll do here is I've interchanged this paragraph text. 18 00:01:03,550 --> 00:01:04,780 I'm going to change the color. 19 00:01:04,990 --> 00:01:05,950 So how do we do that. 20 00:01:05,950 --> 00:01:10,460 So again if we just simply run the program here you can see that it works out. 21 00:01:10,810 --> 00:01:17,490 But what we need to do is we need to go ahead and we need to find this here. 22 00:01:17,500 --> 00:01:19,540 Remember we need to find this tag. 23 00:01:19,770 --> 00:01:20,410 OK. 24 00:01:20,440 --> 00:01:28,030 And in order to do that we do document DOT gets elements by ID. 25 00:01:28,070 --> 00:01:29,230 Simple enough. 26 00:01:29,290 --> 00:01:35,010 And then of course which one are we getting we're getting para graph text. 27 00:01:35,270 --> 00:01:44,440 K at this time though we're going to go Dot style because again there are styled in H.M. the restyled 28 00:01:44,500 --> 00:01:51,880 Haig's and in CSSA we essentially take the style takes out so Daut style and then you type in whatever 29 00:01:51,880 --> 00:01:55,680 you want so you can change the background color you know the color etc.. 30 00:01:55,690 --> 00:01:57,020 So let's just change the color. 31 00:01:57,190 --> 00:01:58,360 It's pretty simple. 32 00:01:58,360 --> 00:02:04,680 And we'll change it to maroon and maroon is the most under-rated color. 33 00:02:04,680 --> 00:02:05,600 And there you go. 34 00:02:05,610 --> 00:02:10,710 So if I go ahead and I change something so if I type in any kind of word here I can see that it changes. 35 00:02:10,710 --> 00:02:12,750 Now you may or may not be able to see that. 36 00:02:12,900 --> 00:02:15,570 So I'm going to change it to orange instead. 37 00:02:15,600 --> 00:02:18,900 So we're going to change it to orange like that. 38 00:02:19,050 --> 00:02:20,180 And there we go. 39 00:02:20,530 --> 00:02:20,950 OK. 40 00:02:20,970 --> 00:02:23,990 And you can see that the text changes to orange here. 41 00:02:24,090 --> 00:02:30,150 Now one thing I should probably mention and I have mentioned this in my two male classes is that if 42 00:02:30,150 --> 00:02:40,590 you type in a paragraph here for example and you say this is another para graph like this you can see 43 00:02:40,590 --> 00:02:48,960 that they're both in the same color here because what the CSSA does is it changes the style tags for 44 00:02:49,080 --> 00:02:50,070 everything right. 45 00:02:50,070 --> 00:02:58,320 So if p here which is the paragraph tag we can change it to red and if I change this to you know maroon 46 00:02:58,500 --> 00:03:01,570 like that you can see that they change to Marut. 47 00:03:02,040 --> 00:03:09,240 But when we run this here so I type in the word fun right and you'll see that the top one changes to 48 00:03:09,360 --> 00:03:10,140 orange. 49 00:03:10,290 --> 00:03:12,270 But the bottom one doesn't. 50 00:03:12,570 --> 00:03:17,130 And why is that is because this one has the ID paragraph tag. 51 00:03:17,130 --> 00:03:21,660 Now if I go ahead and copy this paragraph tag and move it down here. 52 00:03:21,660 --> 00:03:22,530 Watch what happens. 53 00:03:22,530 --> 00:03:25,860 I change it to fun and you can see that here. 54 00:03:25,950 --> 00:03:30,230 This one doesn't change just because it's already has an ID right. 55 00:03:30,240 --> 00:03:34,210 It won't change because again it's already being referenced again. 56 00:03:34,410 --> 00:03:38,900 And so for the most part that is how you change style tags with javascript. 57 00:03:38,910 --> 00:03:40,820 I'll see you guys in next tutorial.