Let's go ahead and add custom CSS to a particular element.
So in this lesson, what we're going to do is we're going to grab
this box and we're going to add CSS to it.
And we're not going to add a class,
we're not going to remove a class.
We're going to add dynamic CSS.
So we can actually basically right.
Style is equal to width 100%, for example,
we can make that happen with JavaScript and jQuery.
So first things first, we need to grab our box element.
So let's do dot box.
And all we have to do is type dot CSS.
And this is really cool because we could do background color,
blue, and this syntax is a little interesting.
So what we're doing here is we're saying dot CSS,
the first value in this function is going to be,
what do we want to change?
What CSS property do we want to change?
And then we want to change the actual value.
So we can change that to blue, but let's go ahead and change this to orange.
And you can see that it actually loads black and then changes to orange.
And you can see here, style background-color is equal to orange.
Now if we check our source code,
do, do, do, do, do, do,
do. Where are we?
There is no style attribute on their jQuery dynamically added that for us.
Now if we wanted to, we could do multiples.
We could do dot CSS,
border, comma, ten pixels, solid black.
And that dynamically changed it for us. We could do another one.
We could do dot CSS,
border radius, comma 50%.
And now it turns it into an orange circle with a black border,
instead of being just a regular black square.
And this sort of leads us into Animations a little bit,
which we'll talk more about down the road.
Now there's a better way to do this.
We could comment that out and we could do dot CSS.
And we can give this an object.
Now when we give this an object,
we don't type background color
because objects aren't supposed to have dashes in their names.
We do background, and then we CamelCase It color.
So look at the difference between this and this one.
Background dashed color versus background color with a capital C.
And let's go ahead and change this to yellow.
Let's change the border.
210 pixels, solid blue.
And let's change the border radius.
Notice the capitalisation there and there's no dashes border radius to be ten pixels.
And so this is just a regular JavaScript object.
Let's go ahead and save that and refresh and look at that.
We can change them all in one shot or we can chain them together if we wanted to.
Now what I'd like you to do is try both methods.
Tried chaining them together.
So you've got the first one and then you've got a second one,
then you've got a third one and then comment those out.
And basically don't chain them together,
just change them all at the exact same time Because right now JQuery has to go here,
change at, Read the styling go here, change.
I had read the styling go here,
read that gender styling versus going in
into this method where we're just giving it all of it.
We can just say, hey,
jQuery, deal with all of it all at once.
Instead of doing three different tasks,
do one big task.
Next up, we're going to learn about how to fade things in and faint things out.