1 00:00:00,900 --> 00:00:06,140 It's time to flaunt your inner designer because we're about to learn some success. 2 00:00:07,140 --> 00:00:13,050 To start off, I want to show you this website, if you look at it well, it's it's quite, quite pretty. 3 00:00:15,360 --> 00:00:16,810 Look at that, that's really nice. 4 00:00:17,490 --> 00:00:22,530 Now, hopefully in the future, we can create something like this, but I want to show you what this 5 00:00:22,530 --> 00:00:24,940 website will look like without success. 6 00:00:32,230 --> 00:00:37,780 Pretty impressive, right, with just success, you'll be able to create something like this. 7 00:00:39,110 --> 00:00:40,400 So let's get started to Shelly. 8 00:00:43,290 --> 00:00:48,540 I've created here for us a simple website, nothing that we haven't seen before. 9 00:00:48,570 --> 00:00:57,030 You can see that I have created semantic tags with header nav, an unordered list that has some links, 10 00:00:57,660 --> 00:01:02,760 a PITA and a P tag that's wrapped in another semantic tag called section. 11 00:01:03,570 --> 00:01:05,820 OK, so again, nothing crazy. 12 00:01:05,820 --> 00:01:11,670 If I go to the Web page, it's the exact same thing except for the about Elai doesn't have an anchor 13 00:01:11,670 --> 00:01:13,470 tag and then same with login. 14 00:01:14,500 --> 00:01:23,150 OK, so let's talk about success, the way that we would add success to something like this is while 15 00:01:23,160 --> 00:01:25,540 we create a successful so let's do that. 16 00:01:25,810 --> 00:01:29,920 I'm going to create a new file that I'm going to save. 17 00:01:30,220 --> 00:01:33,550 Let's call it style dot success. 18 00:01:34,650 --> 00:01:42,480 If I save that, you'll see at the bottom over here that sublime text now has CSX as the file to. 19 00:01:43,840 --> 00:01:49,630 The rules with success are very simple, we essentially have a selecter. 20 00:01:51,240 --> 00:01:56,850 And then we have these squiggly brackets, and within it we put our property. 21 00:01:57,810 --> 00:02:04,560 Semicolon and then value, and then we have this special character as well at the end, and that is 22 00:02:04,560 --> 00:02:05,720 pretty much success. 23 00:02:05,730 --> 00:02:12,900 You know this you can write access just like a GML, just a couple of syntactic rules. 24 00:02:13,110 --> 00:02:15,980 And once you get used to it, it's very, very simple. 25 00:02:16,650 --> 00:02:19,380 But obviously this doesn't really mean anything. 26 00:02:19,390 --> 00:02:21,410 So let's write actual code here. 27 00:02:21,930 --> 00:02:27,090 I'm going to comment that out by again, doing command slash and sublime text. 28 00:02:27,090 --> 00:02:30,690 You can see that the commenting is different than in HTML. 29 00:02:31,230 --> 00:02:36,210 And let's say that we want to make this home text read. 30 00:02:36,510 --> 00:02:41,760 The way we would do it is we want to select what's called the selector. 31 00:02:42,420 --> 00:02:46,620 So here we want to say that the two we want that to be read. 32 00:02:47,040 --> 00:02:50,760 So all I would say is H to curly brackets. 33 00:02:50,760 --> 00:02:52,680 And then within here I want to say the property. 34 00:02:52,680 --> 00:02:56,580 I want to change the color to the value that is read. 35 00:03:00,390 --> 00:03:08,520 And refresh, well, nothing happens, and that's obvious, right, because how does this file know 36 00:03:08,520 --> 00:03:10,400 that this file exists? 37 00:03:10,710 --> 00:03:15,030 We have to link it somehow and we do that in the head. 38 00:03:15,030 --> 00:03:18,840 And we haven't talked too much about the hash tag element in the section. 39 00:03:19,260 --> 00:03:27,680 But by now, you can probably tell that head just contains information about what the page needs. 40 00:03:27,840 --> 00:03:35,850 Maybe not the stuff that we see on a Web page other than the title, but meta tags and information that 41 00:03:35,850 --> 00:03:36,930 we need or the website. 42 00:03:37,910 --> 00:03:48,470 OK, so in here, we can actually link to this stylesheet that we call style that comes with a link 43 00:03:48,470 --> 00:03:48,740 to. 44 00:03:49,770 --> 00:03:57,900 And this link tag allows us to link this ASML file to something else, and again, so biotech's has 45 00:03:57,900 --> 00:03:59,000 something very useful here. 46 00:03:59,010 --> 00:04:00,000 If I had tab. 47 00:04:01,050 --> 00:04:03,150 Look at that, it auto fills it for me. 48 00:04:03,210 --> 00:04:08,730 These are the standard attributes that you'll see to link to success, so you just have to get used 49 00:04:08,730 --> 00:04:11,310 to it and eventually become second nature. 50 00:04:11,610 --> 00:04:15,750 So we have our yelle here, which is the ad Ambatovy for relation. 51 00:04:15,780 --> 00:04:19,620 It just specifies what relationship this link will have. 52 00:04:19,620 --> 00:04:21,150 And we have the default style sheet. 53 00:04:21,840 --> 00:04:24,390 And then for the type this is the media type. 54 00:04:24,660 --> 00:04:27,210 We want to say that it's a text file. 55 00:04:27,220 --> 00:04:33,000 We're essentially telling e-mail, hey, just a heads up we're linking to access file here and then 56 00:04:33,000 --> 00:04:33,680 the ref. 57 00:04:33,750 --> 00:04:34,850 This should be familiar. 58 00:04:34,860 --> 00:04:36,810 We're going to link to Starbucks. 59 00:04:37,200 --> 00:04:40,850 So if I type in style dot coms. 60 00:04:47,140 --> 00:04:54,610 Turns red, and just to let you know, that index, that e-mail is in the same folder as style that 61 00:04:54,610 --> 00:05:00,090 counts, we can check it over here if I click on exercise, you see that? 62 00:05:00,220 --> 00:05:00,580 Yep. 63 00:05:00,670 --> 00:05:03,440 I have style that success with the index citation. 64 00:05:06,150 --> 00:05:06,600 Perfect. 65 00:05:07,090 --> 00:05:13,140 OK, now what if we also want to make the paragraph over here, this Hypercolor as well? 66 00:05:13,650 --> 00:05:18,780 Well, again, we would do The Selecter and then we'll do Caulder and let's do pink. 67 00:05:19,660 --> 00:05:23,150 I save refresh and it's pink. 68 00:05:23,680 --> 00:05:24,610 Hopefully you can see that. 69 00:05:25,690 --> 00:05:31,120 You also see here that sublime text does some really nice coloring for us, so if I for example, I 70 00:05:31,120 --> 00:05:37,120 put a prop. that doesn't exist like a misspelled color, well, you see that it doesn't highlight it 71 00:05:37,120 --> 00:05:38,560 properly with the blue color. 72 00:05:38,710 --> 00:05:40,120 And you know that you've made a mistake. 73 00:05:40,120 --> 00:05:42,190 Again, another great feature of sublime text. 74 00:05:42,520 --> 00:05:46,000 So success, what what does it actually stand for? 75 00:05:46,030 --> 00:05:50,560 Well, it stands for cascading style sheets and style sheets. 76 00:05:50,560 --> 00:05:52,840 That makes sense that we're creating style sheets. 77 00:05:52,850 --> 00:05:54,490 But what does cascading mean? 78 00:05:55,280 --> 00:06:01,120 Well, cascading means that it always takes the selecter. 79 00:06:01,570 --> 00:06:02,950 That is at the end. 80 00:06:03,990 --> 00:06:07,750 And that's simplified terms, but I want to demonstrate for you what that means. 81 00:06:08,220 --> 00:06:12,510 So let's say at the bottom over here, I do this again paragraph. 82 00:06:12,750 --> 00:06:15,090 I want color to be green. 83 00:06:16,030 --> 00:06:18,350 Well, if I save this, what do you think will happen? 84 00:06:18,460 --> 00:06:19,360 Let's refresh and see. 85 00:06:20,860 --> 00:06:23,060 It turns green and why is that? 86 00:06:23,080 --> 00:06:29,580 Well, because it's cascading, it's saying, OK, I'll set two to read, OK? 87 00:06:29,680 --> 00:06:31,660 I'll set paragraph to pink. 88 00:06:32,780 --> 00:06:40,370 And then it says, OK, I'll set P to green so you can see here as it trickles down and cascades, it 89 00:06:40,370 --> 00:06:44,750 takes the last input that it receives for a specific selecter. 90 00:06:45,690 --> 00:06:52,320 We'll get more into the cascading effects of success in a later video, but I want you to understand 91 00:06:52,320 --> 00:06:54,300 the basic concept around it. 92 00:06:54,770 --> 00:06:58,170 OK, I also wanted to show you something cool they can do with credit. 93 00:06:58,170 --> 00:07:02,580 And we did this in the first couple of video series, but now you'll actually understand what I mean. 94 00:07:02,620 --> 00:07:06,110 So, again, view developer developer tools. 95 00:07:06,420 --> 00:07:10,850 And from now on, I'll be using this shortcut to open it and you'll be able to do it as well. 96 00:07:12,760 --> 00:07:18,400 And if you remember, we have our style tab, and if you click on the style tab, we have the room on 97 00:07:18,400 --> 00:07:22,120 the left, stools over here and nothing for the styles. 98 00:07:22,630 --> 00:07:24,940 But if I now go into my. 99 00:07:26,080 --> 00:07:29,720 Home and I click on that, it'll show you color red. 100 00:07:30,550 --> 00:07:39,460 So Google Chrome, which allows us to see our styles so I can even add stuff here and I could say background 101 00:07:39,520 --> 00:07:40,280 color. 102 00:07:41,220 --> 00:07:43,330 Let's do black. 103 00:07:44,270 --> 00:07:44,760 Look at that. 104 00:07:45,230 --> 00:07:50,780 So this is a really good way to play with your website and add colors you can check and uncheck here. 105 00:07:51,020 --> 00:07:57,020 And also if you see something on a website that you really, really like, you can go to that element. 106 00:07:57,110 --> 00:07:58,590 Let's let's try it off here. 107 00:07:58,610 --> 00:07:59,570 Let's go to. 108 00:08:00,770 --> 00:08:03,770 Wait, but why dotcom? 109 00:08:05,530 --> 00:08:09,790 And let's say that we really, really want to know how. 110 00:08:10,880 --> 00:08:13,850 This was made we can right click. 111 00:08:17,530 --> 00:08:23,480 Will take us exactly to that element and then we can see here some of the properties, the properties 112 00:08:23,480 --> 00:08:24,230 that they've used. 113 00:08:25,240 --> 00:08:29,320 And same here, you can see that the background color is this and so on and so forth. 114 00:08:30,500 --> 00:08:31,930 OK, let's close that for now. 115 00:08:33,350 --> 00:08:38,010 The last thing I want to leave you with is what if this closes? 116 00:08:38,450 --> 00:08:44,480 What if I also want the above page to have stars? 117 00:08:44,780 --> 00:08:46,160 And same with the login page. 118 00:08:46,160 --> 00:08:52,220 As you can see, there's no style for these ones, but we want the same thing for the about and login 119 00:08:52,220 --> 00:08:52,580 page. 120 00:08:53,210 --> 00:08:56,270 Well, as you can imagine, we copy the link tag. 121 00:08:57,510 --> 00:08:59,040 And we go to about. 122 00:09:00,230 --> 00:09:06,050 We link it on to here and then log in, we can again link it here. 123 00:09:06,080 --> 00:09:12,680 I save both of these files and now if I refresh and go to about look at that. 124 00:09:12,980 --> 00:09:13,880 We have our styles. 125 00:09:15,010 --> 00:09:19,720 And you may be wondering, well, what if I want different styles for maybe for the logging, I want 126 00:09:19,720 --> 00:09:20,750 this to be blue instead? 127 00:09:21,460 --> 00:09:24,430 Well, we can actually create multiple style sheets. 128 00:09:24,580 --> 00:09:32,920 So I can say, for example, let's create a new file and we'll call it style to success. 129 00:09:33,500 --> 00:09:34,390 I say that. 130 00:09:34,720 --> 00:09:39,100 And this time I'm going to say that I want my to. 131 00:09:40,020 --> 00:09:41,010 To have color. 132 00:09:43,020 --> 00:09:53,220 I say that I go into my login e-mail and now I'll make login reference the second stylesheet instead 133 00:09:53,220 --> 00:09:53,850 of the first one. 134 00:09:54,720 --> 00:09:56,310 So now if I refresh. 135 00:09:57,580 --> 00:10:06,130 Log-in is referencing our style to excess, but all the other ones are still referencing the old one. 136 00:10:06,340 --> 00:10:13,210 OK, Ally, there is one last thing that I want to add, and that is that this is the common way of 137 00:10:13,210 --> 00:10:14,200 adding styles. 138 00:10:14,620 --> 00:10:20,050 But there is actually two other ways that you won't see us often, especially when you're starting off. 139 00:10:20,380 --> 00:10:23,500 But I wanted to show it to you so that you're not surprised. 140 00:10:24,600 --> 00:10:31,350 The first way of doing it is something called inline styles, and this was the original way that we 141 00:10:31,350 --> 00:10:38,640 incorporate as styles into our e-mail, and that is by specifying within the element, let's say let's 142 00:10:38,640 --> 00:10:39,950 go with head over here. 143 00:10:40,860 --> 00:10:42,330 We want to say style. 144 00:10:42,450 --> 00:10:43,800 So it has a style attribute. 145 00:10:44,640 --> 00:10:49,860 And then within here we can do background color. 146 00:10:51,910 --> 00:10:57,550 Let's do green and refresh, and we're at the about page right now, we change that for index that I 147 00:10:57,550 --> 00:10:58,070 assume also. 148 00:10:58,090 --> 00:11:00,130 Let's go over here and look at that. 149 00:11:00,160 --> 00:11:01,390 We have the green background. 150 00:11:02,230 --> 00:11:07,240 And if you want to add more, again, we do color red. 151 00:11:07,570 --> 00:11:10,960 Let's save and refresh and look at that. 152 00:11:11,710 --> 00:11:13,960 The header has the color red. 153 00:11:13,960 --> 00:11:19,120 And you'll see here that these ones are still purple because they are linked tags and they have the 154 00:11:19,120 --> 00:11:20,110 default linking. 155 00:11:20,570 --> 00:11:22,900 OK, so that's one way. 156 00:11:23,710 --> 00:11:27,490 And the third and last way is in the head. 157 00:11:27,490 --> 00:11:32,950 You can actually create style tags and then within these style tags. 158 00:11:34,290 --> 00:11:42,030 You can enter CCWs, so if you just refresh here, so we have a fresh, clean slate, I can now say 159 00:11:42,060 --> 00:11:43,740 all the P tags. 160 00:11:43,980 --> 00:11:45,290 All right, let's do Elai this time. 161 00:11:45,300 --> 00:11:54,210 So all the lists I want the lists to have background color of purple. 162 00:11:55,640 --> 00:12:02,110 So if I save this and refresh, everything is purple and that looks pretty yucky. 163 00:12:02,190 --> 00:12:07,700 You can keep adding stuff on here and I can say color white, save refresh. 164 00:12:08,030 --> 00:12:10,280 And it changed the color to white. 165 00:12:11,540 --> 00:12:17,480 Now, you may be wondering, why don't we just do it like this, this seems a lot simpler than linking 166 00:12:17,480 --> 00:12:19,040 to another case file. 167 00:12:19,970 --> 00:12:25,550 Well, the reason is that for this website, everything is fairly small, is just a couple of lines 168 00:12:25,550 --> 00:12:26,150 of success. 169 00:12:26,150 --> 00:12:31,370 But you can imagine with websites, as they get bigger and bigger, you'll have hundreds and hundreds 170 00:12:31,370 --> 00:12:32,900 of lines of success. 171 00:12:33,050 --> 00:12:37,640 And having one massive file will be very, very challenging to maintain. 172 00:12:38,210 --> 00:12:44,810 You can also think of it as if you are working on an e-mail and you also had a team of designers that 173 00:12:44,810 --> 00:12:46,610 were working on a case file. 174 00:12:46,910 --> 00:12:53,870 You want to have a separation where you have some team members working on the success and then some 175 00:12:53,870 --> 00:12:56,540 team members working on the e-mail. 176 00:12:56,900 --> 00:13:00,080 And that is a concept called separation of concerns. 177 00:13:00,110 --> 00:13:04,550 It's a fancy way of saying that everybody just worry about what they're good at. 178 00:13:04,910 --> 00:13:08,760 So ASML just worry about text and assess. 179 00:13:09,620 --> 00:13:11,000 Just worry about. 180 00:13:11,690 --> 00:13:17,270 This phrase separation of concerns is something that will encounter throughout later videos when we 181 00:13:17,270 --> 00:13:19,220 get into JavaScript and react. 182 00:13:19,220 --> 00:13:25,070 And it's a very, very important concept in web development and computer science in general. 183 00:13:25,070 --> 00:13:26,630 So we will get back to that. 184 00:13:26,630 --> 00:13:30,950 But, you know, that will be a phrase that will keep coming up. 185 00:13:31,520 --> 00:13:32,210 So for now. 186 00:13:33,500 --> 00:13:39,830 Let's delete this, let's keep things the way that we have it, let's refresh and in the next video, 187 00:13:39,830 --> 00:13:45,860 I'm going to show you a couple of Texas properties that are more exciting than just color and background. 188 00:13:46,370 --> 00:13:48,070 I've seen that one by.