Salesforce Lightning Web Component (LWC) Master Class Episode 4: What is CSS (Cascading Style Sheets)?
Welcome to the fourth installment of the Lightning Web Component (LWC) Master Class. If you’ve been following along, you’ve likely built your first component using HTML. But let’s face it—without styling, even the best code looks like a relic from the early 90s.
In this guide, we’re diving into CSS (Cascading Style Sheets). We’ll cover what it is, how browsers process it, and the practical workflows you need to style your Salesforce components effectively.
Part 1: What is CSS? (The Theory)
If HTML is the skeleton that gives your page structure, CSS is the skin and clothing that determines how it looks.
When a user visits your Salesforce page, the browser performs a two-step process to render what they see [01:55]:
- HTML Parsing: The browser reads the HTML and builds the DOM (Document Object Model). This tells the browser what elements exist (paragraphs, inputs, buttons).
- CSS Parsing: The browser reads your stylesheets and builds the CSSOM (Cascading Style Sheet Object Model). This tells the browser how to paint those elements (colors, fonts, margins) [02:47].
These two models combine to create the Render Tree, which is the final instruction set for what appears on the screen.
Part 2: Setting Up a Dev Environment
Before we start writing code, here is a “Pro Tip” for LWC development: Don’t test your components on a standard Record Page. It’s often cluttered and hard to control.
Instead, create a dedicated Lightning App Page to serve as your sandbox [07:35].
- Update your Metadata: In your component’s
.js-meta.xmlfile, add the targetlightning__AppPage. - Build the Page: Go to Setup > Lightning App Builder, create a new App Page (Single Region is best), and drag your component onto the canvas [08:15].
- Activate: Add it to a standard app like “Sales” so you can access it quickly from the App Launcher.
This gives you a clean, isolated environment to see your changes instantly.
Part 3: Writing Your First CSS
Adding styles to an LWC is simple. You create a file in your component’s folder with the exact same name as your component, but with a .css extension.
myComponent.htmlmyComponent.jsmyComponent.css[11:05]
The Power of Selectors
You can target HTML elements in two main ways:
- Element Selectors: Targeting a tag like
papplies the style to every paragraph in the component.CSSp { color: red; } /* Turns all text red */ - Class Selectors (Recommended): This allows you to style specific elements. Add a
classattribute to your HTML and reference it in CSS with a dot (.).- HTML:
<p class="green-text">I am green</p> - CSS:
.green-text { color: green; }[15:37]
- HTML:
Part 4: The “Inspector” Workflow
Writing CSS blindly in VS Code—saving, deploying, and refreshing—is slow. The fastest way to perfect your design is using the Browser Inspector [19:16].
- Right-click your component in the browser and select Inspect.
- Select the element you want to style.
- In the Styles pane, type your CSS rules (e.g.,
margin: 20px;,text-align: center;) [20:25]. - Instant Feedback: You will see the changes immediately without reloading.
Crucial Step: Changes in the inspector are temporary! Once you are happy with the look, copy the code from the inspector and paste it into your myComponent.css file in VS Code [21:05].
Conclusion
CSS is a vast topic, covering everything from mobile responsiveness to complex animations. While this guide covers the basics of component-level styling, future tutorials will explore advanced Salesforce-specific features like Styling Hooks and Shared CSS Modules [27:51].
For now, you have the tools to take your plain HTML components and turn them into professional, user-friendly interfaces.
For the full deep dive, watch the episode here: Coding With The Force – What is CSS?
Need help with your Salesforce Org?
If you need help with your Salesforce org, schedule an hour of consulting time with me! I’m one of only ~500 Salesforce Certified Technical Architect’s (CTA) worldwide and I’ve spent over 30,000 hours building Salesforce implementations over the last decade!
Schedule and hour of consulting with me here!
Do you want to be the next Salesforce Certified Technical Architect (CTA)?
If you need training to help you on your journey to complete your Salesforce CTA Board then why not sign up for the cheapest Salesforce CTA course out there, with someone who has training over a million Salesforce professionals worldwide! You can check out and enroll in the course below!
Sign up for the CTA course here!
Or if a course isn’t your thing, you can always sign up for an hour long CTA study session with me here:
Schedule 1-on-1 CTA Coaching Here!
Get Coding With The Force Merch!!
We now have a redbubble store setup so you can buy cool Coding With The Force merchandise! Please check it out! Every purchase goes to supporting the blog and YouTube channel.
Get Shirts Here!
Get Cups, Artwork, Coffee Cups, Bags, Masks and more here!
Check Out More Coding With The Force Stuff!
If you liked this post make sure to follow us on all our social media outlets to stay as up to date as possible with everything!
Youtube
Patreon
Github
Facebook
Twitter
Instagram
Salesforce Development Books I Recommend
Advanced Apex Programming
Salesforce Lightning Platform Enterprise Architecture
Mastering Salesforce DevOps
Good Non-SF Specific Development Books:
Clean Code
Clean Architecture
