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.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!