Try this again

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.

7 Answers 7

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:

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

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

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

for linking to a css file from a html file, the 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.

ADDRESS_OF_CSS_FILE is either:

• an absolute path (the complete path of the file on your computer, including the C: driver for instance)
• or a relative path (the path relative to the html file that you are putting your tag into it.) assuming this is your directory structure

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

• 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" 

Источник

How to link a CSS file from HTML file?

I have been styling my HTML with inline tags in the section. When I tried to move styles to CSS file for the first time from HTML file but, I cannot get my link to work. I have created a new folder and inside this folder a new HTML file and CSS file are present. I am using VS Code. I have tried pasting my HTML and my CSS into CodePen and it renders, so I know it’s not an issue of the CSS itself not being correct. My HTML file looks like:

        
Here we go
   

2 Answers 2

Why does linking a CSS file not work?

In your example, you only have to change the rel=»Hope this works» to rel=»stylesheet» in order for it to recognize it as a stylesheet, as demonstrated in the following:

Setting the rel attribute value to stylesheet distinguishes the difference between, say, a stylesheet link and an icon image link. You can see all the possible values for the rel attribute on MDN.

Furthermore, if it still doesn’t work, ensure that the file «newcssstyle.css» is in the same directory as the referenced HTML file. If you put it in a folder such as «stylesheets», ensure that you add the relative folder path to your HTML file.

For example, if you had a directory like this:

Then you would reference «newcssstyle.css» (relative to «index.css») as href=’Stylesheets/newcssstyle.css’

Whereas, in a directory like this:

Then you would reference «newcssstyle.css» as href=’../Stylesheets/newcssstyle.css’ instead (where .. means «go up one level to the parent directory»).

Источник