[SalesForce] How to add a custom CSS file to VisualForce

I have a simple VisualForce code:

<apex:page controller="Query_and_upload"  standardStylesheets="True" showHeader="false" sidebar="false">
<apex:stylesheet value="{URLFOR($Resourse.customCSS, 'customCSS.css')}"/>
<body>
<h1>
<apex:sectionHeader title="Please Enter user information and upload LogFile"/>
</h1>
<apex:pagemessages />
<apex:form enctype="multipart/form-data">
   <apex:pageBlock >
      <apex:facet name="footer">
      <apex:outputPanel >
         <apex:commandButton action="{!save}" value="Check and Upload" styleClass="btn"/>
      </apex:outputPanel>
      </apex:facet>
   <apex:pageBlockSection title="User Information">
      <apex:panelGrid columns="2">
         <apex:outputLabel value="First Name" for="inqueryFirstName"/>
         <apex:inputField id="inqueryFirstName" value="{!inquery.First_Name__c}" required="true"/>
         <apex:outputLabel value="Last Name" for="inqueryLastName"/>
         <apex:inputField id="inqueryLastName" value="{!inquery.Last_Name__c}"  required="true"/>
         <apex:outputLabel value="Email" for="inqueryEmail"/>
         <apex:inputField id="inqueryEmail" value="{!inquery.Email__c}"  required="true"/>
      </apex:panelGrid>
   </apex:pageBlockSection>
   <apex:pageBlockSection title="Upload File"  >
      <apex:panelGrid columns="2">
         <apex:outputLabel for="file"/>
         <apex:inputFile value="{!contentFile}" filename="{!nameFile}" id="file"/>
      </apex:panelGrid>
   </apex:pageBlockSection>
</apex:pageBlock>
</apex:form>
</body>
</apex:page>

And i have a CSS file called customCSS.css
that has the following code:

<style type="text/css">

  body{
  padding-left: 11em;
   padding-right: 11em;
   padding-top: 5em;
  font-family: Georgia, "Times New Roman",
        Times, serif;
  color: black;
   font-size: 12pt;
font-weight: 300;
text-align:justify;
   margin: 0em auto;
  width: 1200px;
  background-image: url("images/DSCN5018.gif")
}
  h1, h2, h3
{
  margin: 0;
  padding: 0;
  color: white;
}
p
{
margin-top: 1px;
line-height: 180%;
color: white
}

</style>

I have the css file in a folder called customCSS and inside the folder i have another folder called images.
And it has the an image called DSCN5018.gif
I zipped the folder called customCSS.zip,
and i uploaded the zip file as follows

Name | Setup | Develop | Static Resources | New | Name as customCSS| Upload customCSS.zip |

I know this question is redundant,
And i am doing exactly what websites are advising,
But my page doesnt seem to change,

Does anyone know why?

Best Answer

You have a typo in the code. You have misspelled Resource. As well as the typo pointed out by Rao, you are missing a '!'

Change

<apex:stylesheet value="{URLFOR($Resourse.customCSS, 'customCSS.css')}"/>

To

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

EDIT:

Another Typo. No ';'

Change

background-image: url("images/DSCN5018.gif")

To

background-image: url("images/DSCN5018.gif");

EDIT:

You mention that images is a sub folder of customCSS, and you have no / to indicate that

Change

background-image: url("images/DSCN5018.gif");

To

background-image: url("/images/DSCN5018.gif");
Related Topic