HOW TO ADD CSS STYLE TO SALESFORCE LIGHTNING COMPONENT ?

CSS Styling To Your Lightning Component

To add styling to your salesforce lightning component you just have to add CSS styling in STYLE section available on the right-hand side of a developer console.

                                       

Now let's create lightning component first and then we'll add style to it.

COMPONENT    HelloStyle.cmp

<aura:component >

<div> Hello HTML</div>

     <h2>Check the style in this list</h2>

       <ul>

         <li >I am red</li>

         <li > I am blue</li>

         <li > I am green</li>

       </ul>

</aura:component>

• Now we'll add styling to it in STYLE section.

STYLE    HelloStyle.css

.THIS {

           background-color:grey;

          }

.THIS .red{

                background-color:red;

               }

.THIS .green{

                   background-color:green;

                  }

.THIS .blue{

                 background-color:blue;

                }   

• Let's break down above code in 4 different sections to understand it. 

        .THIS {

                  background-color:grey;

                 }

• This above first section will define background colour as grey for all text inside the component.

       .THIS .red{

                        background-color:red;

                      }

• This above second section will define background colour as red for .red CSS class. Which means whenever we want text background colour as red then we will use this class.
• Similarly for green and blue background colour, whenever we want to use a background colour as green or blue we will just call .green or .blue class inside HTML tag.
• To learn more basics about HTML and CSS on Link.

• Now let's add our CSS to a lightning component which we have created above 

COMPONENT    HelloStyle.cmp

<aura:component >

<div > Hello HTML </div>

           <h2>Check the style in this list</h2>

             <ul>

                <li class="red">I am red</li>

                <li class="blue"> I am blue</li>

                <li class ="green"> I am green</li>

            </ul>

</aura:component>

• In this way, we'll add our CSS style class inside HTML tags.
• Now let's see a preview of the above lightning component by adding it inside the lightning application.

APPLICATION    HelloStyleApp.app

<aura:application >

    <c:HelloStyle />

</aura:application>

OUTPUT  

ALTERNATIVE WAY 

• You can also use existing styling from Static Resource. For that, we just have to upload your styling or bootstrap file in Static Resource and refer it inside a lightning component by using the following tag

©Navigation 

Setup -> Static Resources -> New (upload your file here)

• To refer uploaded file we will add below code inside a lightning component 

      <ltng : require style= "/resource/filename"/>

        <div class="StyleNameFromFile">

          Hello Salesforce Kid

       <div/>

• The above code will use class StyleNameFromFile from filename file which provides style to Hello Salesforce Kid.

WOHOOO......YOU HAVE JUST ADDED STYLE IN YOUR LIGHTNING COMPONENT.

If you like this salesforcekid learning platform please let me know in the Comment section...Also, Share with your salesforce folks wish you 
Happy learning ☁️⚡️ (Learn. Help. Share.)

<< PREVIOUS                                                        NEXT >>