DEV Community

Cover image for Styling in svelte
Ijay
Ijay

Posted on • Edited on

Styling in svelte

Introduction

Svelte is a free and open-source front-end compiler created by Rich Harris.

The first release was in November 2016. Version 3.0.0 is currently in use, and it was released in April 2019. That year, it grew in popularity among developers.

Svelte is used to create reactive web apps and interfaces, which means that changes are visible immediately, similar to react.js or vue.js. It is popular among developers due to its ease of use and high performance.

Perquisites

To follow along with this article :

  • Have a good knowledge of JavaScript or libraries like React.js

  • Install node.js on your system.

styling in svelte

Styling in svelte is different unlike in React, where we have the styling components* index.css or app.css file*. In svelte, styling is found right inside the file component.

A single file component consists of the Script Tag, Html Tag and Style Tag

<script>

</script>

<main>

</main>

<style>

</style>
Enter fullscreen mode Exit fullscreen mode

Styling in svelte is in 3 ways

  • Global style: The global style applies to all the different components (pages) we have in our project. It is like a universal style sheet. As we build svelte applications in our CMD (command line), these global style sheets are generated for us. It is found under the public folder of our application.

Global style

The marked area shows global.css which is created by default

By default, these global styles come with already pre-made CSS.styles which were generated during the build-up of the svelte application. It is your choice to keep the styles or delete them.

Pre-Made Css-Style

HTML, body {
    position: relative;
    width: 100%;
    height: 100%;
}

body {
    color: #333;
    margin: 0;
    padding: 8px;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}
Enter fullscreen mode Exit fullscreen mode
  • Component-specific styles: These styles are component-based, which means they are applied to a specific component rather than being applied to all the components in the application(general).

differences between global style sheet and Component-specific styles

The picture above it shows the differences between the two style-sheet

Result from component-specific style

Result from component-specific style

  • Conditional Style or Advance style: This is the addition of a style based on a certain condition, i.e., the value is either true or false.

For example changing the background-color of the modal using conditional class.

  • Initially set the modal background-color to true.

  • For it to gain the background-color purple we will give it a class called isModal **and set it to **false .

Code

<script>
 let modal = true;
 let isModal = false;
</script>

{#if modal}
 <div class="bg-cover" class:bg-modal={isModal}>
 <div class="modal" >
 <p>This is a modal!</p>
 </div>
 </div>
{/if}

<style>
 .bg-cover{
 width:100%;
 height: 100%;
 position: fixed;
 background-color: cyan;
 }

 .modal {
 padding: 10px;
 border-radius: 10px;
 max-width: 400px;
 margin: 10% auto;
 text-align: center;
 background: purple;
 color: white;
 }
.bg-modal .modal {
 background-color: orange;
 color: white;
 }
</style>
Enter fullscreen mode Exit fullscreen mode

Result when set to false
Result when set to false
To change the background-color of the modal to get another background-color:

Set the class isModal to** true**.

Code

<script>
 let modal = true;
 let isModal = true;
</script>

{#if modal}
 <div class="bg-cover" class:bg-modal={isModal}>
 <div class="modal" >
 <p>This is a modal!</p>
 </div>
 </div>
{/if}

<style>
 .bg-cover{
 width:100%;
 height: 100%;
 position: fixed;
 background-color: cyan;
 }

 .modal {
 padding: 10px;
 border-radius: 10px;
 max-width: 400px;
 margin: 10% auto;
 text-align: center;
 background: purple;
 color: white;
 }
 .bg-modal .modal {
 background-color: orange;
 color: white;
 }
</style>
Enter fullscreen mode Exit fullscreen mode

Result when set to true

Result when set to true

Conclusion

Svelte offers three ways to manage CSS styles: Global style, Component specific or Advance style, and Conditional style.

Resource

To improve your understanding of svelte or want to learn these are some of the resources that can help.

Thanks for Reading

Top comments (1)

Collapse
 
mattbarlow profile image
MattBarlow

you have done great effort. its really valuable information . Kamakhya devi vashikaran totke