Add styles to Svelte 3 component
In Svelte 3, the same as in regular HTML we can add CSS styles to a component and this is what we're going to learn in this lesson.
Important note - styles are scoped to the component which means that if we style a h1 tag in component A, it won't automatically affect h1 tags in component B.
Instructor: [0:00] Like a regular HTML, we can add styles to our component. If I were to add a style tag, we can go ahead and style this header over here. I can do h1. We can set it this, a color. We can, for instance, set in font family. We're going to do the best font of them all, which is Comic Sans MS.
[0:21] After we save, we're going to see our changes applied over here. Of course, we don't to have to style by tag. If you would like to, we can have a class of headerText over here and I can just edit like this, headerText.
[0:35] After I save, we're going to see that this change is applied, although styles are going to be applied inside of this component. If we have another component with a header text class, those changes are not going to be applied there.