Why is CSS Important for LWC?

• Controls how LWC components look
• Improves UI/UX
• Helps follow Salesforce Lightning design standards
• Ensures components match brand identity
• Makes layouts responsive on multiple screens

How CSS Works

CSS is written using rulesets:

 selector {     property: value; } 

 Example:

 p {     color: green;     font-size: 18px; } 

CSS Selectors

1. Element Selector

 p { color: blue; }

2. Class Selector

 .message { font-size: 20px; } 

3. ID Selector

 #header { background: yellow; } 

4. Attribute Selector

 input[type="text"] {     border: 1px solid black; } 

Common CSS Properties

1. Colors

 h1 { color: #ff5722; } 

2. Background

 div { background-color: lightgray; } 

3. Fonts

 p {     font-size: 18px;     font-family: Arial; } 

4. Margin & Padding

 .box {     margin: 20px;     padding: 10px; } 

5. Borders

 .card {     border: 1px solid black;     border-radius: 8px; } 

CSS Box Model (Very Important!)

Every HTML element is treated like a box with:

• Content
• Padding
• Border
• Margin

Example:

 .box {     padding: 20px;     border: 2px solid #000;     margin: 10px; }

Display Property

Block Elements

 div { display: block; } 

Inline Elements

 span { display: inline; } 

Inline-Block

 img { display: inline-block; } 

Flexbox (Most Used in LWC Layouts)

 .container {     display: flex;     justify-content: center; 

    align-items: center; } 

Common Flexbox properties include:

• display: flex
• justify-content
• align-items
• flex-direction
• gap
• 
  

Grid Layout

 .grid {     display: grid;     grid-template-columns: 1fr 1fr;     gap: 20px; } 

Responsive CSS with Media Queries

 @media (max-width: 600px) {     h1 {         font-size: 20px;     } } 

CSS in Lightning Web Components

In LWC, each component has its own CSS file with the same name:

myComponent.html myComponent.js myComponent.css 

Example:

HTML:

      
Hello Peoplewoo
  

CSS:

 .title {     color: blue;     font-size: 22px; } 

Using: host in LWC

Used to style the root element of a component.

 :host {     display: block;     padding: 20px; } 

Best Practices

• Use classes instead of IDs
• Follow naming conventions
• Keep CSS modular
• Use Flexbox for modern layouts
• Avoid !important (unless needed)