Apply the CSS (Cascade Style Sheet) on component

Example 1: Create the component (eg., CSSDemo.cmp) as below

 <aura:component >
            <h1>This is line one</h1>
            <div>This is second line</div>
            <div>This is third line</div>
            <div>This is fourth line</div>
 </aura:component

Click on “Style” element from the component bundle

.THIS {
    background-color:yellow;
 }

Create an application eg., cssDemoApp.app, and include the CSSDemo.cmp and preview.

Example 2: Using css classes
Step 1: Create component

<aura:component >
        <h1>This is line one</h1>
        <div class="redClass">This is red line</div>
        <div class="greenClass">This is green line</div>
        <div class="blueClass">This is blue line</div>
</aura:component>

Step 2: Add below CSS code in stlye css element

.THIS {
background-color:yellow;
padding-top: 40px;
padding-left: 40px;

}

.THIS.redClass{
background-color: red;
}

.THIS.greenClass{
background-color: green;
}

.THIS.blueClass{
background-color: blue;
}

Step 3: Create an application and include the component (preview)

 <aura:application >
            <c:CSSClassDemo></c:CSSClassDemo>
 </aura:application>

aura:components can be used
i. aura:appplication
ii. app page/home page/record page
iii. lightning component tab