Help with apex pages and css

Question

I have an apex class with the following content

public class RemoteGoogleController {

    transient public string googleHome { get; set; }
    transient public string googleHome1{ get; set; }
    transient public string test{get; set;}

    String url ='http://xx.xx.xx.xx/wrapper/header';
    String url1 ='http://xx.xx.xx.xx/wrapper/footer';

    public void loadGoogleHome() {

        Http endpoint = new Http();

        HttpRequest req = new HttpRequest();

        req.setEndpoint(url);

        req.setMethod('GET');

        HttpResponse res = endpoint.send(req);

        googleHome = res.getBody();

        System.debug('Resp1 **********' + googleHome);
        HttpRequest req1 = new HttpRequest();

        req.setEndpoint(url1);

        req.setMethod('GET');

        HttpResponse res1 = endpoint.send(req);

        googleHome1 = res1.getBody();

        test= googleHome + googleHome1;

   }

The visualforce page has:

<apex:page controller="RemoteGoogleController" action="{!loadGoogleHome}" contentType="text/html" showHeader="false" standardStylesheets="false">

        <apex:stylesheet value="http://xx.xx.xx.xx/modules/system/system.messages.css?"/>
        <apex:stylesheet value="http://xx.xx.xx.xx/modules/system/system.theme.css?"/>
        <apex:stylesheet value="http://xx.xx.xx.xx/sites/all/modules/date/date_api/date.css?"/>
        <apex:stylesheet value="http://xx.xx.xx.xx/sites/all/modules/date/date_popup/themes/datepicker.1.7.css?"/>
        <apex:stylesheet value="http://xx.xx.xx.xx/modules/field/theme/field.css?"/>
        <apex:stylesheet value="http://xx.xx.xx.xx/modules/search/search.css?"/>
        <apex:stylesheet value="http://xx.xx.xx.xx/sites/all/modules/views/css/views.css?"/>
        <apex:stylesheet value="http://xx.xx.xx.xx/sites/all/modules/lingotek/style/base.css?"/>
        <apex:stylesheet value="http://xx.xx.xx.xx/sites/all/modules/ctools/css/ctools.css?"/>
        <apex:stylesheet value="http://xx.xx.xx.xx/modules/locale/locale.css?"/>
        <apex:stylesheet value="http://xx.xx.xx.xx/sites/all/themes/hgst/style.css?"/>
        <apex:stylesheet value="http://xx.xx.xx.xx/sites/all/themes/hgst/js/fancyapps-fancyBox/source/jquery.fancybox.css?"/>



        <apex:outputText  style="" rendered="true" value="{!test}"/>



</apex:page>

Right now, the CSS is not being applied to the HTML page when I do a preview, could you please help.

EDIT: I had tried using static resources by making a zip file and referencing the css files. I had removed the URLs before trying this.

  <apex:stylesheet value="{!URLFOR($Resource.CSSFILES,'system.messages.css')}"/>
        <apex:stylesheet value="{!URLFOR($Resource.CSSFILES,'system.theme.css')}"/>
        <apex:stylesheet value="{!URLFOR($Resource.CSSFILES,'date.css')}"/>
        <apex:stylesheet value="{!URLFOR($Resource.CSSFILES,'datepicker.1.7.css')}"/>
        <apex:stylesheet value="{!URLFOR($Resource.CSSFILES,'field.css')}"/>
        <apex:stylesheet value="{!URLFOR($Resource.CSSFILES,'search.css')}"/>
        <apex:stylesheet value="{!URLFOR($Resource.CSSFILES,'views.css')}"/>
        <apex:stylesheet value="{!URLFOR($Resource.CSSFILES,'base.css')}"/>
        <apex:stylesheet value="{!URLFOR($Resource.CSSFILES,'ctools.css')}"/>
        <apex:stylesheet value="{!URLFOR($Resource.CSSFILES,'locale.css')}"/>
        <apex:stylesheet value="{!URLFOR($Resource.CSSFILES,'style.css')}"/>
        <apex:stylesheet value="{!URLFOR($Resource.CSSFILES,'jquery.fancybox.css')}"/>

Answer 1

I recommend you upload your files to a Static Resource and reference them using URLFOR($Resource.MyResourceName).

It may be easier to zip them up into one resource and reference them like URLFOR($Resource.MyZipFile, "/path/to/file/MyResourceName").

Answer 2

Thankyou Rao and Adrian for helping me look at the different areas. I was finally able to figure out the issue. Salesforce security settings wasnt allowing the files to be accessed, I had to make an exception for the ip-address under Remote Site Details

Once I made this exception, the CSS content loaded without any issues.

Appreciate your help.

Regards