CSS Styling

Styling:

1. Inline Styling:

<div style="font-size: 2rem;font-weight: 400;">Good Evening</div>

2. Using CSS class:

HTML:

<div class="time"> 8:15 PM </div>

 CSS:

.time {

    font-size: 5rem;

    font-weight: 600;

}

 3. By importing the CSS file:

Create a component that contains a CSS file and configuration file. Then import it in the component you want to use the CSS file in.

@import 'c/stylingCSS';

 4. By uploading CSS file in Static resources:

import {LightningElement } from 'lwc';

import StaticCSS from '@salesforce/resourceUrl/StaticCSS';

import {loadStyle} from 'lightning/platformResourceLoader';

 

export default class ToDoManager extends LightningElement {

    connectedCallback(){

        loadStyle(this, StaticCSS);

    }

}