Can we have visualforce bindings inside static resource CSS, i need certain params to be dynamic and do not want to have the Big length of CSS in my VF code, instead i am hoping i can use the visualforce bindings directly in my css static resource file like below

<apex:stylesheet value="{!URLFOR($Resource.Test, 'Asset/bootstrap.min.css')}" />

This is inside static resource

.header-navbar-dark #header-navbar {
      background-color: **{!oSitesetting.sHeadercolor}**;
      -webkit-box-shadow: none;
       box-shadow: none 

Net result during output when i check the chrome console is that my visualforce bindings are not accounted and the background-color attribute above is escaped, is there any syntax i am missing?

  • 1
    Visualforce binding do not work inside static resources. I used visualforce components to add such CSS, and others in a static resources.
    – Raul
    Mar 7, 2017 at 6:16
  • You could adapt this to use JS to set the css. bit of overkill though. CSS on the page that uses oSitesetting would be best salesforce.stackexchange.com/questions/162992/…
    – Eric
    Mar 7, 2017 at 6:24

1 Answer 1


You can't do that with Static Resources but you can achieve dynamic CSS binding with a Visualforce page as external CSS file.

Visualforce page (apex:page) has a content type (contentType) property where you can specify the content type of the file. That means you can render a Visualforce page in different MIME types like JavaScript HTML and CSS etc.

To do that you have to use text/css as contentType of the Visualforce page as below.

Visualforce as external CSS file

<apex:page controller="CssController" contentType="text/css" cache="false" expires="0">

Visualforce Page where the above file is referenced as CSS file

  <apex:stylesheet value="{!URLFOR($Page.csspage)}"  />
  <h1 class="classgreen">Congratulations</h1>
  This is your new Page
  <!-- End Default Content REMOVE THIS -->

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .