Example for Aura Lightining

expressions: 
{! }
{!v.}
{!c.}
{! this}

Applying CSS
-------------------

Example  1 :Creating a component :

Component : 
<aura:component >
<h1> This is my data </h1>
</aura:component>

Application :

<aura:application >
<c:Cap1></c:Cap1>
</aura:application>


Example 2: Applying CSS on component :

<aura:component>
  <div class="white">
    Hello, HTML!
  </div>
  
  <h2>Check out the style in this list.</h2>
  
  <ul>
    <li class="red">I'm red.</li>
    <li class="blue">I'm blue.</li>
    <li class="green">I'm green.</li>
  </ul>
</aura:component>

Style :
.THIS {
    background-color: grey;
}

.THIS.white {
    background-color: white;
}

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

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

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



Example :3: Creating attributes  for a component

Component Name: first1

<aura:component >
    <aura:attribute name="name" type="String" default="cyan" />
    {! v.name}
</aura:component>


Application :

<aura:application >
<c:first1></c:first1>
</aura:application>