2 Replies Latest reply: Aug 5, 2014 10:50 PM by Neca RSS

    How do I link css to html file?

    Neca Community Member
    Neca Jul 31, 2014 10:53 PM

      Error says: there are not stylesheets in your project.

      The live preview shows only the html code and no styling.

      This is the code:

       

      <head>

          <meta charset="utf-8">

          <title> My Website| Stories </title>

          <link rel="stylesheet" type="text/css" href="normalize.css"/>

          <link href='http://fonts.googleapis.com/css?family=Raleway:500,700' rel='stylesheet' type='text/css'/>

          <link href='http://fonts.googleapis.com/css?family=Merienda+One' rel='stylesheet' type='text/css'/>

          <link rel="stylesheet" type="text/css" href="main.css"/>

        </head>

       

      This is how my sidebar looks:

       

      Capture.JPG

       

      Thanks for your help.

      • 199 Views
      • Tags:
        • 1. Re: How do I link css to html file?
          Peter Flynn (Adobe) Adobe Employee
          Peter Flynn (Adobe) Aug 1, 2014 12:16 AM (in response to Neca)

          Looking at your screenshot, it appears that there are indeed no CSS files in the "Website-files" folder that you have open in Edge Code.  So even if you open "index.html" directly in your web browser, without Edge Code involved, it will still display with no styles -- because the relative href in the <link> tag is not going to find a "main.css" file sitting next to "index.html."

           

          Right-click your CSS file and choose Show in Explorer to open a Windows folder view locating the file.  Open a Windows folder view for your "Website-files" folder too, and drag those CSS files into it.  Edge Code should now show the CSS files in the folder tree (the list under the "Website-files" heading in your screenshot).  After that, if you launch Live Preview (or just open "index.html" normally), you should now see your styles applied to the page.

           

          Hope that helps,

           

          - Peter

          • 2. Re: How do I link css to html file?
            Neca Community Member
            Neca Aug 5, 2014 10:50 PM (in response to Peter Flynn (Adobe))

            I fixed it by double-clicking the CSS file from the Websites files, that made the file active in the working files. The file was shown in working files but was not active. Considering the file was called from the Website file folder the href changed too. Finally, I changed the link for the type by using the Typekit code provided in Edge Code. After those changes live preview has worked nicely.

             

            Thanks a lot for your help. Cheers!