Compare Vf page and Lightning page

Some of us feel like lightning is altogether different from visual force pages but the fact is when we try to co relate the vf page with the lightning component , it would be very easy to understand the lightning concepts.

Following vf page displays different colors with text by making use of css styles and next followed lightning component also displays same  by making use css styles again.   Both are almost similar with minor differences.
 


Visual force page with "Hello world" multiple colors
--------------------------------------------------------------------------------------------------------------------------
<apex:page >

   <style>

.container {
    padding-top: 20px;
     background-color: yellow;
}

.blue1
{
   background-color: blue; }
   .red1
{
   background-color: red; }
 
   .green1
{
   background-color: green; }
 


   </style>

<div class="container">
<h1>Hello Visul force styles!</h1>

 <div >
         <h1>This is thimma code</h1>
         <div class="red1">I'm red.</div>
         <div class="blue1">I'm blue.</div>
         <div class="green1">I'm green.</div>
     </div>


</div>

 </apex:page>
--------------------------------------------------------------------------------------------------------------------------

Lightning  page with "Hello world" multiple colors
CMP name: Helloworld

--------------------------------------------------------------------------------------------------------------------------

<aura:component implements="force:appHostable">
<h1>Hello Lightning Component!</h1>
    <style>
     
    .THIS {
    background-color: yellow;
    padding-top: 10px;
}

h1.THIS {
    font-size:60px;
}

.THIS h1{
    font-weight: bold;
    padding: 10px;
}

.THIS.container {
    padding-top: 20px;
}

.THIS .red {
    background-color: red;
    padding: 10px;
}

.THIS .blue {
    background-color: blue;
    padding: 10px;
}

.THIS .green {
    background-color: green;
    padding: 10px;
}
 
 
 
    </style>
    <div class="container">
         <h1>This is thimma code</h1>
         <div class="red">I'm red.</div>
         <div class="blue">I'm blue.</div>
         <div class="green">I'm green.</div>
     </div>
 

</aura:component>
-------------------------------------------------------------------------------------------------------------------------