1.3 Use static resource to keep the css file

Introduction to Static Resource

In front end development, we know that it is always a good practice to separate html, css and javascript code in different files. Therefore, all those different code won’t be intermingled with each other. We should keep this good practice in Visualforce development, too!

However, in Salesforce, you can’t create a single css or javascript file. So what we need to do here is to utilise the Salesforce feature called static resource.

Static resource allow you to upload static files, like css or javascript files or zip files into Salesforce server and use them later. You can also upload javascript libraries like jQuery as static resource in order to use them.

Now that you understand what is static resource, we can separate our previous page’s css code into a separate file now.

A Brief Example

Create the below simplecss.css file in your local machine:

h1 {
    font-size: 25px;
}
#Hello {
    color: red;
    font-size:20px;
}

In your Salesforce org, click Setup > Develop > Static Resources, click new.

In Name field, name it as SimpleCss, and choose the css file you have just created. Choose public. Then click Save.

Now go back to our previous SimpleVisualforcePage code. Update it to be:


<apex:page >
    <apex:stylesheet value="{!$Resource.SimpleCss}"/>
    <h1>
        Simple Html page2
    </h1>
    <p>
        This is our first simple Visualforce page. 
    </p>
    <p id="Hello">
        Hello Visualforce!
    </p>
</apex:page>

Try to open the page by yourself!

As you can see, using javascript and css files in static resources is very straight-forward.

With those basic knowledge, we will come to the real Visualforce page in the next post.

Next Post

1.4 Use standard controller to connect to an SObject

Subscribe to Sfdcinpractice

Subscribe to get the latest blogs and tutorials of sfdcinpractice. No spam, no trash, only the awesome posts from sfdcinpractice. 

Leave a Reply

Your email address will not be published / Required fields are marked *