1 00:00:05,350 --> 00:00:10,150 Welcome back in this lecture we're going to start off our discussion by talking about the very basics 2 00:00:10,210 --> 00:00:17,980 of CSX CSA stands for cascading style sheets and it's a style sheet language used for describing the 3 00:00:17,980 --> 00:00:21,530 presentation of a document written in H. 4 00:00:21,940 --> 00:00:28,000 But basically that means is that CSSA allows us to change style attributes of to him l elements and 5 00:00:28,000 --> 00:00:32,980 that can be things like the color of an element the background of an element the borders of an element 6 00:00:33,100 --> 00:00:34,870 and much much more. 7 00:00:34,870 --> 00:00:39,970 First we need to do is actually create a CSSA file in order to effect those style attributes. 8 00:00:40,980 --> 00:00:46,200 So the very basics as far as the steps we need to take is we're going to create a file for Dotsie SS 9 00:00:46,260 --> 00:00:50,790 extension then we're going to use CSSA syntax to link element tags. 10 00:00:51,010 --> 00:00:57,030 Then we're going to add style attribute name value pairs such as connecting the color attribute to a 11 00:00:57,030 --> 00:00:59,590 specific value like red or blue. 12 00:00:59,640 --> 00:01:06,610 And then finally we connect that CSSA document to our HVM l through a call in the head of the HMO. 13 00:01:06,750 --> 00:01:10,180 Now I know it sounds like a lot but in practice it's actually very simple. 14 00:01:10,350 --> 00:01:15,520 Let's get started by heading over to our text editor right here am back at the text editor and they 15 00:01:15,530 --> 00:01:18,410 have my browser linked to the H Tim L file. 16 00:01:18,470 --> 00:01:24,660 What I'm going to do is just type up h tim will enter so it has the auto complete and then inside the 17 00:01:24,660 --> 00:01:25,470 body. 18 00:01:25,470 --> 00:01:33,880 I'm going to add a few elements I'll add a Heading 1 and say this is the heading and then I will add 19 00:01:33,880 --> 00:01:35,880 a paragraph to that as well. 20 00:01:37,340 --> 00:01:42,140 And the paragraph will say let's see a list. 21 00:01:42,220 --> 00:01:44,650 Then after that I'll have an ordered list. 22 00:01:45,850 --> 00:01:52,450 And then inside this ordered list I have a few list items such as Item 1 and let's add two more items 23 00:01:52,450 --> 00:01:52,930 here. 24 00:01:54,080 --> 00:02:02,940 Item to and then Item 3 and then below this ordered list let's add one more thing we'll say heading 25 00:02:02,940 --> 00:02:08,410 for and I'm asking a straight up type heading for OK. 26 00:02:08,420 --> 00:02:13,790 I save that I'm going to refresh my browser and now I see this link to the HMO. 27 00:02:13,910 --> 00:02:14,660 This is the heading. 28 00:02:14,690 --> 00:02:18,480 Let's see a list item one two and three and then heading for. 29 00:02:18,800 --> 00:02:25,640 Now what I'm going to do is try to affect the style properties of these Timah elements using CSSA and 30 00:02:25,640 --> 00:02:28,790 the way I do that is first I need to create a new file. 31 00:02:28,910 --> 00:02:34,880 So if I open up my left hand tab here notice under this folder flask examples I have basic Laddie's 32 00:02:34,920 --> 00:02:35,640 Timo. 33 00:02:35,900 --> 00:02:40,960 I'm going to create a new file here and you can really call this whatever you want. 34 00:02:41,050 --> 00:02:45,270 I'm going to call it Master dot C Ss. 35 00:02:45,450 --> 00:02:47,250 Again the actual name doesn't matter. 36 00:02:47,250 --> 00:02:50,480 You just need to make sure that you're ending it with Dot CSSA. 37 00:02:50,580 --> 00:02:55,190 That way Adam knows that you're talking about SS or a stylesheet file. 38 00:02:55,540 --> 00:03:04,080 Ok so I have this master that CSSA file what I want to do is add property value pairs to this and the 39 00:03:04,080 --> 00:03:07,000 general format is the following. 40 00:03:07,020 --> 00:03:10,950 You have some sort of selected tag such as H-1. 41 00:03:11,010 --> 00:03:14,160 So this is a tag that's in my name I'll file. 42 00:03:14,160 --> 00:03:18,530 Here we see the H-1 tag and then you have curly braces. 43 00:03:18,630 --> 00:03:24,420 Open and close curly braces and then inside of these curly braces Usually you'll see it formatted like 44 00:03:24,420 --> 00:03:24,680 this. 45 00:03:24,690 --> 00:03:27,220 If you hit enter you have the open and close. 46 00:03:27,450 --> 00:03:31,400 And here is where you have those property value pairs. 47 00:03:31,410 --> 00:03:36,180 So for example one of the really common properties is the color property. 48 00:03:36,180 --> 00:03:42,600 So every single A-stan mint usually has some sort of color property you can mess around with or change. 49 00:03:42,600 --> 00:03:47,330 So you have the property and then you'll say colon and then the actual value. 50 00:03:47,340 --> 00:03:48,970 This property should have. 51 00:03:48,990 --> 00:03:52,040 So for example colors can be names or coats. 52 00:03:52,230 --> 00:03:56,220 So I'll say blue and then to end this I have a semi-colon. 53 00:03:56,400 --> 00:04:00,110 So that way I know I have this single property value pairing. 54 00:04:00,110 --> 00:04:01,300 So check this out. 55 00:04:01,580 --> 00:04:06,470 I then to save this you'll notice if I refreshed my page I don't see anything change. 56 00:04:06,600 --> 00:04:11,930 And that's because I haven't linked this dot CSSA file to my basic but each team l file. 57 00:04:12,120 --> 00:04:14,010 So let's go ahead and show you how you can do that. 58 00:04:14,880 --> 00:04:22,840 What you do is inside of this head block in between the opening head tag and the closing head Ted you're 59 00:04:22,860 --> 00:04:27,650 going to start with a link and you can hit enter here and have it auto complete this link. 60 00:04:27,770 --> 00:04:31,500 I'm going to collapse that sidebar so we can see the whole thing. 61 00:04:31,800 --> 00:04:37,510 And basically a link right here is a self-closing tag doesn't have the closing tags just a single tag. 62 00:04:37,860 --> 00:04:43,410 And we have some sort of relationship attribute and it's saying stylesheet we want to keep that because 63 00:04:43,410 --> 00:04:50,100 this is going to tell the HTL hey this link it's a stylesheet implement those styles on the T.M.. 64 00:04:50,130 --> 00:04:52,120 What we need to change is this breath. 65 00:04:52,290 --> 00:04:56,600 Basically this is where you provide the file path to your thoughts CSSA file. 66 00:04:56,850 --> 00:05:03,720 And right now I'm just going to say it's under M. thought SS Remember you're gonna need to provide whatever 67 00:05:03,720 --> 00:05:05,570 you called your C Ss file. 68 00:05:05,580 --> 00:05:08,800 You should also know that right now this master CSSA file. 69 00:05:08,850 --> 00:05:14,130 If I expand this tab again it's in the exact same folder location as my H Tim L file. 70 00:05:14,220 --> 00:05:16,380 So that's why I just need to provide its name. 71 00:05:16,390 --> 00:05:19,660 That's VSS all right so let's check this out. 72 00:05:19,690 --> 00:05:22,120 I'm gonna save those changes it makes T.M.. 73 00:05:22,410 --> 00:05:25,990 And now I should have linked my CSSA file successfully to my HMO. 74 00:05:26,190 --> 00:05:27,560 I'm going to refresh. 75 00:05:28,110 --> 00:05:31,660 And now you should see this is the heading turned blue. 76 00:05:31,770 --> 00:05:33,310 So what's actually happening here. 77 00:05:33,540 --> 00:05:38,340 Well the C S S you're saying grab every H-1 elements. 78 00:05:38,550 --> 00:05:45,660 Curly braces and then change these properties to be these values and you can check out resources that 79 00:05:45,660 --> 00:05:48,060 are linked to you in the resource section of this course. 80 00:05:48,060 --> 00:05:54,060 But basically you have resources like W3 schools and the Mozilla and the documentation that shows you 81 00:05:54,120 --> 00:05:57,070 all the various properties and values you can adjust. 82 00:05:57,090 --> 00:06:02,540 We will be missing of too many properties but color is one that you probably want to adjust often. 83 00:06:02,820 --> 00:06:10,910 OK so let's explore how to adjust more property tags or elements in sort of Timo. 84 00:06:10,970 --> 00:06:13,510 So right now we're affecting every single H-1. 85 00:06:13,550 --> 00:06:15,950 Let's see if we can effect list items. 86 00:06:15,950 --> 00:06:25,030 So I'll say I open and close parentheses and then I decide on a property and the value so I can take 87 00:06:25,030 --> 00:06:27,570 in color as a property again. 88 00:06:27,870 --> 00:06:33,030 And there's many string codes you can provide as the actual value but often you are looking for specific 89 00:06:33,030 --> 00:06:37,550 colors maybe not something that you can find in a Crayola box like blue or red. 90 00:06:37,630 --> 00:06:39,630 Instead you want a particular shade. 91 00:06:39,810 --> 00:06:44,550 One way to do this is by defining R.G. be values. 92 00:06:44,600 --> 00:06:48,060 So what this stands for are red green and blue. 93 00:06:48,260 --> 00:06:55,370 So maybe I want a little bit of red in there 30 and then you can go up to 200 and then maybe I don't 94 00:06:55,370 --> 00:06:56,860 want any blue there. 95 00:06:56,990 --> 00:06:59,730 So there's a little bit of red and mostly green. 96 00:06:59,870 --> 00:07:00,940 I'm going to save that. 97 00:07:01,220 --> 00:07:05,460 And then when I save those changes I'm basically saying grab every Leithead. 98 00:07:05,630 --> 00:07:12,680 So that's going to be item one item to item three here and then affect the colors using this RGV scale. 99 00:07:12,680 --> 00:07:18,380 So if I refresh now I see them turn essentially green and what I can do is if I want to affect them 100 00:07:18,470 --> 00:07:21,130 I can add maybe some more blue in there. 101 00:07:21,350 --> 00:07:23,990 So we'll say 100 save that. 102 00:07:24,090 --> 00:07:25,620 And if you refresh. 103 00:07:25,700 --> 00:07:26,760 You should see the changes. 104 00:07:26,780 --> 00:07:31,070 Now right now it's not making a big difference so let's reduce the green to something really small maybe 105 00:07:31,070 --> 00:07:35,300 like 50 save those changes refresh. 106 00:07:35,690 --> 00:07:37,790 And I get to see that blue come in. 107 00:07:37,880 --> 00:07:38,640 OK. 108 00:07:38,750 --> 00:07:41,290 So in other way you can affect colors. 109 00:07:41,560 --> 00:07:42,340 And let's do it now. 110 00:07:42,350 --> 00:07:47,680 The paragraph tag again we choose the tag that we're trying to affect inside the T.M.. 111 00:07:48,320 --> 00:07:49,480 I'll say color. 112 00:07:49,700 --> 00:07:53,730 And another way you can do this is using a hex code to just say hash tag. 113 00:07:53,750 --> 00:07:55,070 And then the hex code. 114 00:07:55,070 --> 00:08:02,210 And if you're unfamiliar if choosing R.G. or hex code values come to your browser and search for Hex 115 00:08:02,210 --> 00:08:08,750 color and you should see a hex color picker automatically show up in Google. 116 00:08:08,780 --> 00:08:14,210 Again that's just hecks color in Google and you'll see this automatically show up and now provides the 117 00:08:14,210 --> 00:08:16,980 hex code as well as the R.G. code. 118 00:08:17,120 --> 00:08:20,440 So you can move this around and choose a color that works for you. 119 00:08:20,450 --> 00:08:22,880 So let's try to choose maybe a unique orange. 120 00:08:23,120 --> 00:08:25,720 So this one is OK. 121 00:08:25,940 --> 00:08:32,000 So going to copy this hex code and then I'll paste it in here. 122 00:08:32,850 --> 00:08:35,300 Inside my CSSA file. 123 00:08:35,430 --> 00:08:39,000 And then what I should do is close this off of a semi colon. 124 00:08:39,000 --> 00:08:42,490 You'll notice they didn't close off the one inside the list of a semi-colon. 125 00:08:42,530 --> 00:08:46,490 Basically you need to use semi-colons when you have more than one property value pairs. 126 00:08:46,620 --> 00:08:51,530 So it's always good just to have them in there even if you only have one property value pair per element. 127 00:08:51,540 --> 00:08:53,120 So let's save those changes. 128 00:08:53,130 --> 00:08:58,620 We'll head back to our basic H-2A model and when I refreshed this now I see the paragraph tag looks 129 00:08:58,620 --> 00:08:59,480 like that orange. 130 00:08:59,490 --> 00:09:00,810 Let's see a list. 131 00:09:01,130 --> 00:09:01,970 OK. 132 00:09:02,040 --> 00:09:05,040 And finally the last one we can affect color. 133 00:09:05,040 --> 00:09:08,030 Let's do on H for that last heading there. 134 00:09:08,070 --> 00:09:10,230 I'll say color Colin. 135 00:09:10,320 --> 00:09:13,920 And then I can also use an R G B A value. 136 00:09:13,920 --> 00:09:18,840 And basically what this allows you to do is add a for value instead of just red green blue. 137 00:09:18,960 --> 00:09:21,960 A For value of transparency. 138 00:09:22,260 --> 00:09:24,160 So that's what Alpha stands for. 139 00:09:24,300 --> 00:09:33,120 So maybe I'll do like 13 ninety one 40 in if I just choose 0 here hit save and then refresh. 140 00:09:33,120 --> 00:09:35,080 You'll notice it looks like heading disappeared. 141 00:09:35,130 --> 00:09:37,880 But it's actually still there it's just fully transparent. 142 00:09:38,190 --> 00:09:42,210 So if you only want it to be maybe half transparent you'll say 0.5. 143 00:09:42,360 --> 00:09:43,310 Save this. 144 00:09:43,350 --> 00:09:45,120 And then when I refresh the page. 145 00:09:45,360 --> 00:09:47,470 Now I can see that it looks a little transparent. 146 00:09:47,790 --> 00:09:54,440 And if I have this fully at one save that and refresh then it has no transparency. 147 00:09:54,540 --> 00:09:58,640 So basically zero is fully transparent and one is fully opaque. 148 00:09:58,860 --> 00:10:05,010 So that's a fourth value you can add in in case you want your font to maybe color wise blend into the 149 00:10:05,010 --> 00:10:06,100 background a little bit. 150 00:10:06,270 --> 00:10:07,450 So that's R.G. B. 151 00:10:07,560 --> 00:10:10,430 And then this alpha parameter for transparency. 152 00:10:10,770 --> 00:10:11,400 OK. 153 00:10:11,610 --> 00:10:14,020 So that's the very basics of a CSSA file. 154 00:10:14,070 --> 00:10:19,760 Again we have to do is we choose the element that we want to affect inside the h m l. 155 00:10:20,070 --> 00:10:22,590 We have these open unclose curly braces. 156 00:10:22,590 --> 00:10:26,960 We choose the property and we'll be exploring different properties throughout these lectures. 157 00:10:27,060 --> 00:10:29,420 And then you choose a value for that property. 158 00:10:29,430 --> 00:10:33,270 Color is one of those properties that has a lot of different types of inputs. 159 00:10:33,300 --> 00:10:37,920 Later on we're going to see other properties that are a little more strict than the type of inputs. 160 00:10:37,920 --> 00:10:42,240 Now that's actually a good thing that we don't need to remember all these different possibilities. 161 00:10:42,240 --> 00:10:47,610 Often what I like to do is just open up that hecks color picker choose a color and then kind of play 162 00:10:47,610 --> 00:10:51,960 around with it and later on we'll learn about bootstrap which has its own default styles. 163 00:10:52,110 --> 00:10:56,870 But once you've created this CSSA file all you need to do is make sure that you've linked to the H team 164 00:10:56,870 --> 00:10:57,400 L. 165 00:10:57,560 --> 00:11:03,240 So you create this link set the relationship to the string stylesheet which is the default and then 166 00:11:03,300 --> 00:11:07,860 make sure your breath is pointing to whatever your CSSA file is called. 167 00:11:07,890 --> 00:11:12,390 OK that's the very basics of creating CSSA and linking it to your Each table. 168 00:11:12,450 --> 00:11:13,600 We'll see you at the next lecture.