locked
How to include local simple css file

    Question

  • I have a local htm file which try to load a local css file. Loading htm file success, but the css style is not applied.

    <WebView Source="ms-appx-web:///test.htm"/>
    <html>
    <head>
        <title>Reader</title>
        <link href='ms-appx-web:///a.css' rel='stylesheet' /></head>
    <body>1111
    </body>
    </html>
    
    body
    {
    background-color:#d0e4fe;
    }
    h1
    {
    color:orange;
    text-align:center;
    }
    p
    {
    font-family:"Times New Roman";
    font-size:20px;
    }

    test.htm and a.css are both included into the project and both under project's root folder.

    test.htm can show, but the style is not applied. Can anyone diagnose this for me?

    Thanks,

    Helin

    Wednesday, November 21, 2012 3:12 AM

Answers

  • Sorry I miss a step, it is in the properties.

    Best regards,
    Jesse


    Jesse Jiang [MSFT]
    MSDN Community Support | Feedback to us

    • Marked as answer by Helin Wang Monday, November 26, 2012 7:43 PM
    Friday, November 23, 2012 8:32 AM

All replies

  • This should be a bug, probably a bug with Visual Studio 2012 pro I am using.

    I renamed a.css to a.htm, created a webview to show it: 

    <WebView Source="ms-appx-web:///a.htm"/>

    No it does not work. And I noticed the file icon of a.htm is still icon for a css file.

    So I created new file through "add new file", b.htm, copied everything from a.htm to b.htm. Then with 

    <WebView Source="ms-appx-web:///b.htm"/>

    the content showed correctly.

    So then: I changed test.htm (the one I need to load css) to:

    <html>
    <head>
        <title>Reader</title>
        <link rel="stylesheet" href="ms-appx-web:///b.htm" />
    </head>
    <body>1111
    </body>
    </html>

    Guess what? the css style is now applied.

    My guess is if I add an css or js file, VS2012 treat it differently with htm file, and somehow it is not in the app package. Thus in my first post, the style is not applied.

    The fact that I use b.htm as stylesheet worked prove my guess.

    Hope this helps people, and MSFT can you give me some feedback why this happened?


    • Edited by Helin Wang Wednesday, November 21, 2012 7:07 PM
    Wednesday, November 21, 2012 7:06 PM
  • Hi,

    I have tested your codes and it works fine on my side.

    First, you should make sure if the html and css set as Content in your project. You can right click test.html file and set Content as Yes.

    Best regards,
    Jesse


    Jesse Jiang [MSFT]
    MSDN Community Support | Feedback to us

    • Proposed as answer by Jesse Jiang Monday, November 26, 2012 7:33 AM
    Thursday, November 22, 2012 6:45 AM
  • I am using VS 2012 professional, I am doing a right click on the a.css in solution explorer.

    I can't find "set as Content" What I see is:

    Open

    Open with

    view class diagram (grayed out)

    compile (grayed out)

    add content page (grayed out)

    check accessibility... (grayed out)

    scope to this

    new solution explorer view

    exclude from project

    cut

    copy

    remove

    rename

    properties

    Please give me more instruction, thanks!

    Thursday, November 22, 2012 10:08 PM
  • Sorry I miss a step, it is in the properties.

    Best regards,
    Jesse


    Jesse Jiang [MSFT]
    MSDN Community Support | Feedback to us

    • Marked as answer by Helin Wang Monday, November 26, 2012 7:43 PM
    Friday, November 23, 2012 8:32 AM
  • Thanks, it worked.

    I think it should be explicit pointed out in tutorial to avoid people spent hours trying to solve it.

    Also .htm file is content by default but .css file is not, I also did not find it documented anywhere.

    Monday, November 26, 2012 7:45 PM
  • Hello,

     

    Thanks for your feedback, I will involve more experts to investigate it.

     

    Best regards,

    Jesse


    Jesse Jiang [MSFT]
    MSDN Community Support | Feedback to us

    Tuesday, November 27, 2012 6:43 AM