I have a index.html file which has this file structure: fl/contact/thanks/index.html
My CSS folder has this file structure: fl/css/style.css
How can i target the style.css file so it affects the index.html file with the current file structure?
This is what it's currently set to:
<link rel="stylesheet" type="text/css" href="css/style.css">
If you are on a server, you could do this:
<link rel="stylesheet" type="text/css" href="/css/style.css">
This assumes that 'fl' is the root.
<link rel="stylesheet" type="text/css" href="../../css/style.css">
each ".." for the upper layer of the path.
<link rel="stylesheet" type="text/css" href="../../../css/style.css" />
That should be your new path for index.html.
You should be able to reference it like this:
<link rel="stylesheet" type="text/css" href="../../css/style.css">
You would be able to do it like this:
Updated answer
<link rel="stylesheet" type="text/css" href="../../css/style.css" />
Related
<link rel="stylesheet" href="index.css" >
<link rel="stylesheet" type="text/css" href="index.css" >
<link rel="stylesheet" type="text/css" href="index.css" media="screen" >
tried all of them but it's not working
try using a different name for the stylesheet rather than 'index.css' go for 'style.css' as everybody does.
Make Sure the CSS File is located in the same directory as the index.html and change the reference link to
<link href="style.css" rel="stylesheet" type="text/css" media="all" />
or
<link href="./style.css" rel="stylesheet" type="text/css" media="all" />
Check the path to your file you can try,
<link href="./style.css" rel="stylesheet" type="text/css" media="all" />
This should work if your file is in the same directory.
The path mentioned in the above example does not have a full URL or relative path that begins with "/".
This makes the browser think that the css file is at the same level as that of the html file. Therefore, it may fail to fetch the file correctly.
Updating the path of the css file to either a full URL or to a relative path will solve the problem.
Example:
Suppose that the website is organized into the following folder structure:
/index.html
/css/index.css
/css/main.css
/js/header.js
/js/footer.js
...
/images/hero.jpg
/images/logo.png
...
The call to the css file will work if the link is defined like this, in index.html:
<link rel="stylesheet" href="/css/index.css" >
to submit an assignment, I must put my css and html file in a separate folder "assignment", when I did that the CSS and bootstrap is not showing up in my webpage. I know i need to update the css link, so that's what I did below, but it didn't work so how do I correctly do that? directory
from:
<link href="styles.css" type="text/css" rel="stylesheet">
<link href="bootstrap.min.css" type="text/css" rel="stylesheet">
to:
<link href="assignment/styles.css" type="text/css" rel="stylesheet">
<link href="bootstrap.min.css" type="text/css" rel="stylesheet">
If your index.html (which you want to put the codes) is out of the assignment folder and the css files are in the assignment, use
<link href="./assignment/styles.css" type="text/css" rel="stylesheet">
<link href="./assignment/bootstrap.min.css" type="text/css" rel="stylesheet">
or if all of them are in the same assignment folder, you don't need to change the path.
If your index.html , style.css and bootstrap.min.css File in assignment folder and for both css haven't separate folder, then bellow code apply
<link href="styles.css" type="text/css" rel="stylesheet">
<link href="bootstrap.min.css" type="text/css" rel="stylesheet">
If your index.html , style.css and bootstrap.min.css File in assignment folder and for both css have separate folder which name is css, then bellow code apply
<link href="css/styles.css" type="text/css" rel="stylesheet">
<link href="css/bootstrap.min.css" type="text/css" rel="stylesheet">
This is my structure
I'm trying to load the main.css file from the header.ejs file, can't find it.
This code is in my header file:
<!DOCTYPE html> <html>
<head>
<title>Hello and wellcome to my album</title>
<link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link type="text/css" rel="stylesheet" href="../../public/stylesheets/main.css">
</head>
<body>
Try to go 2 directories back, not 1.
Like this:
<link type="text/css" rel="stylesheet" href="../../public/stylesheets/main.css">
Link should be like below cause you have 2 sub folder back then you will get public folder and stylesheets
<link type="text/css" rel="stylesheet" href="../../public/stylesheets/main.css">
Try
<link type="text/css" rel="stylesheet" href="../../public/stylesheets/main.css">
.. selects the parent directory from the current.
(..) 2 times because first, you need to go 2 directories back and then go to public and then stylesheet and then main.css
in app.js i added:
app.use(express.static("public"));
in the header.ejs i changed:
<link type="text/css" rel="stylesheet" href="stylesheets/main.css">
i am using NodeJS
The problem is that your stylesheet path is set wrong.
<!DOCTYPE html> <html>
<head>
<title>Hello and wellcome to my album</title>
<link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link type="text/css" rel="stylesheet" href="../../public/stylesheets/main.css">
</head>
<body>
You are pointing just a folder up from partials to views. You need anothe folder up to your site root dir just like I pointed. Generally you could just use /public/stylesheets/main.css which is directly pointing to project root folder
This is a nodejs app, path should be like following.
<link rel="stylesheet" type="text/css" href="/stylesheets/main.css" />
If your path static:
<link rel="stylesheet" type="text/css" href="stylesheets/main.css" />
My index.html file is in the public_html directory. All css files/ image files are in a css directory, and images directory respectively.
I have been over and over my code but the index is not linking with anything in hosting.
`
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/flexslider.css">
<link rel="stylesheet" href="css/jquery.fancybox.css">
<link rel="stylesheet" href="main.css"> // ***
<link rel="stylesheet" href="css/responsive.css">
<link rel="stylesheet" href="css/animate.min.css">
<link rel="stylesheet" href="css/font-icon.css">`
*** I moved the main.css file directly into public_html to see if it would work and it does. I can only assume that I have made a mistake in my path.
BTW I have added a / to the css path in href. I don't want to move everything into the public_html folder, which I am taking to be the root
Many thanks
This might be redundant but one possible workaround is to use ./ everywhere. Eg.
<link rel="stylesheet" href="./css/bootstrap.min.css">
<link rel="stylesheet" href="./css/flexslider.css">
<link rel="stylesheet" href="./css/jquery.fancybox.css">
<link rel="stylesheet" href="./main.css"> // ***
<link rel="stylesheet" href="./css/responsive.css">
<link rel="stylesheet" href="./css/animate.min.css">
<link rel="stylesheet" href="./css/font-icon.css">
It should work.
Assuming the css folder and main.css are the siblings of the HTML file in which this code is inserted .
Please help, i really cannot see what i am doing wrong. I have tried all permutations and still cannot link so have started to write css code in html. Not what i want to do. Been looking at it too long and hoping someone can see my error. Thnks
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="css/style.css" type="text/css" rel="stylesheet">
</head>
My file tree is my directory folder name of the project then a sub folder css, then the style.css
Assuming your index file is in the root directly below the css file, you need to write "./css/style.css" - you're definitely not pointing to the right location.
<link href="./css/style.css" type="text/css" rel="stylesheet">
Try This:
<link href="../css/style.css" type="text/css" rel="stylesheet">
OR
<link href="/ProjectName/css/style.css" type="text/css" rel="stylesheet">
If you want to link to your stylesheet and it is not working, navigate to your stylesheet (it should look like http://www.example.com/css/style.css) and then copy the URL to your <link rel="stylesheet"> tag so it looks like this:
<link rel="stylesheet" type="text/css" href="http://www.example.com/css/style.css">
instead of this:
<link href="css/style.css" type="text/css" rel="stylesheet">
Hope this helps!