1 00:00:05,320 --> 00:00:09,430 Welcome back, everyone, to this lecture, we're going to discuss just basic styling of CSIS. 2 00:00:09,730 --> 00:00:14,200 How do we actually style something any CSI sheet and then connect it to our HTML? 3 00:00:14,410 --> 00:00:15,580 Let's head to our code editor. 4 00:00:16,030 --> 00:00:16,300 All right. 5 00:00:16,329 --> 00:00:19,390 Here I am inside our Visual Studio code editor. 6 00:00:19,690 --> 00:00:22,140 I'm going to create the documents. 7 00:00:22,150 --> 00:00:27,130 So remember, I mentioned that the head of this HTML documentation code. 8 00:00:27,370 --> 00:00:32,380 This is actually going to be where we can add in media information, and it's where we can link files 9 00:00:32,380 --> 00:00:35,800 outside of HTML to connect to the HTML document. 10 00:00:35,890 --> 00:00:37,990 And then we have the body of the document. 11 00:00:38,290 --> 00:00:44,080 Inside the body is where we actually type in the code or elements that will appear on the web page. 12 00:00:44,410 --> 00:00:48,340 For example, I can say heading one and say heading here. 13 00:00:49,380 --> 00:00:53,610 OK, so what I'm going to do is actually view this in our little live preview. 14 00:00:54,180 --> 00:00:56,730 Open that up and I can see heading here. 15 00:00:57,180 --> 00:01:03,570 Now what I'm also going to do is show you how we could style something inside of the temple, but then 16 00:01:03,840 --> 00:01:05,820 show you how to connect X-File to it. 17 00:01:06,210 --> 00:01:12,690 So we already know that if I wanted to change the color of heading here, I would come to this one element 18 00:01:13,470 --> 00:01:14,730 and say style. 19 00:01:16,310 --> 00:01:18,110 And what's excellent, grab the one there. 20 00:01:19,330 --> 00:01:22,840 I would say style and then I would say is equal to. 21 00:01:23,740 --> 00:01:29,050 And then in quotes, we'd have color noticed that code editor actually, or Visual Studio helps us with 22 00:01:29,170 --> 00:01:33,250 different types of style attributes, let's start with color, have color in them and then we could 23 00:01:33,250 --> 00:01:34,770 say color colon. 24 00:01:35,140 --> 00:01:37,120 And then we have a bunch of options here. 25 00:01:37,420 --> 00:01:41,950 So not every single color word is actually built into CSI, but many of the common ones are. 26 00:01:42,280 --> 00:01:44,620 You can see Visual Studio Code has a lot of really helpful tools. 27 00:01:44,830 --> 00:01:46,360 So I'm going to say, let's just say blue. 28 00:01:46,960 --> 00:01:51,100 OK, so that was able to change heading here into blue text. 29 00:01:51,460 --> 00:01:55,780 Now let's say I have another heading one and I say. 30 00:01:57,060 --> 00:01:59,940 Heading to notice this is not blue. 31 00:02:00,480 --> 00:02:05,550 If I wanted to make it blue just within the HTML, I would have to again grab this style and then put 32 00:02:05,550 --> 00:02:06,660 it in the H1 tag. 33 00:02:07,020 --> 00:02:10,770 Clearly, this is not going to be scalable if I have to do this over and over again. 34 00:02:11,130 --> 00:02:17,820 So what I'm going to do is I'm going to create a new file with eight CSS, so we're going to create 35 00:02:17,820 --> 00:02:22,190 a new file here, and I'm going to call it Master CC. 36 00:02:22,230 --> 00:02:23,970 You can technically call the file whatever you want. 37 00:02:24,240 --> 00:02:29,400 I'm calling it master just to indicate that it's the master file for all the HTML on this website. 38 00:02:30,030 --> 00:02:38,850 So say Master CSS and then what I'm going to do here is type in very similar code to what I have here 39 00:02:39,120 --> 00:02:40,260 in heading one. 40 00:02:40,380 --> 00:02:41,760 So I'm going to delete this. 41 00:02:43,000 --> 00:02:49,300 And notice now we don't have any styling, and then I'm going to go into the CSIS file and show you 42 00:02:49,300 --> 00:02:54,190 how to connect the element to a style, then add properties. 43 00:02:54,760 --> 00:02:58,870 So the format for this is you choose your selected element tag. 44 00:02:59,110 --> 00:03:00,970 So, for example, each one. 45 00:03:01,510 --> 00:03:07,180 And then after you choose your selected element tag, you have open and close curly braces. 46 00:03:07,750 --> 00:03:13,660 And then here is where you can begin to list the property and the value assigned to it. 47 00:03:13,870 --> 00:03:16,530 So I would say something like a property like color. 48 00:03:16,810 --> 00:03:18,920 Again, notice visual studio code really helps us out here. 49 00:03:18,950 --> 00:03:24,370 If the variety of properties that have color in them, then you say colon and then an appropriate value. 50 00:03:24,790 --> 00:03:27,490 For example, blue is an OK value here. 51 00:03:27,730 --> 00:03:33,850 Notice I don't need to use quotes anymore inside of the CSV file and then I can use a semicolon essentially 52 00:03:33,850 --> 00:03:36,370 to indicate that it's done for this line. 53 00:03:36,820 --> 00:03:41,110 So I've assigned each one and color should be blue. 54 00:03:41,500 --> 00:03:47,720 Now know that this is going to apply a selection for all the H1 in the HTML. 55 00:03:48,160 --> 00:03:53,050 However, you notice nothing's changed so far because I haven't connected this HTML file. 56 00:03:53,060 --> 00:03:55,300 I haven't linked to the CSS yet. 57 00:03:55,630 --> 00:03:56,530 So how do I do that? 58 00:03:56,710 --> 00:04:03,070 Well, I come back to the HTML and then inside the head of the documents is, where are you going to 59 00:04:03,160 --> 00:04:04,570 create a link tag? 60 00:04:05,440 --> 00:04:06,400 So we're going to say Link. 61 00:04:07,390 --> 00:04:12,310 And note that the relationship by default is going to be stylesheet and we're actually going to keep 62 00:04:12,310 --> 00:04:12,850 it that way. 63 00:04:13,120 --> 00:04:17,890 This just tells the HTML, by the way, what I'm linking you to is going to be a style sheet. 64 00:04:18,130 --> 00:04:20,470 So you should be inheriting style properties from it. 65 00:04:20,920 --> 00:04:27,310 And then the ref is just the reference location of where the style sheet is right now since they're 66 00:04:27,310 --> 00:04:28,180 in the same folder. 67 00:04:28,210 --> 00:04:35,800 I can just type out master the CSS and note that once you actually have this link, suddenly the HTML 68 00:04:35,860 --> 00:04:37,690 is going to be able to apply that styling. 69 00:04:38,110 --> 00:04:42,850 So again, let's kind of do an overview of what we have here in the CSS. 70 00:04:43,180 --> 00:04:46,840 I select some sort of element tag like each one. 71 00:04:47,260 --> 00:04:51,880 Then I have curly braces and here I can begin to list the property I'm interested in. 72 00:04:52,180 --> 00:04:54,850 And then the value I want to assign that property. 73 00:04:55,330 --> 00:04:58,240 Now you may have noticed that I have this little square box. 74 00:04:58,240 --> 00:04:59,050 Again, that's blue. 75 00:04:59,380 --> 00:05:01,310 If you just hover over it, you don't need to click. 76 00:05:01,330 --> 00:05:02,050 You just hover. 77 00:05:02,350 --> 00:05:08,920 Then you'll actually get this red green blue ed, which allows you to manually kind of visually explore. 78 00:05:09,220 --> 00:05:11,350 It also has this transparency. 79 00:05:11,740 --> 00:05:13,220 This is known as alpha. 80 00:05:13,240 --> 00:05:16,090 So how transparent do you actually want this to be? 81 00:05:16,540 --> 00:05:19,930 If you're just putting this on a white background, maybe doesn't make too much sense, but if you have 82 00:05:19,930 --> 00:05:23,110 elements on top of each other, maybe you want some transparency here. 83 00:05:23,320 --> 00:05:27,640 So all the way up to the top, that's fully opaque all the way at the bottom, that's completely transparent 84 00:05:27,640 --> 00:05:28,570 and will disappear. 85 00:05:28,870 --> 00:05:33,760 So just keep that in mind, and then you can also have this little color bar so you can put in your 86 00:05:33,760 --> 00:05:35,770 own custom codes transparency. 87 00:05:35,980 --> 00:05:41,110 So essentially your red, green, blue and alpha levels and kind of messing around with this so you 88 00:05:41,110 --> 00:05:43,570 can get any custom color you want. 89 00:05:44,050 --> 00:05:44,350 OK. 90 00:05:44,890 --> 00:05:46,630 So that's how coloring works. 91 00:05:46,870 --> 00:05:49,330 Again, you select the color property. 92 00:05:49,600 --> 00:05:51,610 You can use an RGV code if you want. 93 00:05:51,880 --> 00:05:55,150 You can also just use a built in color code. 94 00:05:55,480 --> 00:05:56,500 The really common color. 95 00:05:56,500 --> 00:05:57,880 So therefore you like red. 96 00:05:58,240 --> 00:06:03,820 You can also you notice that red has its own hex code, so you can add that in as well if you want it 97 00:06:03,820 --> 00:06:04,090 to. 98 00:06:04,120 --> 00:06:07,920 So maybe you're familiar with picking color codes that way you can use that as well. 99 00:06:07,930 --> 00:06:14,800 You can just say color or something like hashtag FSF and then zero zero zero zero zero, I believe, 100 00:06:14,800 --> 00:06:15,250 is a. 101 00:06:17,740 --> 00:06:18,130 There we go. 102 00:06:18,160 --> 00:06:18,640 That was red. 103 00:06:18,880 --> 00:06:19,710 OK, four zeros. 104 00:06:20,110 --> 00:06:25,060 So you get the idea there's many different ways to define color, but you can also do is if you Google 105 00:06:25,090 --> 00:06:28,720 Hex color picker, that will also allow you to pick colors. 106 00:06:29,080 --> 00:06:34,420 So if you just bring in to Google something that says Hex Color Picker, Google also has the ability 107 00:06:34,420 --> 00:06:40,840 to kind of show you the same thing pick a color, and it shows you the rugby codes, see him white codes 108 00:06:40,990 --> 00:06:42,180 and then tax code here. 109 00:06:42,190 --> 00:06:44,260 So lots of different options on how to pick colors. 110 00:06:44,320 --> 00:06:45,160 It's really up to you. 111 00:06:46,000 --> 00:06:50,170 Now, the other question you may have is what if I have different elements on the page that I still 112 00:06:50,170 --> 00:06:51,400 want to actually color? 113 00:06:51,730 --> 00:06:58,120 So, for example, let's change heading two into an actual heading to elements you notice. 114 00:06:58,150 --> 00:07:02,380 Now it's both a little smaller, but it's also no longer the same color. 115 00:07:02,860 --> 00:07:06,670 So if I wanted to edit the color for heading two, I would just come back to my CC. 116 00:07:08,180 --> 00:07:09,290 Call heading to tag. 117 00:07:10,070 --> 00:07:11,270 And then what I'm going to do. 118 00:07:11,570 --> 00:07:12,440 Curly braces. 119 00:07:12,680 --> 00:07:18,950 And then choose the property I want to edit like color and then change it into some other color like 120 00:07:19,160 --> 00:07:19,550 Brown. 121 00:07:19,800 --> 00:07:20,570 You can see here. 122 00:07:20,870 --> 00:07:23,390 In fact, let's make it really obvious by choosing something like blue. 123 00:07:24,110 --> 00:07:24,410 OK. 124 00:07:24,710 --> 00:07:25,970 And so then we have blue. 125 00:07:27,370 --> 00:07:34,240 If I want to edit multiple properties, I simply say semicolon and then choose another property, another 126 00:07:34,240 --> 00:07:39,010 property that I can edit is the actual background, the background color, so you can set the background 127 00:07:39,010 --> 00:07:39,910 color of an element. 128 00:07:39,910 --> 00:07:41,240 So I can say background color. 129 00:07:41,500 --> 00:07:46,360 I can choose something like, let's make it really obvious, like this lime green or chartreuse. 130 00:07:46,690 --> 00:07:50,740 You can see here now edited the background color, and I'm just using semicolons to separate out. 131 00:07:50,980 --> 00:07:54,100 OK, here's this value or property combination. 132 00:07:54,520 --> 00:07:57,640 Here's this property, and here's that value for it and so on and so on. 133 00:07:58,630 --> 00:08:00,300 So that's it for this lecture. 134 00:08:00,310 --> 00:08:05,710 Again, the very basic idea is you have your HTML, you have elements within the HTML. 135 00:08:05,980 --> 00:08:11,290 You're going to be able to link your HTML to have a stylesheet relationship to another file somewhere 136 00:08:11,290 --> 00:08:11,800 in your computer. 137 00:08:11,800 --> 00:08:12,700 Like that CSS? 138 00:08:12,910 --> 00:08:16,280 If this is located somewhere else, you could use something like C. 139 00:08:16,630 --> 00:08:17,200 Cetera. 140 00:08:17,230 --> 00:08:22,270 Users provide the full file path, but it's usually just better to have them in the same location. 141 00:08:22,900 --> 00:08:26,110 And then you come to see us, you choose the tag or element. 142 00:08:26,110 --> 00:08:29,890 You want to change curly braces and then start listing the properties. 143 00:08:30,400 --> 00:08:34,150 So as we continue, we're going to discover more and more properties that are common to edit. 144 00:08:34,450 --> 00:08:41,440 But if you want to explore just different properties, you can do a Google search for CSS style properties, 145 00:08:41,770 --> 00:08:46,720 and that will essentially give you a full reference so that W3 school is actually pretty good. 146 00:08:47,050 --> 00:08:53,170 You can just Google search again if I go back here, CSS style properties, and then click here for 147 00:08:53,170 --> 00:08:55,660 a full reference on all the different stylings. 148 00:08:56,050 --> 00:09:00,030 So this is why we're not going to go through every single one of these in this course, because that 149 00:09:00,040 --> 00:09:01,270 would just take forever. 150 00:09:01,510 --> 00:09:06,370 But you get the idea that you can begin to search for things like How do I edit this actual style property? 151 00:09:06,370 --> 00:09:07,990 And then you have the references. 152 00:09:08,200 --> 00:09:13,990 There's also one of the development docs here on Mozilla, and then there's CSS properties here. 153 00:09:14,020 --> 00:09:18,580 So if you want it to, for example, change the font size, you would just click here, check out font 154 00:09:18,580 --> 00:09:22,630 size and check out the properties how they work, which we actually will cover later on in the section. 155 00:09:23,290 --> 00:09:23,560 All right. 156 00:09:23,830 --> 00:09:25,370 That's it for this lecture. 157 00:09:25,390 --> 00:09:26,230 I'll see it the next one.