All language subtitles for 075 Manipulating CSS Styles.en_US1

So the DOM actually also includes CSS Styles.

And so with DOM manipulation, we can also change Styles.

So let's try that out now.

And what I want to do here is to change the background

of this entire page here to a green color.

Whenever the player guesses the right number,

so when the player wins the game.

And we will also make this number here, wider then.

So let me just demonstrate that here.

So let's quickly win this game here.

Seventeen.

And so you see,

we want this green background,

and also this number here being wider.

And for that, of course, we need to manipulate the Styles

of this page.

So the CSS.

Okay, so that should happen here in this scenario,

where the player wins the game.

So where the guess is equal to the secret number

and actually, let's add some comments here

to make this code a little bit easier to understand.

So this one,

when

player wins,

this first one is

when there is no

input.

This is when

guess is

too high.

And this one here,

this one guess is too

low.

So this now at least looks a little bit nicer.

But anyway, let's now learn how to manipulate CSS Styles.

So we want to manipulate the Style of this whole page.

And so what we need to do

is to select the whole body of this page first.

Okay, so the body is basically this entire visible part

of the website.

So it's basically this whole element.

Alright.

So as always, we need to start by selecting the element

that we want to manipulate.

So

Document Dot querySelector,

and then the selector.

And now it's just the body element so there's no Dot

because that's for classes.

It's just really the element name.

And since there's only one body,

it's going to work just fine.

So here, we select the body.

And now we want to change the CSS Style.

So here, we need to write Style.

So we access basically,

the Style property of this element and then

another Dot

and then the name of the property that we want to change.

And in this case, it is the background color.

So background

and in CSS, we write the background color like this

background Dash

color,

right.

However, in JavaScript that's not allowed.

And so in JavaScript

all these property names that have two words

like background color

will simply adopt the Camel case notation

that I already explained you before,

and that we've been using all the time.

So instead of background Dash color

it's going to be background

uppercase C

for color like this.

And the same rule applies to all the other property names

that have multiple words.

So Style Dot background color,

and now we set it to something.

And let's get the actual color

from or

CSS.

So you see that background color,

here is the one that we're trying to define.

And we will specify it to this color value.

So this is a standard RBG value in hexadecimal.

And so we set it equal to 10, we must write a string,

and then the value we want to set it to.

So just like before, to set anything on the DOM,

we simply use the Equal sign.

So we have all of this.

So the background color property on the Style property,

and we want to set it to this value,

and so we set it equal to the value.

Okay,

so that's one part.

And now let's also increase the width

of this number here.

Okay,

that's important because I want to show you something there.

So Document Dot querySelector.

And that is the element with the class of number.

And again,

we want to change the Style.

So Dot Style,

Dot

width,

and then again we need to specify a string.

So whenever we are manipulating a Style,

we always need to specify a string .

We cannot just write like a number like 30,

it has to be a string.

In India, we need a unit.

And now I already closed the file so let's open it up again.

And the number that I'm looking for

currently has a width

of 15

REM.

And now I want to double it. So 30 REM,

so

30.

REM,

and again it needs to be inside of a string.

I cannot just write 30 REM,

or 30. So just a number,

that would not work,

we have to specify a string,

which in this case contains the number

plus

the unit.

So the same would be for percentages or pixels,

or whatever unit we used in CSS.

Okay, give it a safe now.

And now let's actually try the correct number right away.

So 12.

And

yes,

it worked.

Let's actually get rid of the console here,

then the page looks a bit nicer.

And we can also by the way

get rid of the terminal here

in VS code

because even if we close this panel here,

this process will still keep running,

the only way we stop this process from running

is by hitting here this trash can,

which will kill the terminal or by hitting Ctrl C.

So let's close it because this takes up too much space.

But now Yeah, so this worked just fine.

Now these Styles are actually set as Inline Styles.

So of course, we are not changing

the CSS file or anything like that.

And let me just show that to you.

So actually, I will need back the Dev tools here.

Make it a bit larger now just to show it to you.

And

so Indeed, it is an Inline Style.

So a Style that is applied directly in

the HTML using the Style attribute.

And the same is going to be true for the body.

Exactly.

So we see here, this is the background color

that we just applied.

Alright.

So of course not changing the CSS file

or anything like that.

Okay.

And that's it actually,

that's really the fundamentals of manipulating Styles

in CSS

The most important thing to remember

is to use the Style property.

And then on there is where we specify the CSS property.

And we need to specify that property

in the Camel case notation in case there is two words

and then the value always needs to be a string.

So that's all you need to know in order to change Styles

like we just did here.

Awesome.

We're doing great progress in this project.

And I hope that you're enjoying it so far.

And that you find it a lot of fun

to be able to manipulate a webpage like this.

Anyway, in the next video,

we will implement this reset button here basically

where we can play the game again.

And so I hope to see you there soon.