Hello again, everyone.
Now, the last person we talked about templates, the importance of choosing.
However, we still do have any style changes.
So in case anyone is disappointed about that in this lesson, we're going to talk about how to change
the style of our code.
It's now in our component, that's fine, we'll see the style your property after the template section.
Now, this points to the case file of our component, so it seems that we will make this deal changes
through this file.
So now we got to first remember what our page looks like in the browser.
Yeah, OK, so it's pretty plain and colorless.
So let's have a slightly nicer style to our page.
Now, you do remember that we included bootstrap in the project in the very first part so we can already
use the bootstrap features.
So that means it's time to include some success in the project.
It's not just open up the HTML page and decide what I want to change the color of what I want to keep.
OK, so for this, then I'll open this ISIS file.
And of course, I'll start writing my success code.
I'd say that first I want this text to be read and I'll say the changes and text turns red.
Now, of course, what we're doing here is very simple.
But we're going to build some more complex structures as our lessons progress, right?
You have to start simple.
Now, I want to make an important point for you, we need to know the CCWs properties for each component.
Should be made in itself.
So we define a style property for the app component here, if we're going to define a style for the
products component, we must make it in its own case file in this folder and the same for the product
component.
Another thing I'd like to mention here is while we're talking about templates, wow, OK, so we talked
about Templar's and Laszlo's, but we mentioned two different methods in line template and the external
file.
So likewise, we can use an inline style or an external file to change style.
So let's examine this.
Yeah, on this file, so when you look at it now, we can see that style.
Yours is an array, but template, your URL is not because we can add more than one style file here.
So that's why it's defined as Nuray.
OK, I just wanted to point that out.
So let's continue.
Now, here, we're going to use the Stiles property, not style you are.
So just like in template, I'll write the property that we want to change.
Between back tactics.
And when I say the changes, you can see this line changed color.
All right, so that's how you change dial in a couple of different ways, of course, it is important
to know here that this is an array, an array, an array.
Hey, it's an array.
Also, we have to use one template while creating our component, but not for style.
What else we can use multiple different files, so on these two different methods, the choice is up
to you.
But I also want to bring your attention to how much code we write actually matters because very different
code writing on the file is going to make it a little too difficult to control and then adding and removing
new features who can be, well, brain numbing.
So just pay attention.
All right, so my friends, we've made a few simple examples for now and we certainly learned about
working with templates and styles.
So, again, I say that's enough for now and I'll see you in the next lesson.
Goodbye for now.