1 00:00:00,680 --> 00:00:07,190 And welcome back, let's make this website a little bit prettier than it is now, and I'm going to introduce 2 00:00:07,190 --> 00:00:09,800 you to some CSFs properties. 3 00:00:10,190 --> 00:00:15,790 Properties are, as the name suggests, properties that we want to change within our Web page. 4 00:00:15,800 --> 00:00:19,670 And you might be asking yourself, you know, how many properties are there? 5 00:00:20,030 --> 00:00:27,560 And as we did with the HTML section, I have a recommended resource for you, and that is CSFs tricks. 6 00:00:28,460 --> 00:00:35,960 This website, any time you Google any questions about access, most likely some of the top 10 answers 7 00:00:35,960 --> 00:00:38,230 are going to include something from this website. 8 00:00:38,420 --> 00:00:46,280 So I highly, highly recommend it, especially if you go to the menu and almanac, because within this 9 00:00:46,280 --> 00:00:51,290 almanac we have all the CSFs properties listed on here. 10 00:00:51,650 --> 00:00:57,350 So any time you have a question and you want to say what is justify content, well, you can click on 11 00:00:57,350 --> 00:01:00,560 it and it will actually give you examples. 12 00:01:00,560 --> 00:01:04,280 You can play around with it and learn about the specific property. 13 00:01:05,180 --> 00:01:10,070 Just like with the HTML tags, although there are way more properties, you don't need to know all of 14 00:01:10,070 --> 00:01:12,930 them and memorize them because that's not realistic. 15 00:01:12,950 --> 00:01:14,420 That's not the best use of your time. 16 00:01:14,720 --> 00:01:17,750 We're going to focus on the ones that you'll encounter most often. 17 00:01:17,930 --> 00:01:23,900 And any time you see new ones pop up while you're working, you can always look them up and learn about 18 00:01:23,900 --> 00:01:26,400 them because they're very, very simple to read into. 19 00:01:27,050 --> 00:01:28,550 So let's try a few of these. 20 00:01:28,910 --> 00:01:35,840 I'm going to start off with our Soldats access over here and let's change a few things. 21 00:01:36,290 --> 00:01:38,660 We want to have our home being the center. 22 00:01:38,840 --> 00:01:40,520 Let's start off with text. 23 00:01:45,280 --> 00:01:47,710 And if I type in center and I save. 24 00:01:48,650 --> 00:01:56,870 My Texana is now centered, OK, we also want to add a border to this image border and this is a little 25 00:01:56,870 --> 00:01:58,070 bit unique. 26 00:01:58,070 --> 00:02:04,580 You can do something like this, you can do five pixels, which is the size of the border, what style 27 00:02:04,580 --> 00:02:10,670 of border you want so you can do Dasht and then the color of the border will do purple. 28 00:02:11,000 --> 00:02:15,290 So I save refresh and we have a border. 29 00:02:15,320 --> 00:02:20,730 You can also do solids and if it's solid, it's a solid border. 30 00:02:21,290 --> 00:02:22,700 OK, what else can we do? 31 00:02:22,720 --> 00:02:26,990 It'll be nice to have an image, maybe an entire image for the website. 32 00:02:27,200 --> 00:02:28,190 So how do we do that? 33 00:02:28,220 --> 00:02:31,560 Well, the tag that we would want to apply it to is probably body. 34 00:02:31,610 --> 00:02:34,280 So if I go into body. 35 00:02:36,430 --> 00:02:41,530 And you might notice something here, I'm creating these selectors, I'm going from top to bottom, 36 00:02:41,710 --> 00:02:47,190 the body, which is the parent of almost everything, is at the top. 37 00:02:47,200 --> 00:02:52,150 And as we get more and more specific, we trickle down to smaller elements. 38 00:02:52,930 --> 00:02:54,840 Again, we'll get into that in a later video. 39 00:02:54,850 --> 00:02:56,380 But just keep that in mind. 40 00:02:56,730 --> 00:03:04,900 I guess so for body would be awesome to have a cool image on our website so we can do background and 41 00:03:04,900 --> 00:03:11,110 you can see the sublime text actually audiophiles or has some suggestions for us and we can look through 42 00:03:11,110 --> 00:03:12,250 this and pick the one that we want. 43 00:03:12,250 --> 00:03:17,760 But based on the name, looks like we want background image with background image. 44 00:03:17,770 --> 00:03:19,960 We want to specify a Eurail. 45 00:03:19,960 --> 00:03:26,380 In our case, I actually have on my desktop saved a nice little picture and let's title it something. 46 00:03:27,510 --> 00:03:35,100 Simple like background image, and I got this from a website called On Splash, if you haven't checked 47 00:03:35,100 --> 00:03:38,490 it out, they have a ton of high quality free images that you can use. 48 00:03:38,610 --> 00:03:44,750 So, again, here we are referencing are let's put this actually in here. 49 00:03:45,030 --> 00:03:46,610 So it's in our project folder. 50 00:03:46,620 --> 00:03:53,540 And then within our project folder, we can say that it is background image, dot, jpeg. 51 00:03:53,970 --> 00:03:54,870 So I say this. 52 00:03:54,870 --> 00:03:55,620 I refresh. 53 00:03:57,040 --> 00:04:02,320 And look at that, we have this image, but you can see that is a big image and doesn't fit the screen. 54 00:04:02,560 --> 00:04:03,940 So how can we do that? 55 00:04:03,970 --> 00:04:07,150 We can do background size. 56 00:04:08,620 --> 00:04:16,510 Cover, so if we do that and refresh, look at that, we have a beautiful background on our website. 57 00:04:16,720 --> 00:04:21,670 OK, let's say we want to remove these little dots next to our links. 58 00:04:22,130 --> 00:04:27,970 We can do that by going into what we want to change our ally elements. 59 00:04:27,970 --> 00:04:36,100 So we go in to style and we can put in here Ally and we'll do something called list style and we'll 60 00:04:36,100 --> 00:04:39,610 go none and refresh and look at that. 61 00:04:39,820 --> 00:04:42,280 Those little pesky dots are gone. 62 00:04:42,350 --> 00:04:46,270 Whenever I select about I want the cursor to not be this. 63 00:04:46,870 --> 00:04:50,740 I want to change a cursor to maybe have this little hand gesture. 64 00:04:51,280 --> 00:04:52,600 I like to call the Mickey Mouse hands. 65 00:04:53,050 --> 00:04:58,240 OK, so we go into our H2 and we can do something called cursor. 66 00:04:59,290 --> 00:05:04,180 And let's say you don't really know what properties Cursor has or you don't even know the property. 67 00:05:04,420 --> 00:05:08,890 You can go to access tricks and again, go to see. 68 00:05:10,210 --> 00:05:14,110 Look at Curser and you can kind of guess by the name what it does. 69 00:05:15,240 --> 00:05:21,210 And it tells you all the information you need to know, but you can see over here that they even have 70 00:05:21,210 --> 00:05:23,600 a demo of what you can do with cursors. 71 00:05:24,060 --> 00:05:34,380 So we want the pointer so we can just put a pointer here, save us, go back to our website, refresh 72 00:05:34,620 --> 00:05:35,490 and look at that. 73 00:05:35,880 --> 00:05:40,320 We now have a pointer when we hover over about, OK? 74 00:05:40,320 --> 00:05:45,090 And maybe the last change we want to do is that we want to make sure that our home about and log in 75 00:05:45,120 --> 00:05:46,690 are on one line. 76 00:05:46,740 --> 00:05:49,230 This is a little awkward when they're stacked on top of each other. 77 00:05:49,860 --> 00:05:52,950 And we can do that by selecting let's look over here. 78 00:05:53,250 --> 00:06:02,400 We want to select our allies and we can use something called display and display has a few properties 79 00:06:02,400 --> 00:06:03,110 that you can use. 80 00:06:03,990 --> 00:06:05,790 One is block. 81 00:06:08,230 --> 00:06:15,690 And by default, this is actually already a block, but there is also something called in line block. 82 00:06:15,910 --> 00:06:21,790 And if I save this and I fresh look at that, we have everything in line now. 83 00:06:21,820 --> 00:06:23,590 We want to change a few things here. 84 00:06:23,590 --> 00:06:29,580 We want to make sure that our colors are better than just purple and and green and pink. 85 00:06:29,590 --> 00:06:34,540 And what if we want some specific color and we have a certain design that we want for our website? 86 00:06:35,050 --> 00:06:37,570 What colors are very, very interesting and CSFs? 87 00:06:37,570 --> 00:06:39,610 Because there's a few ways that you can do them. 88 00:06:39,620 --> 00:06:42,760 And I want to show you one of my favorite websites for picking colors. 89 00:06:43,450 --> 00:06:50,470 What this website does, it actually gives you the colors that you can use it along with a nice addition 90 00:06:50,470 --> 00:06:52,750 of what it will compliment that color. 91 00:06:52,840 --> 00:06:57,670 So you can play around with this and change a bunch of criteria's. 92 00:06:57,680 --> 00:07:00,850 You can click over here and see what color combinations work. 93 00:07:01,240 --> 00:07:04,390 But let's say we wanted to use something like this. 94 00:07:04,930 --> 00:07:10,200 And if you hover over and click, you'll see over here that I get a couple of numbers that we can use. 95 00:07:10,420 --> 00:07:14,560 So the first one is a hex number. 96 00:07:15,460 --> 00:07:20,590 So hex number has a hash and then the number associated with it. 97 00:07:20,600 --> 00:07:22,180 So I just copied it from the website. 98 00:07:23,200 --> 00:07:24,880 You see the numbers a little bit different. 99 00:07:24,910 --> 00:07:32,170 Essentially, they can use anything from zero to nine and then all the way to F so eighth, and this 100 00:07:32,170 --> 00:07:34,190 represents a specific color. 101 00:07:34,690 --> 00:07:41,590 So if I copy this and let's make our color, let's make it the color of our header, if we go back to 102 00:07:41,590 --> 00:07:47,530 our success and save this and refresh, you'll see that our color changes. 103 00:07:48,450 --> 00:07:53,460 OK, we also want the border again to compliment the color. 104 00:07:54,570 --> 00:08:02,460 Let's do this border color, we also have something called rugby and rugby again, you see over here 105 00:08:02,460 --> 00:08:07,520 that there is a hex colour and an RGV colour and these are both the same colour. 106 00:08:07,560 --> 00:08:09,300 So you can pick whichever one you want. 107 00:08:09,930 --> 00:08:14,190 In the case of an RGV colour, you can do something like this. 108 00:08:14,190 --> 00:08:20,160 Say we want for our border to have RGB colour of these valleys. 109 00:08:20,340 --> 00:08:23,150 So that is the value of red, green and blue. 110 00:08:23,160 --> 00:08:28,110 So that's why rugby stands for and we just wrap it like so. 111 00:08:28,500 --> 00:08:32,070 So now if I save this and refresh, look at that. 112 00:08:32,130 --> 00:08:39,390 I have a nice little outline just to show you of what exactly I mean by red, green and blue if I set 113 00:08:39,390 --> 00:08:40,650 all of these two zero. 114 00:08:41,970 --> 00:08:48,080 So that means that red is in full force and green and blue are nonexistent, if I save and refresh, 115 00:08:48,090 --> 00:08:48,870 that is red. 116 00:08:49,440 --> 00:08:53,700 If I change this to green, then that's in green effect. 117 00:08:53,700 --> 00:08:58,900 And you can imagine here that if I change the blue to 255, then everything else is zero. 118 00:08:58,920 --> 00:09:00,330 This will be blue. 119 00:09:03,180 --> 00:09:03,610 There you go. 120 00:09:03,900 --> 00:09:10,380 So let's go back here to what we had before, because I like the other colors way better. 121 00:09:10,600 --> 00:09:18,600 So let's refresh perfect now RGV let's do one other cool thing, and that is called G.P.A. and that 122 00:09:18,600 --> 00:09:19,800 is stands for Alpha. 123 00:09:20,100 --> 00:09:21,840 You can actually set the opacity. 124 00:09:22,170 --> 00:09:28,380 So with the fourth number, you can actually do something between zero and one and one being, well, 125 00:09:28,890 --> 00:09:35,190 opaque, and you can still see everything to zero where it's completely transparent. 126 00:09:35,730 --> 00:09:37,380 So what's the zero point five here? 127 00:09:37,410 --> 00:09:41,750 You can see that there's a bit of a fade now and our color perfect. 128 00:09:41,760 --> 00:09:49,740 So using a tool like this, you can really pick what colors you want your website to have and choose 129 00:09:49,740 --> 00:09:51,360 the one that complement each other. 130 00:09:51,370 --> 00:09:57,780 Well, I use this website a lot when creating new websites and thinking of color templates to use. 131 00:09:58,080 --> 00:09:59,880 It's a really, really good resource. 132 00:09:59,880 --> 00:10:04,410 And you can use Hex and RGB whichever way, whichever one you want. 133 00:10:04,620 --> 00:10:08,880 Just it's good to have some consistency if you want to add some opacity. 134 00:10:09,150 --> 00:10:13,050 So the Alpha, this last number then definitely use. 135 00:10:14,430 --> 00:10:23,910 OK, so going back here, our website is starting to look somewhat OK, but in the next section I want 136 00:10:23,910 --> 00:10:28,500 to talk a little bit about selectors and more things that we can do with them. 137 00:10:29,360 --> 00:10:30,970 I'll see you on that one by.