Use CSS

3 Ways to Use CSS In Lightning Component.

Lightning Component

Sharing is caring!

Prerequisites : Basic understanding of Lightning Components and CSS.

In this post, we are seeing that how to use CSS (Cascading Style Sheets) style  in Salesforce lightning components. You can give style to your lightning components with CSS.

In Lightning components, basically we can use CSS by 3 ways-:

  1. Use Inline CSS
  2. By external CSS file.
  3. By create style tab in component bundle.

1. Inline  CSS :

basically, we can use inline style sheet for apply a unique style for a particular component HTML element. The inline style uses the HTML “style” attribute.
The below example will showing you that how to use Inline CSS in lightning component.

demoComponent.cmp

Output -:

Use CSS in lightning component

2. By External CSS file. :

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.

The below example will showing you that how to use External styleSheet CSS in lightning component.

demoCss.css (external CSS file)

Use CSS in lightning component
Upload External CSS file as static resource

demoComponent.cmp

Output-:

Use CSS in lightning component

3. By create STYLE tab in component bundle. :

This is the standard way to adding CSS for lightning components.  You can add CSS to a lightning component bundle by clicking the STYLE button in the Developer Console sidebar.

Use CSS in lightning component

after click on the STYLE button on component bundle, new CSS file is create with .css ext.

Use CSS in lightning component

Here we can write CSS style for our lightning component.
Always Add a special .THIS CSS class, to all top-level elements in lightning component. it’s effectively adds namespacing to CSS and helps prevent one component’s CSS from blowing away another component’s styling.

if you are not using .THIS class for all top-level element then framework throws an error.

The below example will showing you that how to use CSS by STYLE tab in lightning component. :

demoComponent.cmp

demoComponent.css

Output-:

Use CSS in lightning component

Some Useful CSS Style Selector With .This Class.

  • For Select Top Level Elements 

Use CSS in lightning component
select All TOP level : output

  • For Select Nested Level Elements (Not top-level).

    Use CSS in lightning component
    select nested level elements: Output

     

  • Select All Top Level Elements With Class.

    Use CSS in lightning component
    Select ALL Top level elements With CLASS : Output
  • Select All Nested Level Elements With Class.

    Use CSS in lightning component
    select nested level elements with class: Output
  • Select Elements With Unique ID.

    Use CSS in lightning component
    Select Elements With ID

For Full CSS Selector Reference : CSS Selectors

Note : Some of CSS selector are not supported in Lightning component STYLE tab page.

Related Resources :

CSS Tutorial for beginners

CSS in Lightning Component.

Tips for CSS in Lightning Component

Like our facebook page for new post updates.? & Don’t forget to bookmark this site for your future reference.

if you have any suggestions or issue with it, you can post in comment box  😉

Sharing is caring!

(Visited 9,496 times, 69 visits today)

4 comments

Leave a Reply