CODEWITHSUNDEEP
htmlcss
user4307777
user4307777

Reputation:

Link a .css file in another folder

Imagine that I have a folder "Website" where my files for that website are stored, and another folder with fonts, and that the font folder has more folders for each font. My html and css file is directly on the website folder. My font-face-css file is on the /font folder.

I want to link my css file to my html file, so I do this: href="stylesheet.css"

I also want to link my font-face-css file to my html file, so what should I put inside href=""?

And I also want to link my fonts, which are in their own folder, which is also inside the font folder which is where the css file is to my font-face-css file, what should I put inside the src:?

 1 Website folder
    1.1 Fonts folder (/fonts)
       1.1.1 Font1 folder (/fonts/font1)
             1.1.1.1 ttf file (/font/font1/font1.ttf)
             1.1.1.2 svg file (/font/font1/font1.svg)
       1.1.2 Font2 folder (/fonts/font2)
             1.1.2.1 ttf file (/font/font1/font2.ttf)
             1.1.2.2 svg file (/font/font1/font2.svg)
    1.2 html file (file.html)
    1.3 css file  (file.css)

Upvotes: 22

Views: 183480

Answers (5)

Sova0015
Sova0015

Reputation: 1

Update for everyone who can't find answer for linking css to html when css is in different folder. You need just put .(dot) before everything in href. I have like this href="./public/css/styles.css", but main html index.html i have in main folder where is everything. That's how it works for me at least.

Upvotes: 0

trantuliem
trantuliem

Reputation: 11

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
.tree-view-com ul li {
  position: relative;
  list-style: none;
}
.tree-view-com .tree-view-child > li{
  padding-bottom: 30px;
}
.tree-view-com .tree-view-child > li:last-of-type{
  padding-bottom: 0px;
}
 
.tree-view-com ul li a .c-icon {
  margin-right: 10px;
  position: relative;
  top: 2px;
}
.tree-view-com ul > li > ul {
  margin-top: 20px;
  position: relative;
}
.tree-view-com > ul > li:before {
  content: "";
  border-left: 1px dashed #ccc;
  position: absolute;
  height: calc(100% - 30px - 5px);
  z-index: 1;
  left: 8px;
  top: 30px;
}
.tree-view-com > ul > li > ul > li:before {
  content: "";
  border-top: 1px dashed #ccc;
  position: absolute;
  width: 25px;
  left: -32px;
  top: 12px;
}
<div class="tree-view-com">
    <ul class="tree-view-parent">
        <li>
            <a href=""><i class="fa fa-folder c-icon c-icon-list" aria-hidden="true"></i> folder</a>
            <ul class="tree-view-child">
                <li>
                    <a href="" class="document-title">
                        <i class="fa fa-folder c-icon" aria-hidden="true"></i>
                        sub folder 1
                    </a>
                </li>
                <li>
                    <a href="" class="document-title">
                        <i class="fa fa-folder c-icon" aria-hidden="true"></i>
                        sub folder 2
                    </a>
                </li>
                <li>
                    <a href="" class="document-title">
                        <i class="fa fa-folder c-icon" aria-hidden="true"></i>
                        sub folder 3
                    </a>
                </li>
            </ul>
        </li>
    </ul>
</div>

Upvotes: 0

Edwin Samuel Jonathan
Edwin Samuel Jonathan

Reputation: 198

I think what you want to do is 

<link rel="stylesheet" type="text/css" href="font/font-face/my-font-face.css">

Upvotes: 2

mrahmat
mrahmat

Reputation: 617

I dont get it clearly, do you want to link an external css as the structure of files you defined above? If yes then just use the link tag :

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

so basically for files that are under your website folder (folder containing your index) you directly call it. For each successive folder use the "/" for example in your case :

    <link rel="stylesheet" type="text/css" href="Fonts/Font1/file name">
    <link rel="stylesheet" type="text/css" href="Fonts/Font2/file name">

Upvotes: 16

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85653

check this quick reminder of file path

Here is all you need to know about relative file paths:

  • Starting with "/" returns to the root directory and starts there
  • Starting with "../" moves one directory backwards and starts there
  • Starting with "../../" moves two directories backwards and starts there (and so on...)
  • To move forward, just start with the first subdirectory and keep moving forward

Upvotes: 65

Related Questions