Styling in svelte
Tags: beginners, svelte, tutorial
Published: 2022-10-15 23:09:27

## 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](https://reactjs.org/) or [vue.js](https://vuejs.org/). 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](https://reactjs.org/)

- Install [node.js](https://nodejs.org/en/) 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>
```
### 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q419n7b83jljcowbvgdk.jpg)

*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;
}
```
- **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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uwonci4xsbyg6e8vqysv.jpeg)

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

**Result from component-specific style**

![Result from component-specific style](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pj05dwaadkjgvrjd1scl.png)

- **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>
```
**Result when set to false**
![Result when set to false](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lzu5d0h14ak9i5mati3d.png)
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>
```
**Result when set to true**

![Result when set to true](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cwqwm7p7v1ljzkpyi6g6.png)

## 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. 

- [Svelte](https://svelte.dev/) 

- [Svelte by Net Ninja](https://youtube.com/playlist?list=PL4cUxeGkcC9hlbrVO_2QFVqVPhlZmz7tO) 

- To help manage your time best download this visual studio code extension **Svelte for VS Code**.

**Thanks for Reading**