Style the HTML with CSS - Visualforce

Using standard web techniques, you can add your own CSS to style the page.

1. Add this just after the <apex:page> tag:

   <style> 
       body {font-family: Arial Unicode MS;}
       h1 {color:red;}  
   </style>

   
   Most web designers don’t embed CSS, but rather reference an external CSS file. You can do this by using the <apex:stylesheet> component.
2. Replace the complete <style> section you just added with the following:

   <apex:stylesheet value="http://developer.force.com/workbooks/vfdemo.css"/>

   What if you want to host the style files (and accompanying images) themselves on Force.com? You can do that too.
3. Zip your CSS files up, or download this ZIP file as an example.
4. Click Setup | Develop | Static Resources | New.
5. Click New.
6. In the Name field, enter Style.
7. In the File field, click Browse and upload your ZIP file (or the one linked to above).
8. In the Cache Control picklist choose Public.
9. Now go back to your page and modify your stylesheet component to read as follows:

   <apex:stylesheet value=" {! URLFOR($Resource.Style, 'styles.css')} "/>

The $Resource global variable has a field for each static resource that you upload. In this case it references the static resource named style, which is what you assigned to the ZIP file.URLFOR() is a formula that constructs URLs—in this example from a static resource and an item within that resource. Now you can modify your stylesheets independently of your web pages by simply replacing the static resources.