How to refer and use CSS from static resource in Lightning Component Salesforce

In visualforce page, apex:stylesheet tag is used to refer a css file from static resource. In lightning app it could be ltng:require tag. Let see an example about the usage of ltng:require tag.

Example:

Adding CSS File into Static Resource:

Copy the below CSS code and save this code with extension of CSS in your local, then Go to salesforce Setup --> Static Resource --> New --> Enter a name as "CSSTableLibrary" --> upload the css file which is saved before --> Cache Control is Public --> Save.

1. .tableEnhancer {
2.         margin:0px;padding:0px;
3.         width:100%;
4.         box-shadow: 10px 10px 5px #888888;
5.         border:1px solid #000000;
6.        
7.         -moz-border-radius-bottomleft:8px;
8.         -webkit-border-bottom-left-radius:8px;
9.         border-bottom-left-radius:8px;
10.        
11.         -moz-border-radius-bottomright:8px;
12.         -webkit-border-bottom-right-radius:8px;
13.         border-bottom-right-radius:8px;
14.        
15.         -moz-border-radius-topright:8px;
16.         -webkit-border-top-right-radius:8px;
17.         border-top-right-radius:8px;
18.        
19.         -moz-border-radius-topleft:8px;
20.         -webkit-border-top-left-radius:8px;
21.         border-top-left-radius:8px;
22. }.tableEnhancer table{
23.     border-collapse: collapse;
24.         border-spacing: 0;
25.         width:100%;
26.         height:100%;
27.         margin:0px;padding:0px;
28. }.tableEnhancer tr:last-child td:last-child {
29.         -moz-border-radius-bottomright:8px;
30.         -webkit-border-bottom-right-radius:8px;
31.         border-bottom-right-radius:8px;
32. }
33. .tableEnhancer table tr:first-child td:first-child {
34.         -moz-border-radius-topleft:8px;
35.         -webkit-border-top-left-radius:8px;
36.         border-top-left-radius:8px;
37. }
38. .tableEnhancer table tr:first-child td:last-child {
39.         -moz-border-radius-topright:8px;
40.         -webkit-border-top-right-radius:8px;
41.         border-top-right-radius:8px;
42. }.tableEnhancer tr:last-child td:first-child{
43.         -moz-border-radius-bottomleft:8px;
44.         -webkit-border-bottom-left-radius:8px;
45.         border-bottom-left-radius:8px;
46. }.tableEnhancer tr:hover td{
47.        
48. }
49. .tableEnhancer tr:nth-child(odd){ background-color:#30d1d1; }
50. .tableEnhancer tr:nth-child(even)    { background-color:#ffffff; }.tableEnhancer td{
51.         vertical-align:middle;
52.        
53.        
54.         border:1px solid #000000;
55.         border-width:0px 1px 1px 0px;
56.         text-align:left;
57.         padding:6px;
58.         font-size:14px;
59.         font-family:Arial;
60.         font-weight:normal;
61.         color:#000000;
62. }.tableEnhancer tr:last-child td{
63.         border-width:0px 1px 0px 0px;
64. }.tableEnhancer tr td:last-child{
65.         border-width:0px 0px 1px 0px;
66. }.tableEnhancer tr:last-child td:last-child{
67.         border-width:0px 0px 0px 0px;
68. }
69. .tableEnhancer tr:first-child td{
70.                 background:-o-linear-gradient(bottom, #28b8ed 5%, #28b8ed 100%);        background:-webkit-gradient( linear, left top, leftbottom, color-stop(0.05, #28b8ed), color-stop(1, #28b8ed) );
71.         background:-moz-linear-gradient( center top, #28b8ed 5%, #28b8ed 100% );
72.         filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#28b8ed", endColorstr="#28b8ed");      background: -o-linear-gradient(top,#28b8ed,28b8ed);
73.  
74.         background-color:#28b8ed;
75.         border:0px solid #000000;
76.         text-align:center;
77.         border-width:0px 0px 1px 1px;
78.         font-size:16px;
79.         font-family:Comic Sans MS;
80.         font-weight:bold;
81.         color:#ffffff;
82. }
83. .tableEnhancer tr:first-child:hover td{
84.         background:-o-linear-gradient(bottom, #28b8ed 5%, #28b8ed 100%);        background:-webkit-gradient( linear, left top, left bottom,color-stop(0.05, #28b8ed), color-stop(1, #28b8ed) );
85.         background:-moz-linear-gradient( center top, #28b8ed 5%, #28b8ed 100% );
86.         filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#28b8ed", endColorstr="#28b8ed");      background: -o-linear-gradient(top,#28b8ed,28b8ed);
87.  
88.         background-color:#28b8ed;
89. }
90. .tableEnhancer tr:first-child td:first-child{
91.         border-width:0px 0px 1px 0px;
92. }
93. .tableEnhancer tr:first-child td:last-child{
94.         border-width:0px 0px 1px 1px;
95. }

Creating Lightning Component:

Paste the below code in your lighting component.

1. <aura:component >
2.     <ltng:require styles="/resource/CSSTableLibrary"/>
3.     <div class="tableEnhancer">
4.         <table>
5.             <tr>
6.                 <td>
7.                     Title 1
8.                 </td>
9.                 <td >
10.                     Title 2
11.                 </td>
12.                 <td>
13.                     Title 3
14.                 </td>
15.             </tr>
16.             <tr>
17.                 <td >
18.                     Row 1
19.                 </td>
20.                 <td>
21.                     Row 1
22.                 </td>
23.                 <td>
24.                     Row 1
25.                 </td>
26.             </tr>
27.             <tr>
28.                 <td >
29.                     Row 2
30.                 </td>
31.                 <td>
32.                     Row 2
33.                 </td>
34.                 <td>
35.                     Row 2
36.                 </td>
37.             </tr>
38.             <tr>
39.                 <td >
40.                     Row 2
41.                 </td>
42.                 <td>
43.                     Row 2
44.                 </td>
45.                 <td>
46.                     Row 2
47.                 </td>
48.             </tr>
49.             <tr>
50.                 <td >
51.                     Row 3
52.                 </td>
53.                 <td>
54.                     Row 3
55.                 </td>
56.                 <td>
57.                     Row 3
58.                 </td>
59.             </tr>
60.         </table>
61.     </div>
62. </aura:component>

Referring CSS from Static Resource:

Above lightning component code is referring a static resource file using ltng:require tag with the attribute of styles.

    <ltng:require styles="/resource/CSSTableLibrary"/>

Where CSSTableLibrary is the "Static Resource" name.

<div class="tableEnhancer"> --> tableEnhancer is the CSS class name. It's referring from static resource.

Referring CSS from Static Resource ZIP file(From folder):

    <ltng:require styles="/resource/CSSTableLibrary/css/TableEnhancer.css"/>

CSSTableLibrary  - Static Resource name.

css - Folder name

TableEnhancer.css - CSS file name.