Styling with CSS, SLDS, and Static Resources
By the end of this lesson, you'll be able to:
- Write component-scoped CSS
- Apply SLDS utility classes for Salesforce-consistent styling
- Reference a static resource from a component
Prerequisites: "Event Handling Basics"
Component-Scoped CSS
/* accountBadge.css */
.title {
font-weight: bold;
}Because of Shadow DOM (Module 1), this .title rule automatically applies only within accountBadge's own markup — no risk of it leaking out to affect any other component on the page, and no need for manual class-name prefixing tricks to avoid collisions.
Using SLDS (Salesforce Lightning Design System)
<div class="slds-p-around_medium slds-text-heading_small">
Account Summary
</div>SLDS utility classes — spacing (slds-p-around_medium), typography (slds-text-heading_small), grids, and more — are available for free in every LWC template. Reaching for SLDS first, before writing custom CSS, keeps your components feeling visually native to Salesforce rather than "bolted on."
Referencing Static Resources
import { LightningElement } from 'lwc';
import COMPANY_LOGO from '@salesforce/resourceUrl/companyLogo';
export default class Header extends LightningElement {
logoUrl = COMPANY_LOGO;
}<img src={logoUrl} alt="Company logo">A Static Resource (an uploaded image or asset) is imported via the special @salesforce/resourceUrl/ module path — never referenced as a plain relative file path, which won't work.
Why This Matters in Real Projects
Consistent SLDS usage across a team's components is what makes a whole custom-built app feel like a cohesive part of Salesforce rather than a patchwork of differently-styled widgets. Static resources are also how you bring in company logos, icons, or — as Module 11 covers — third-party JavaScript and CSS libraries.
Exercise
Two unrelated components both define a CSS rule for .container. Explain, as a comment, why this is safe in LWC.
Show hint
Recall what Shadow DOM does to a component's CSS.
Exercise
Challenge: a developer tries to reference a static resource with <img src="/resources/companyLogo.png">. Explain why this is incorrect, and show the correct approach.
Show hint
Static resources need to be imported as a JS module, not referenced by plain path.
Styling with CSS, SLDS, and Static Resources Quiz
My Notes
Log in to keep private notes on this lesson.
Questions about this lesson
No questions yet — be the first to ask.
Log in to ask a question about this lesson.
Summary
A component's .css file is automatically scoped to just that component thanks to Shadow DOM, and SLDS gives you Salesforce-consistent styling for free — reaching for custom CSS should be the exception, not the default.