Salesforce – Static Resources

The user interface(UI) in a Visualforce page can show dynamic content the value of which keeps changing based on user request. But sometimes when we need some content which should not change i.e. static in nature in the page. For example, an image may be required to remain constant. Same way content which cannot be changed in a page is known as a static resource in Salesforce.

Following are the example of static resources in Salesforce −

• CSS files
• Flash files
• Images
• JavaScript Files

The steps to create a static resource as below.

Create a Static Resource

Go to Develop -> Static resource and mention the values for name, description and file location for the static resource which you want to upload.

Step 1:

Create a CSS file which you want to upload in static resource:
Open notepad or any text editor and type the following code

h1
{
color:green;
}

Save the file with myCSS.css extension.

Step 2:

Upload the saved file as a Static resource.
Setup -> Develop -> Static Resources and click on NEW.

Give a name for the static resource say CSS Demo.
Note: Remember to set the Cache Control as “Public” and then Save it.

Step 3:

Create a visualforce page and paste the following code..

<apex:page standardstylesheets="false" showheader="false">
<apex:stylesheet value="{!$Resource.CssDemo}"/>
<h1> This text is displayed using CSS </h1>
</apex:page>

Save the page. Now you can see that the text within <h1> tag is displayed in GREEN color because you have specified so in the CSS file.

On clicking on preview the page, we get the following output.

Tip: Remove showheader=”false” and you can see that the text is displayed in normal size and not h1, because the header uses standard salesforce style sheets and your visualforce page is still overridden with this even if you said ‘ standardstylesheets=”false” ‘. To overcome this use font-size:20px or whatever it maybe.