1 00:00:00,000 --> 00:00:03,650 Let's go ahead and add custom CSS to a particular element. 2 00:00:03,645 --> 00:00:06,095 So in this lesson, what we're going to do is we're going to grab 3 00:00:06,090 --> 00:00:09,000 this box and we're going to add CSS to it. 4 00:00:09,000 --> 00:00:10,020 And we're not going to add a class, 5 00:00:10,020 --> 00:00:11,100 we're not going to remove a class. 6 00:00:11,100 --> 00:00:13,050 We're going to add dynamic CSS. 7 00:00:13,050 --> 00:00:15,500 So we can actually basically right. 8 00:00:15,495 --> 00:00:19,515 Style is equal to width 100%, for example, 9 00:00:19,515 --> 00:00:24,065 we can make that happen with JavaScript and jQuery. 10 00:00:24,060 --> 00:00:28,190 So first things first, we need to grab our box element. 11 00:00:28,190 --> 00:00:30,950 So let's do dot box. 12 00:00:30,950 --> 00:00:33,810 And all we have to do is type dot CSS. 13 00:00:33,814 --> 00:00:38,464 And this is really cool because we could do background color, 14 00:00:38,620 --> 00:00:41,960 blue, and this syntax is a little interesting. 15 00:00:41,960 --> 00:00:43,850 So what we're doing here is we're saying dot CSS, 16 00:00:43,850 --> 00:00:46,970 the first value in this function is going to be, 17 00:00:46,970 --> 00:00:48,590 what do we want to change? 18 00:00:48,590 --> 00:00:50,900 What CSS property do we want to change? 19 00:00:50,900 --> 00:00:53,690 And then we want to change the actual value. 20 00:00:53,690 --> 00:00:58,110 So we can change that to blue, but let's go ahead and change this to orange. 21 00:00:58,270 --> 00:01:02,690 And you can see that it actually loads black and then changes to orange. 22 00:01:02,690 --> 00:01:05,420 And you can see here, style background-color is equal to orange. 23 00:01:05,420 --> 00:01:07,000 Now if we check our source code, 24 00:01:06,995 --> 00:01:08,515 do, do, do, do, do, do, 25 00:01:08,510 --> 00:01:10,520 do. Where are we? 26 00:01:10,520 --> 00:01:16,130 There is no style attribute on their jQuery dynamically added that for us. 27 00:01:16,130 --> 00:01:18,500 Now if we wanted to, we could do multiples. 28 00:01:18,500 --> 00:01:22,100 We could do dot CSS, 29 00:01:22,100 --> 00:01:30,030 border, comma, ten pixels, solid black. 30 00:01:30,280 --> 00:01:34,490 And that dynamically changed it for us. We could do another one. 31 00:01:34,490 --> 00:01:36,350 We could do dot CSS, 32 00:01:36,350 --> 00:01:42,210 border radius, comma 50%. 33 00:01:42,280 --> 00:01:48,050 And now it turns it into an orange circle with a black border, 34 00:01:48,050 --> 00:01:52,010 instead of being just a regular black square. 35 00:01:52,010 --> 00:01:55,340 And this sort of leads us into Animations a little bit, 36 00:01:55,340 --> 00:01:57,940 which we'll talk more about down the road. 37 00:01:57,935 --> 00:02:00,185 Now there's a better way to do this. 38 00:02:00,185 --> 00:02:05,015 We could comment that out and we could do dot CSS. 39 00:02:05,014 --> 00:02:08,404 And we can give this an object. 40 00:02:08,410 --> 00:02:10,670 Now when we give this an object, 41 00:02:10,670 --> 00:02:14,000 we don't type background color 42 00:02:14,000 --> 00:02:16,600 because objects aren't supposed to have dashes in their names. 43 00:02:16,595 --> 00:02:19,955 We do background, and then we CamelCase It color. 44 00:02:19,955 --> 00:02:23,375 So look at the difference between this and this one. 45 00:02:23,375 --> 00:02:27,485 Background dashed color versus background color with a capital C. 46 00:02:27,880 --> 00:02:31,120 And let's go ahead and change this to yellow. 47 00:02:31,115 --> 00:02:34,895 Let's change the border. 48 00:02:36,420 --> 00:02:40,500 210 pixels, solid blue. 49 00:02:40,495 --> 00:02:43,695 And let's change the border radius. 50 00:02:43,690 --> 00:02:50,610 Notice the capitalisation there and there's no dashes border radius to be ten pixels. 51 00:02:50,605 --> 00:02:54,285 And so this is just a regular JavaScript object. 52 00:02:54,280 --> 00:02:57,400 Let's go ahead and save that and refresh and look at that. 53 00:02:57,400 --> 00:03:01,630 We can change them all in one shot or we can chain them together if we wanted to. 54 00:03:01,630 --> 00:03:04,650 Now what I'd like you to do is try both methods. 55 00:03:04,645 --> 00:03:06,845 Tried chaining them together. 56 00:03:06,840 --> 00:03:09,550 So you've got the first one and then you've got a second one, 57 00:03:09,550 --> 00:03:11,860 then you've got a third one and then comment those out. 58 00:03:11,860 --> 00:03:14,620 And basically don't chain them together, 59 00:03:14,620 --> 00:03:20,030 just change them all at the exact same time Because right now JQuery has to go here, 60 00:03:20,030 --> 00:03:22,070 change at, Read the styling go here, change. 61 00:03:22,070 --> 00:03:23,150 I had read the styling go here, 62 00:03:23,150 --> 00:03:26,020 read that gender styling versus going in 63 00:03:26,015 --> 00:03:29,785 into this method where we're just giving it all of it. 64 00:03:29,780 --> 00:03:31,130 We can just say, hey, 65 00:03:31,130 --> 00:03:32,810 jQuery, deal with all of it all at once. 66 00:03:32,810 --> 00:03:34,340 Instead of doing three different tasks, 67 00:03:34,340 --> 00:03:36,280 do one big task. 68 00:03:36,275 --> 00:03:41,345 Next up, we're going to learn about how to fade things in and faint things out.