1
00:00:00,240 --> 00:00:05,670
We've already seen a little bit of what we can do with the style attribute using JavaScript and this

2
00:00:05,670 --> 00:00:07,980
lesson, we're going to explore even more that we can do.

3
00:00:08,250 --> 00:00:12,750
So we know we can set the background color, we can set color and border font size.

4
00:00:12,870 --> 00:00:14,970
We can also toggle the display value.

5
00:00:14,970 --> 00:00:16,470
So that's none or block.

6
00:00:16,630 --> 00:00:20,460
So we do display none then it's not visible within the page.

7
00:00:20,550 --> 00:00:23,310
If you do just display block, then you make it visible.

8
00:00:23,310 --> 00:00:28,700
Once again, there's more information about what is available within the case.

9
00:00:28,920 --> 00:00:31,580
And there's also in the dorm strings.

10
00:00:31,630 --> 00:00:34,620
We've got the background, background, color, image.

11
00:00:34,620 --> 00:00:37,170
So there is a lot you can do.

12
00:00:37,320 --> 00:00:41,640
So pretty much anything you can do a success you can do within the dorm as well.

13
00:00:41,940 --> 00:00:42,900
So let's try that out.

14
00:00:42,900 --> 00:00:47,580
And opening up our Ed, we've got a number of elements that we've been working with.

15
00:00:47,730 --> 00:00:51,390
How about we select the each one and we make a quick update on it?

16
00:00:51,390 --> 00:00:59,280
So this is the H1 element using document query selector selecting the each one, and we'll do some manipulations

17
00:00:59,280 --> 00:01:01,230
on it directly within the console.

18
00:01:01,530 --> 00:01:03,480
So we've got that element, each one.

19
00:01:03,810 --> 00:01:09,870
And when we select style within the Chrome browser, you see there's quite a bit here within the dropdown.

20
00:01:10,080 --> 00:01:12,870
We've looked at a few of these, such as background color.

21
00:01:12,870 --> 00:01:18,570
So just as you would when you're setting it with success, you can do it in JavaScript as well.

22
00:01:18,570 --> 00:01:19,860
So that's the background color.

23
00:01:20,070 --> 00:01:24,570
There's also you can do color as well, and there's a lot of options.

24
00:01:24,780 --> 00:01:28,680
So color and this, of course, will set the font color.

25
00:01:28,680 --> 00:01:30,060
So that's how we make it yellow.

26
00:01:30,270 --> 00:01:37,500
There's also things like the display properties, so style and display, so setting it to none.

27
00:01:37,500 --> 00:01:39,420
So watch what happens to the H1.

28
00:01:39,600 --> 00:01:40,590
It'll disappear.

29
00:01:40,740 --> 00:01:45,570
If we want to bring it back, we can set it to block and that will make it visible again.

30
00:01:45,870 --> 00:01:48,490
We can also increase the font size.

31
00:01:48,490 --> 00:01:51,510
So instead of style, let's select font.

32
00:01:51,510 --> 00:01:53,010
We can do font family.

33
00:01:53,010 --> 00:01:54,900
Font size is the one that we're looking at.

34
00:01:55,230 --> 00:01:58,140
So this can be any size that we want to set it up.

35
00:01:58,140 --> 00:01:58,860
So how about we do it?

36
00:01:58,860 --> 00:02:00,620
Forty picks make it really big.

37
00:02:01,050 --> 00:02:03,900
Also you can set padding, you can set border.

38
00:02:04,140 --> 00:02:09,720
So just as you would with scissors, you can set the border properties so you can do the shorthand for

39
00:02:09,720 --> 00:02:11,970
border where we've got the dotted.

40
00:02:11,990 --> 00:02:17,760
So the type of border and the color of the border and then the five picks is the width of the border.

41
00:02:17,760 --> 00:02:19,350
You can see that it gets shown.

42
00:02:19,590 --> 00:02:22,260
You can also do style padding as well.

43
00:02:22,440 --> 00:02:27,960
So that's another common one that's done for a lot of elements and twenty five picks padding.

44
00:02:28,110 --> 00:02:29,280
So I think you get the picture.

45
00:02:29,310 --> 00:02:32,880
There is a lot of options when we are doing this styling.

46
00:02:33,090 --> 00:02:36,000
So we also do have a challenge for this lesson.

47
00:02:36,180 --> 00:02:41,910
And the challenge, of course, is to update some of the style properties of the element below so you

48
00:02:41,910 --> 00:02:46,620
can use the ones that I've used in this example, like the background color, the color border, font

49
00:02:46,620 --> 00:02:47,010
size.

50
00:02:47,250 --> 00:02:51,870
And you can also do other ones as well to make things even more interesting.

51
00:02:51,900 --> 00:02:56,850
So go ahead and pause the video, try it out for yourself and get more familiar with what you can do

52
00:02:56,850 --> 00:02:57,330
with style.