'Link CSS from another folder?

I am making a website and I am trying to find a way to link my CSS file that is in other folder but I have no idea how to do it. At this moment I got it in the same folder as the HTML code. Also is it the same to link JS as the CSS because I need to link that to.

htmlcss


Solution 1:[1]

If your current folder is /current/folder/location/index.html, and your .css file is in /current/second/folder/style.css, then use this as an example:

<link rel="stylesheet" type="text/css" href="../../second/folder/style.css">

or alternatively:

<link rel="stylesheet" type="text/css" href="/current/second/folder/style.css">

However, if the second file is in `/current/folder/second/style.css, then use:

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

Solution 2:[2]

You can navigate within your folder structure with using a relative path in your html <link> tag

for example

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

will go one folder up (../) and then select the main.css in the css folder

Solution 3:[3]

for linking to a css file from a html file, the <link> tag is used with

  1. a type of text/css
  2. a rel value of stylesheet

  3. and href which is the address of your css file.

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

ADDRESS_OF_CSS_FILE is either:

  • an absolute path (the complete path of the file on your computer, including the C: driver for instance)

    <link href="C://unneccessary/toType/folders/myProjectFolder/myStylesFolder" rel=...>

  • or a relative path (the path relative to the html file that you are putting your <link> tag into it.)

    assuming this is your directory structure 

    /Desktop
  /myProjectFolder
    index.html
    /myStylesFolder
      my_styles.css

    you are putting the <link> tag inside of index.html, and index.html is inside /myProjectFolder, so the current Folder for the link tag is myProjectFolder.

    you have to tell the browser:

    • from the current directory
    • go to the /StylesFolder which is in the current directory

    • and from there, load my_styles.css file

      and you tell the browser to do that like this: 

      href="./myStylesFolder/my_styles.css"

      the browser understands ./ as the current directory, and ../ as the parent of the current directory, in this case: /Desktop

Solution 4:[4]

Put this in your index.html into head targets

<head>
  <link rel="stylesheet" href="myfile.css"/>
</head>

When you have the file in other folder you must use ../myfile.css or ../../myfile.css. The ../ is referenced to the parent folder

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 kzhao14
Solution 2 Anditthas
Solution 3
Solution 4 agonzalezmc

Related Questions