Monday, March 11, 2013

Usage of Inline, Outline and External Styles in Visualforce Page

Visualforce Page:

Ex:1

<apex:page >
      <apex:stylesheet value="{!$Resource.stylefile}"/>
      <style>
           .labelcls{
                 font-size:22px;
                 font-family:Times;
                 color:orange
                       }
      </style>
  <apex:form >
    <div align="center">
         <apex:outputLabel style="font-size:18px; font-family:Cambria; color:red" > Ctrla Technologies                                      
         </apex:outputLabel>
    </div>
    <apex:outputLabel styleClass="labelcls" > Ctrla Technologies </apex:outputLabel>
    <apex:CommandButton value="Save"/>
    <input type="button" value="Save" class="btn"/>
    <Apex:Pageblock >
    <apex:pageBlockSection >
    <apex:pageBlockSectionItem >
        <apex:outputlabel styleclass="labelCol">Name</apex:outputlabel>
        <apex:inputText />
    </apex:pageBlockSectionItem>  
    </apex:pageBlockSection>
    </Apex:Pageblock>
  </apex:form>
</apex:page>

stylefile: It is a CSS file in Static Resources:

        .labelcol{   
               font-family:cambria;
               color:green;
                    }

Ex:2

<apex:page>

       <--outline Styles-->
       <style>
       .labelclass{
            font-size:20px;
            color:#BEDA59;
            font-family:monotype corsiva;
                      }
       .bodyDiv {
            background-color:#DDDDDD !important;
                      }
        </style>
        <--External Style sheets  calling-->
        <!--<apex:stylesheet value="{!$Resource.ext}"/>-->
    <apex:form >

    <apex:outputLabel styleClass="labelclass"><marquee> Good Morning CtrlA</marquee>         </apex:outputlabel>
   <div align="right">

 <apex:outputlabel title="ctrla" style="Color:red; font-size:18px; font-family:Cambria">This is Ctrla Technologies..</apex:outputlabel><br/>
 </div>    
  <apex:outputlabel styleclass="labelclass" style="font-family:Cambria" >Good Morning!!</apex:outputlabel> 
 </apex:form>
</apex:page>

stylefileIt is a CSS file in Static Resources:

.labelclass{   
         font-family:cambria;
         color:green;
         font-size:12px;
            }

No comments:

Post a Comment