Welcome back.
Much as I wanted to do everything in JavaScript.
We are going to do some see assess in this lesson and that's going to be to save some time.
Of course, you can apply all of the styling in JavaScript, but it's going to be an awfully long lesson.
And I think I've already set you through to do quite a bit of the building of the H.
Timal using JavaScript.
So we're going to focus on C assess this lesson.
Interesting that you can skip through it and just simply copy the CSF code that we're gonna be producing
in this lesson.
And it's gonna be available at the end of the lesson.
So selecting out the link and we're going to create a new style sheet and link to a stylesheet file
and then each rough and link to style C assess and save and create a new one.
Save this as style.
CSX.
And again, take the button style that we created earlier.
Just remove that.
And then add that in here.
Safe and everything.
Looks like it's hooked up properly.
So now let's start working with the styles.
You're going to see that the content is going to update on the right hand side.
So already have a bunch of these elements.
And one of the easier ones to remember.
Was red.
So red was going to turn.
The ones with the red suit to a red color.
So right away.
Structures them nicely.
There's also the card object itself.
And that's going to be the entire card element.
So each one of these has the card class applied.
So, again, we're going to do a display in line block.
So whether that they were span's or diffs, it doesn't actually really matter where this is.
We're updating everything with styling, applying a margin of zero.
And then let's add in some padding.
So 20 picks.
So not right next to each other.
And give it a default height of 120 picks and also a default width.
So that's going to be set for this.
And it's a lot harder to style the cards if you don't have these default weights.
Of course you can.
You can make it dynamic.
And if you do have time or if you do have interest in doing that, you're welcome to do that within
and outside of the lessons of this course.
So white smoke and border.
So setting up black border also.
Let's make it slightly rounded.
So setting border radius of five picks.
And also like to have a box ShadowStats, that kind of shadow affect to add to them.
So 10 picks and let's do.
So they actually look like that.
They're cards that are floating and margin.
I'm could do a five picks margin.
And I have to also update the styling for the other elements as well.
So we can we can handle a lot of that as needed.
We had another class called Big Access should be big bug.
And this one is going to be for the center.
So it's the font size setting up the font size to be fairly large.
So 3M.
And text align center, align it, so it's starting to look more like actual cards.
We also had another one called Tiny.
So tiny.
And this one is going to be for the smaller font size.
So font and we'll leave that at one point two E.M. Vertical.
A line is going to be at top.
And texta line is going to be left.
So save that.
And I'm also going to update the button as well.
So the default button sizes and we'll give it a background color of black.
Now, of course, you can always do these according to your own preferences.
So whatever type of styling you want to play.
You can feel free to apply and also want to adjust the content for the message area.
And if we don't have a class of message applied to it, we can always apply that.
So margin top of 25 picks.
So we'll move it off of being right there off the cards.
So padding of 15 picks, font size of one point two a.m..
And then also, let's set a fight family.
So do a cursive font family.
And maybe we want to do it slightly bigger.
So it looks like we've got some styling that's been added and we're ready to move on to the next part
where we're going to add some more functionality.
So we need to enable the hit and the stand buttons and all of that.
So the gameplay part of the get this course is coming up in the next lesson.
And feel free to apply whatever styling you want.
You can make it look however you want.
And that's up to you.