Lightning Component Styles and Usage Example in Salesforce

This article will help you to know about how to use Style and Refer it on Lightning Component app,

Step 1: Create a lightning component.

Step 2: Double click on "Style" from the side bar.

Step 3: Clear the existing code and Paste the below code.

1. .THIS.textStyleMaker {
2.   -webkit-box-sizing: content-box;
3.   -moz-box-sizing: content-box;
4.   box-sizing: content-box;
5.   border: none;
6.   font: normal 76px/2 "Aclonica", Helvetica, sans-serif;
7.   color: #0096ff;
8.   text-align: center;
9.   -o-text-overflow: ellipsis;
10.   text-overflow: ellipsis;
11.   background: -webkit-repeating-radial-gradient(circle closest-side, rgba(255,255,255,1) 0, rgba(243,243,243,1) 50%, rgba(237,237,237,1) 97%,rgba(255,255,255,1) 100%);
12.   background: -moz-repeating-radial-gradient(circle closest-side, rgba(255,255,255,1) 0, rgba(243,243,243,1) 50%, rgba(237,237,237,1) 97%,rgba(255,255,255,1) 100%);
13.   background: repeating-radial-gradient(circle closest-side, rgba(255,255,255,1) 0, rgba(243,243,243,1) 50%, rgba(237,237,237,1) 97%,rgba(255,255,255,1) 100%);
14.   background-position: 50% 50%;
15.   -webkit-background-origin: padding-box;
16.   background-origin: padding-box;
17.   -webkit-background-clip: border-box;
18.   background-clip: border-box;
19.   -webkit-background-size: auto auto;
20.   background-size: auto auto;
21. }

Note: CSS selector must begin with '.cStyleComponentWithImage' or '.THIS'

Where "StyleComponentWithImage" is my component name.

Step 4: Refer the above css style in component like below.

1. <aura:component >
2.     <div class="textStyleMaker">Lightning World</div>
3.     <br/>
4.     <center>
5.         <img src="https://developer.salesforce.com/resource/images/trailhead/badges/modules/trailhead_module_lightning_experience_basics.png"/>
6.     </center>
7.    
8. </aura:component

Output: