Visualforce and CSS - nothing

Question

I can't get any CSS to work at all. Am I missing something extremely obvious?

EDITED to include URLfor

<apex:page standardStylesheets="false" showHeader="false" >
    <apex:stylesheet value="{!URLFOR($Resource.cssSampleGREEN)}"/>

    <h1>test content for color output</h1>
</apex:page>

If I have a static resource called cssSampleGREEN which is the COMPLEX CSS code

<style type="text/css">
h1
{
    color:#00cdcd;
}

I should at least have green output to my h1 text but that does not happen, I just get the below. What is my error?

Answer 1

It's fine - just take the <style> tags out of stylesheet.

Static resource like this :-)

h1
{
    color: #00cdcd;
}

Answer 2

Updated with list of what you need to do:

• Use URLFOR()
• Remove your CSS style tag in your CSS file
• Name the Resource file the same as your css filename to simplify, ie, Resource is called mystyles and CSS file is called mystyles.css
• URLFOR() syntax should be like this: <apex:stylesheet value="{!URLFOR($Resource.mystyles, 'mystyles.css')}"/>
• Set cache control to "Public"
• Ensure you are setting standardStylesheets="false"

Your CSS file should look like this (note no close tag - thanks mattandneil, missed that):

h1{
    color:#00cdcd;
}

You (were) not actually using URLFOR() in your stylesheet code. Add that, using the syntax described here. You'll see that in many cases, you need a target and an id param (it would appear that you need these all the time, but this does not seem to be true).

I noticed that didn't close your style tag in the css file. You should close this because it could break things in the page.

If this doesn't work, inspect your page (right click and most browsers will give you the option to "inspect" the element you click on) and you should see the broken link as a load resource error on the page.

Perhaps you have the css in a folder that you zipped up to upload as a static resource. If it's in a folder, you'd refer to it like this:

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

Finally, make sure cache control on the static resource is set to public.