1
00:00:00,600 --> 00:00:01,140
Welcome back.

2
00:00:01,170 --> 00:00:04,020
Much as I wanted to do everything in JavaScript.

3
00:00:04,050 --> 00:00:09,210
We are going to do some see assess in this lesson and that's going to be to save some time.

4
00:00:09,420 --> 00:00:15,810
Of course, you can apply all of the styling in JavaScript, but it's going to be an awfully long lesson.

5
00:00:15,840 --> 00:00:20,490
And I think I've already set you through to do quite a bit of the building of the H.

6
00:00:20,640 --> 00:00:22,230
Timal using JavaScript.

7
00:00:22,500 --> 00:00:25,020
So we're going to focus on C assess this lesson.

8
00:00:25,050 --> 00:00:30,240
Interesting that you can skip through it and just simply copy the CSF code that we're gonna be producing

9
00:00:30,360 --> 00:00:31,200
in this lesson.

10
00:00:31,530 --> 00:00:33,720
And it's gonna be available at the end of the lesson.

11
00:00:34,230 --> 00:00:40,410
So selecting out the link and we're going to create a new style sheet and link to a stylesheet file

12
00:00:41,100 --> 00:00:47,670
and then each rough and link to style C assess and save and create a new one.

13
00:00:48,420 --> 00:00:50,000
Save this as style.

14
00:00:50,460 --> 00:00:51,180
CSX.

15
00:00:52,990 --> 00:00:56,970
And again, take the button style that we created earlier.

16
00:00:57,150 --> 00:00:57,930
Just remove that.

17
00:00:58,830 --> 00:01:00,090
And then add that in here.

18
00:01:01,020 --> 00:01:02,610
Safe and everything.

19
00:01:02,610 --> 00:01:04,230
Looks like it's hooked up properly.

20
00:01:04,590 --> 00:01:06,820
So now let's start working with the styles.

21
00:01:07,170 --> 00:01:11,160
You're going to see that the content is going to update on the right hand side.

22
00:01:11,400 --> 00:01:13,260
So already have a bunch of these elements.

23
00:01:13,350 --> 00:01:16,080
And one of the easier ones to remember.

24
00:01:16,170 --> 00:01:16,920
Was red.

25
00:01:17,790 --> 00:01:19,110
So red was going to turn.

26
00:01:19,200 --> 00:01:22,230
The ones with the red suit to a red color.

27
00:01:23,130 --> 00:01:24,000
So right away.

28
00:01:24,240 --> 00:01:25,440
Structures them nicely.

29
00:01:26,130 --> 00:01:29,880
There's also the card object itself.

30
00:01:30,260 --> 00:01:32,970
And that's going to be the entire card element.

31
00:01:33,960 --> 00:01:36,930
So each one of these has the card class applied.

32
00:01:37,830 --> 00:01:42,330
So, again, we're going to do a display in line block.

33
00:01:42,690 --> 00:01:47,430
So whether that they were span's or diffs, it doesn't actually really matter where this is.

34
00:01:47,490 --> 00:01:51,840
We're updating everything with styling, applying a margin of zero.

35
00:01:52,410 --> 00:01:54,570
And then let's add in some padding.

36
00:01:54,690 --> 00:01:55,600
So 20 picks.

37
00:01:55,830 --> 00:01:57,450
So not right next to each other.

38
00:01:58,170 --> 00:02:04,200
And give it a default height of 120 picks and also a default width.

39
00:02:04,890 --> 00:02:07,110
So that's going to be set for this.

40
00:02:07,380 --> 00:02:11,390
And it's a lot harder to style the cards if you don't have these default weights.

41
00:02:11,730 --> 00:02:12,500
Of course you can.

42
00:02:12,510 --> 00:02:13,590
You can make it dynamic.

43
00:02:13,890 --> 00:02:19,050
And if you do have time or if you do have interest in doing that, you're welcome to do that within

44
00:02:19,950 --> 00:02:22,710
and outside of the lessons of this course.

45
00:02:23,130 --> 00:02:25,130
So white smoke and border.

46
00:02:25,440 --> 00:02:28,350
So setting up black border also.

47
00:02:28,410 --> 00:02:30,480
Let's make it slightly rounded.

48
00:02:30,630 --> 00:02:33,480
So setting border radius of five picks.

49
00:02:34,940 --> 00:02:39,980
And also like to have a box ShadowStats, that kind of shadow affect to add to them.

50
00:02:40,310 --> 00:02:42,470
So 10 picks and let's do.

51
00:02:42,740 --> 00:02:43,970
So they actually look like that.

52
00:02:43,970 --> 00:02:46,920
They're cards that are floating and margin.

53
00:02:47,210 --> 00:02:49,330
I'm could do a five picks margin.

54
00:02:50,180 --> 00:02:53,720
And I have to also update the styling for the other elements as well.

55
00:02:54,260 --> 00:02:57,230
So we can we can handle a lot of that as needed.

56
00:02:57,800 --> 00:03:02,390
We had another class called Big Access should be big bug.

57
00:03:03,200 --> 00:03:05,780
And this one is going to be for the center.

58
00:03:06,230 --> 00:03:10,550
So it's the font size setting up the font size to be fairly large.

59
00:03:10,700 --> 00:03:11,600
So 3M.

60
00:03:13,080 --> 00:03:18,540
And text align center, align it, so it's starting to look more like actual cards.

61
00:03:19,260 --> 00:03:21,120
We also had another one called Tiny.

62
00:03:21,570 --> 00:03:22,230
So tiny.

63
00:03:22,860 --> 00:03:26,280
And this one is going to be for the smaller font size.

64
00:03:26,820 --> 00:03:31,040
So font and we'll leave that at one point two E.M. Vertical.

65
00:03:31,130 --> 00:03:33,420
A line is going to be at top.

66
00:03:35,090 --> 00:03:37,760
And texta line is going to be left.

67
00:03:38,360 --> 00:03:39,110
So save that.

68
00:03:39,710 --> 00:03:42,470
And I'm also going to update the button as well.

69
00:03:42,830 --> 00:03:48,200
So the default button sizes and we'll give it a background color of black.

70
00:03:48,860 --> 00:03:52,310
Now, of course, you can always do these according to your own preferences.

71
00:03:52,820 --> 00:03:54,680
So whatever type of styling you want to play.

72
00:03:54,770 --> 00:03:59,660
You can feel free to apply and also want to adjust the content for the message area.

73
00:04:00,320 --> 00:04:04,010
And if we don't have a class of message applied to it, we can always apply that.

74
00:04:04,480 --> 00:04:07,010
So margin top of 25 picks.

75
00:04:07,880 --> 00:04:11,240
So we'll move it off of being right there off the cards.

76
00:04:12,530 --> 00:04:19,310
So padding of 15 picks, font size of one point two a.m..

77
00:04:20,060 --> 00:04:22,180
And then also, let's set a fight family.

78
00:04:22,340 --> 00:04:25,220
So do a cursive font family.

79
00:04:25,660 --> 00:04:27,630
And maybe we want to do it slightly bigger.

80
00:04:27,920 --> 00:04:32,720
So it looks like we've got some styling that's been added and we're ready to move on to the next part

81
00:04:33,210 --> 00:04:34,920
where we're going to add some more functionality.

82
00:04:34,940 --> 00:04:38,570
So we need to enable the hit and the stand buttons and all of that.

83
00:04:38,690 --> 00:04:43,520
So the gameplay part of the get this course is coming up in the next lesson.

84
00:04:43,850 --> 00:04:45,950
And feel free to apply whatever styling you want.

85
00:04:46,190 --> 00:04:48,050
You can make it look however you want.

86
00:04:48,410 --> 00:04:49,160
And that's up to you.