I finally realized what a blunder i have made by hardcoding the URL of images in my CSS file. Everytime i move my code from one instance to another the URL keeps on changing and i have to manually edit each and every URL.....

But i found out that there was a very very easy way out there... Thanks to the community forums

This is the way you have to use CSS in your visualforce pages..

Step 1: Create a zip file of the CSS file with the Associated images..

Example: If you have a CSS called mystylings.css and all images used in the CSS are inside a folder called "Images", then create a folder containing both "mystylings.css" and "Images" folder... Suppose you name the folder as "mystylings"...

Create a zip file of the folder "mystylings"...

No need to change the image URL as i have mentioned here.

Suppose you name the zip file as "stylings.zip".

Step 2: Now upload this zip file as it is in Static Resources. Name the resource as "stylings" for example.

Step 3: Now you can access the "mystylings.css" file in your visualforce page as below.....

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

Note that we have specified mystylings/mystylings.css ... This is because we created a folder called "mystylings" and the file "mystylings.css" resides inside this folder....

That's it and you are done... You can move your Visualforce Page with CSS across environments without changing the CSS

I found some style specifications which i thought would be worth sharing...

Here it is..


Get Rid of   for adding white spaces to your Visualforce Page. Here is a better way of doing it..

<div style="position:relative;left:75px;">

Left specifies how many pixels from the left of the screen should the component be displaced. Right,top,bottom also can be used..

Put your Visualforce tags inside this div.

<div style="border-width:2px;border-style:solid;border-color:orange;">

Visualforce tags placed inside this div will appear with a orange coloured box.


IE displays a blue border around images to denote that it is a link. To remove it use the following code

a img {border-style: none; }

IE does not recognize this property, whereas Firefox and Safari does. To overcome this, use the following code.

a span{
            visibility:hidden;
         }  

Check this article for the complete description ... Click here . Check the bottom most part of the article for a full example.

VisualForce offers the ability to customize the look and feel of your VisualForce Pages. This guide is intended to cover the methodologies to be followed, and some best practices while implementing your own look and feel.

Getting Started:


<apex:page>is the topmost tag in any VisualForce Page. This tag determines the styles to be used in your VisualForce pages. Let us start by creating a simple page with some basic styles.

<apex:page showheader="false" sidebar="false">
<apex:form>
<h1> This is my first VisualForce Page! </h1>
</apex:form>
</apex:page>

Let’s walk through the code line by line


<apex:page showheader="false" sidebar="false">

When you set showheader=”false” the sidebar is also removed by default, however when you set sidebar=”false” header will still display (obviously J )


The point to note here is when the header is removed Salesforce default stylesheets is no longer applied. Hence if you paste ordinary HTML code it will work perfectly.


One step further…..


Let’s modify the code and add a button..

<apex:page showheader="false" sidebar="false">
<apex:form>
<h1> This is my first VisualForce Page! </h1>
<apex:commandButton value="Done"></apex:commandButton>
</apex:form>
</apex:page>

What did you notice? You’re right, the size of the text has reduced when you have not done anything to it. Why is this so?


It is because we have used <apex:commandbutton> tag. This causes salesforce Standard stylesheets to be used. Not only this tag, but there are many others which cause a conflict. Hey!!, don’t worry there’s a way out there.

<apex:page showheader="false" sidebar="false" standardstylesheets=”false”>

This will remove the salesforce standard stylesheets and you can now use your own styles without any worries. But, of course there are many more problems to be faced…

Now lets add some color and effects…

<apex:page showheader="false" sidebar="false">
<apex:form>
<h1 style="text-align:center;color:blue;">
This is my first VisualForce Page! </h1>
</apex:form>
</apex:page>

This is called INLINE STYLING, it is called so because we have used style=” “ attribute inside the <h1> tag.


When not to use INLINE STYLING????


Suppose if you have ten <h1> tags in your page and you want all the text displayed in BLUE. Ideally you would have to add INLINE styles in all your ten <h1> tags.


To overcome this, we use <style> tag. We will modify our previous example using <style> tag.

<apex:page showheader="false" sidebar="false">
<style>
h1
{
text-align:center;
color:blue;
}
</style>
<apex:form>
<marquee> <h1>
This is my first VisualForce Page! </h1>
</marquee>
<h1> This text is displayed without INLINE styles </h1>   
</apex:form>
</apex:page>

USING STYLECLASS


How about a more complicated page with styleclass, adding many styles into a single holder is called a styleclass. You can then use the styleclass anywhere in your page

<apex:page showheader="false" sidebar="false">
<apex:page showheader="false" sidebar="false" standardcontroller="Account" standardstylesheets="false">
<style>
.red
{
background-color:red;
}
.green
{
background-color:green;
}
.blue
{
background-color:blue;
}
</style> 
<apex:form >
<h1 style="text-align:center;color:blue;">  This is my first VisualForce Page! </h1>
<apex:datatable value="{!Account.Contacts}" var="con" border="1" cellspacing="5" cellpadding="5" columnClasses="red,green,blue">
<apex:column headervalue="Contact FirstName"> <apex:outputfield value="{!con.FirstName}"/> </apex:column>
<apex:column headervalue="Contact LastName"> <apex:outputfield value="{!con.LastName}"/> </apex:column>
<apex:column headervalue="Contact Name"> <apex:outputfield value="{!con.Title}"/> </apex:column>
</apex:datatable>    
</apex:form>
</apex:page>

Here when you say columnclasses="red,green,blue" in <apex:datatable> itag it means that the styleclass "red" would be applied for the first column, "green" would be applied for the second column and "blue" would be applied for the third column. When you have a fourth column "red" styleclass would be applied again, because it works in a repetitive fashion. You can use as many classses as you need for any number of columns.


That’s it for you to get started..


The next step is using CSS in your visualforce pages. Here it is!! Click here!!