Home > Blog > Styling in lightning component through css

Styling in lightning component through css

Hello friends, As you know already Salesforce is migrating classic to lightning environment. In Salesforce lightning we are working with components. And each component have own logic for working in Salesforce application. So, here I am going to explain, How to add styling in HTML tags? As we know already we can use css in three ways, So Here isn’t change any thing. But definition will be differenent in components. The three ways are :
  • Use Inline CSS
  • By external CSS file.
  • By create style tab in component bundle.

1. Inline CSS :

The inline style uses inside HTML tags as a “style” attribute. Generally inline css is use to decorate for single HTML tag.

2. External CSS :

If you need to use your style sheet to multiple lightning components or lighting application, then it’s always recommended to define a common style sheet in a separate file with extension as .css. Upload this external css file as a static resources and it will be included in Lightning component using <ltng:require styles=”{! $Resource.staticResourceFileName}”/> tag.

3. Style tab in component bundle :

This is the standard way to adding CSS in single lightning components. You can add CSS to a lightning component bundle by clicking the STYLE button in the Developer Console sidebar. after click on the STYLE button on component bundle, new CSS file is create with .css ext.

CSS Style Selector With .This Class :

· For Select Top Level Elements.

No need to write white space between them.

· For Select Nested Level Elements.

White space will be mandatory between them. For Example :
  1. Create a component – (InlineCss.cmp )
<aura:component > <ltng:require styles=”{!$Resource.ExternalCSS}”/> <ol> <!– Inline Css code –> <li>Inline Css</li> <br/> <ul> <li><h1 style=”color:yellow;background-color:orange;”>This is Inline css.</h1></li> <li><p style=”color:red;background-color:orange;”>This is paragraph.</p></li> <li> <div style=”color:white;background-color:orange;”> Inside HTML div. </div> </li> </ul> <br/> <!– External Css code –> <li>External Css</li> <br/> <ul> <li><h2>This is Inline css.</h2></li> <li><p class=”paragraph”>This is paragraph.</p></li> <li> <div id=”divId”> Inside HTML div. </div> </li> </ul> <br/> <!– STYLE tab in component bundle –> <li>STYLE tab in component bundle</li> <br/> <ul> <li><h3>This is Inline css.</h3></li> <li><p class=”StyleTabparagraph”>This is paragraph.</p></li> <li> <div id=”StyledivId”> Inside HTML div. </div> </li> </ul> </ol> <h4>This is h4 at top level element.</h4> <p id=”p”>This is top level element.</p> <br/> <div> <h4>This is h4 at top level element.</h4> <p id=”p”>This is top level element.</p> </div> </aura:component>  
  1. Create a static resource file – (ExternalCSS ) and upload this css file.
  h2{ color:magenta; background-color:white; }   .paragraph{ color: darkblue; background-color:white; }   #divId{ color: cyan; background-color:white; }  
  1. Create a component bundle style file – ( InlineCss.css )
.THIS { background-color:red; } .THIS h3{ color: white; background-color:green; } .THIS .StyleTabparagraph{ color:pink; background-color:green; } .THIS #StyledivId{ color:skyblue; background-color:green; } /* This is for top level CSS*/ h4.THIS{ color:gold; } #p.THIS{ color:green; } /* This is for nested level CSS*/ .THIS h4{ color:gray; } .THIS #p{ color:yellow; }  
  1. Create an Appliaction – ( StylingApplication.app )
<aura:application > <c:InlineCss /> </aura:application>   Output :   Thank You… SAZID ALI References: https://help.salesforce.com https://en.wikipedia.org/
Enquire Now
X

lets get over a cup of coffee and discuss!