Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
1×
Become a member
to unlock all features
Autoplay

    Add styles to Svelte 3 component

    Tomasz ŁakomyTomasz Łakomy
    sveltesvelte

    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.

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    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.

    Discuss

    Discuss