Titanium Community Questions & Answer Archive

We felt that 6+ years of knowledge should not die so this is the Titanium Community Questions & Answer Archive

Local CSS not used in Local HTML Webview

Hello! I created a simple html file using the kitchen sink example.

The local stylesheet is not recognized. I can change it to a hosted url, e.g. http://www.fred.com/file.css and it works. But the local file does not.

Perhaps I'm confused about what is the current directory for my html file?

I have tried relative path, absolute path, etc.


  <title>Sample HTML</title>
  <link rel="stylesheet" href="main/home/iphone.07.css" type="text/css" />
— asked May 11th 2010 by Peruna Mustang
  • css
  • html
  • webview

3 Answers

  • you must reference the CSS relative to the directory of the HTML file, so if index.html is in Resources/html/index.html and style.css is in Resources/css/style.css, you must include it via the path ../css/style.css in index.html.

    — answered May 11th 2010 by Kevin Whinnery
  • Beware of how you store ur index.html locally,
    Normally the file you put into Rescources folder will goto Titanium.Filesystem.resourcesDirectory E.G.:
    While if you save the file using the kitchen sink example, you most likely will use Titanium.Filesystem.applicationDataDirectory E.G.
    Applicatons/4Q3YYASGDA-4QHY-Q43H-Q3HAGB-Q3H/My App Name.app/
    So you either use relative path to your File.html..go back one folder and towards ur app name folder or use the absulote path like below example or simply save all your files to same directory.

    Use absoute path
    var f = Titanium.Filesystem.getFile( Titanium.Filesystem.applicationDataDirectory,'Myfile.html');

    myHtml =…. link type='text/css' rel='stylesheet'
    href='//'+Titanium.Filesystem.resourcesDirectory+'/style.css" …..

    or 'Put in same directory'

    var f = Titanium.Filesystem.getFile( Titanium.Filesystem.resourcesDirectory,'Myfile.html');

    myHtml = ….link type='text/css' rel='stylesheet' href='style.css'….


    — answered August 20th 2010 by Lawrence Cheuk
  • In local files instead of this code that works only on iOS

    <link rel="stylesheet" href="relative-path.css" type="text/css" />

    You can use this one that also works on android:

        @import url(relative-path.css);
    — answered September 13th 2012 by Douglas Oliveira
The ownership of individual contributions to this community generated content is retained by the authors of their contributions.
All trademarks remain the property of the respective owner.