using css in visualforce page

CSS stands for Cascading Style Sheets.  In this post we will see inline css in visualforce pageCSS defines how a particular html elements gets displayed.
We can use CSS in visualforce page to define how a particular visualforce component will be displayed.
It saves a lot of styling work.

Let us see how we can use css as inline with a visualforce components also lets see how we can call a css class. All the element properties can be stored in a css class and then we have to just call that class against a particular element in visualforce page.

Below is a visualforce example where css has been used:

<apex:page standardcontroller="account">
 <style>
   .buttonClass{
     width: 300px;
     text-decoration:line-through;
   }
 </style>
 <apex:form >
   <apex:pageBlock >
     <apex:panelGrid columns="1">
         <apex:commandButton value="Submit" style="width:100px"/>
         <apex:commandButton value="Submit" style="width:150px"/>
         <apex:commandButton value="Submit" style="width:220px;color:red"/>
     </apex:panelGrid>
   </apex:pageblock>
 
   <apex:pageblock >
      <apex:commandbutton value="Submit" styleclass="buttonClass"/>
   </apex:pageblock>
  </apex:form>

</apex:page>




CSS class should be defined between style tags <style></style> 
Also, we can write the css displays properties inline as done in the first three commandbuttons;
style="width:200px";

5 comments:

  1. Can we put commandButton in different places like left,right,center

    ReplyDelete
  2. how to put commandbutton in different palces like center,left,right..

    ReplyDelete
    Replies
    1. you can put your commandbutton in div block and apply css for the div block,
      ex,
      -<,div class='cssclass'>

      /div>'

      <-style>
      .cssclass{
      position: absolute;
      right: 20px;
      width: 300px;
      }
      <-/style>
      you can set set the right parameter and move the position of button

      Delete
  3. In my vf page having 9 columns out of which 8 column was over lapping 9 column.Is ti possible solve issues by CSS.

    ReplyDelete
  4. Hi,
    Plz solve this.
    How to hide a set of records for a particular user.
    Ex: hiding 50 records among 100 records for a particular user.

    ReplyDelete