Peoplewoo - Blogs #HTML fundamentalsPeoplewoo - Blogs #HTML fundamentalshttps://www.peoplewoo.com/blogs/tag/html-fundamentalsSat, 11 Apr 2026 08:51:40 +0530http://zoho.com/sites/<![CDATA[Basics of CSS | Beginner’s Guide to Styling Websites | Peoplewoo Skills]]>https://www.peoplewoo.com/blogs/post/basics-of-css-beginner-s-guide-to-styling-websites-peoplewoo-skills

CSS (Cascading Style Sheets) is the language used to style and design web pages. While HTML provides structure, CSS adds beauty, color, layout, and responsiveness. For Lightning Web Components (LWC), CSS is essential to create modern, clean, and visually appealing Salesforce UIs.


What is CSS?


CSS stands for Cascading Style Sheets. Its main purpose is to define how elements appear on a webpage by controlling:

  • Color
  • Spacing
  • Borders
  • Fonts
  • Layout
  • Animations

Example:

 h1 {     color: blue;     text-align: center; }


Watch Our Video Tutorial

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)



Dharmesh R.
The explanations are clear, and the repetition really helps to reinforce the concepts. It covers everything in detail, from the basics to more advanced topics. The course includes in-depth examples that make complex ideas easy to understand. Overall, I’m really impressed and can’t wait to explore more!


Jermaine L.
Taking this course like help me acquire all the knowledge and skills I need to excel and optimize my performance to fulfilling my operational duties in my current role as an email marketing specialist


Sumit N.
Awesome explanation. He keep repeating which helps to remind/refresh the concepts. Loved it


Varun V.
It's a great course that covers everything you need to know. After almost finishing, I feel confident using the SDC platform. Definitely a 5-star experience!


Prajakta Nimba S.
This course is perfect for anyone looking to build a solid foundation in Salesforce Data Cloud. The content is well-structured, easy to follow, and packed with real-world examples that make the concepts practical












Frequently Asked Questions (FAQ)


1. Is CSS required for LWC?


Yes, CSS styles the entire UI of Lightning Web Components.


2. Can I use external CSS libraries in LWC?


You can use SLDS and custom static resources.


3. What is the main difference between CSS and HTML?


HTML structures the page, CSS styles it.


4. Does LWC support global CSS?


No, CSS in LWC is component-scoped. Use shared CSS via static resources.


5. Can Flexbox and Grid be used in LWC?


Yes, both are fully supported and commonly used.


Conclusion


CSS is essential for building beautiful and responsive Lightning Web Components. Understanding selectors, Flexbox, spacing, and the box model will help you create professional UI designs in Salesforce.



More SFDC Resources

Start your SFMC journey today — join our Live Training 
Need help? Chat with us on WhatsApp anytime.
Learn. Practice. Get Certified. Succeed with Peoplewoo Skills.




 ]]>Fri, 28 Nov 2025 16:52:09 +0530<![CDATA[Basics of HTML | Beginner’s Guide to LWC | Peoplewoo Skills ]]>https://www.peoplewoo.com/blogs/post/basics-of-html-beginner-s-guide-to-lwc-peoplewoo-skills




HTML (HyperText Markup Language) is the foundation of every website and web application—including Lightning Web Components (LWC). Before learning LWC, it is essential to understand how HTML works because LWC uses HTML templates to design layouts, UI, and component structure.

What is HTML?
HTML is a markup language used to create the structure of web pages. It tells the browser what elements to display—such as text, images, buttons, forms, links, etc.
HTML is made up of:
  • Elements
  • Tags
  • Attributes
  • Nested structures
 <h1>Hello Peoplewoo Skills</h1> <p>Welcome to HTML for LWC!</p> 

Watch Our Video Tutorial







Why HTML Is Important for LWC
LWC uses HTML to define the UI. Everything you see on an LWC page—labels, layouts, buttons, forms—is built using an HTML template.
In LWC:
  • Each component has a .html template file
  • HTML tags are used to display data
  • HTML attributes help link JS and LWC features
  • Conditional rendering uses HTML directives
  • Loops render lists through template syntax
 <template>     <h1>{greeting}</h1>     <button>Click Me</button> </template> 

Basic Structure of an HTML Document

 <!DOCTYPE html> <html> <head>     <title>My First Page</title> </head> <body> 
    <h1>Hello World!</h1> </body> </html> 
This structure is similar to how LWC templates are built (without <html>, <head>, <body> tags).

HTML Tags Every LWC Developer Should Know

1. Heading Tags (<h1> to <h6>)
 <h1>Main Heading</h1> <h2>Sub Heading</h2> 
2. Paragraph Tag
 <p>This is a paragraph.</p> 

3. Anchor Tag (Links)
 <a href="https://peoplewooskills.com">Visit Us</a> 

4. Image Tag
 <img src="logo.png" alt="Peoplewoo Skills Logo"> 

5. Button Tag
 <button>Click Me</button> 

6. Div & Span
 <div>Block element</div> <span>Inline text</span> 

Lists in HTML

Ordered List
 <ol>     <li>HTML</li>     <li>CSS</li> </ol> 

Unordered List
 <ul>     <li>Salesforce</li>     <li>LWC</li> </ul> 

HTML Attributes
Attributes provide extra information to elements.
 <img src="image.jpg" width="200" height="200"> 

Common Attributes
  • id
  • class
  • style
  • src
  • href

Forms in HTML
Forms are important in LWC for handling user input.
 <form>     <label>Name:</label>     <input type="text" name="username">  
   <button type="submit">Submit</button> </form> 

HTML Tables
 <table border="1">     <tr>         <th>Name</th>         <th>Age</th>   
  </tr>     <tr>         <td>Amit</td>         <td>25</td>     </tr> </table> 

Semantic HTML (Very Important for LWC)
Semantic tags make HTML meaningful and help with SEO and accessibility.

Common Semantic Tags
  • <header>
  • <nav>
  • <section>
  • <article>
  • <footer>

HTML in LWC Templates
LWC templates use HTML with Salesforce-specific enhancements.

Interpolation (Displaying JS data)
 <p>Welcome, {userName}</p> 

Conditional Rendering
 <template if:true={isVisible}>     <p>This is visible</p> </template> 

Loop Rendering
 <template for:each={students} for:item="stu">  
   <p key="{stu.id}">{stu.name}</p> </template> 

Best Practices for HTML in LWC

  • Use semantic HTML for clean structure
  • Always use key attribute inside loops
  • Do not use inline JavaScript inside HTML
  • Use class for styling with CSS, not inline styles
  • Keep HTML simple and accessible

Common Mistakes to Avoid

  • Not closing tags properly
  • Using outdated tags like <center>
  • Mixing CSS and JS inside HTML
  • Missing alt text for images
  • Incorrect nesting of elements


Dharmesh R.
The explanations are clear, and the repetition really helps to reinforce the concepts. It covers everything in detail, from the basics to more advanced topics. The course includes in-depth examples that make complex ideas easy to understand. Overall, I’m really impressed and can’t wait to explore more!


Jermaine L.
Taking this course like help me acquire all the knowledge and skills I need to excel and optimize my performance to fulfilling my operational duties in my current role as an email marketing specialist


Sumit N.
Awesome explanation. He keep repeating which helps to remind/refresh the concepts. Loved it


Varun V.
It's a great course that covers everything you need to know. After almost finishing, I feel confident using the SDC platform. Definitely a 5-star experience!


Prajakta Nimba S.
This course is perfect for anyone looking to build a solid foundation in Salesforce Data Cloud. The content is well-structured, easy to follow, and packed with real-world examples that make the concepts practical












Frequently Asked Questions (FAQ)


1. Do we need HTML to learn LWC?


Yes, HTML is mandatory because LWC uses HTML templates for UI creation.


2. Are HTML tags the same in LWC?


Yes, LWC uses standard HTML tags along with special directives like if:true and for:each.


3. Can we use inline JavaScript in LWC HTML?


No. Inline JS is not allowed for security reasons.


4. What is the most important HTML concept for LWC?


Understanding structure, attributes, forms, and semantic HTML is crucial.


5. Is HTML enough to build complete LWC apps?


No, you also need JavaScript, Apex, and CSS to build full LWC applications.


Conclusion


HTML is the backbone of web development and the starting point for building UI in Lightning Web Components. Understanding HTML makes learning LWC faster, easier, and more enjoyable. With these basics, you're ready to build real LWC components with confidence.



More SFDC Resources

Start your SFMC journey today — join our Live Training 
Need help? Chat with us on WhatsApp anytime.
Learn. Practice. Get Certified. Succeed with Peoplewoo Skills.




 ]]>Fri, 28 Nov 2025 12:34:43 +0530