I am having an issue with getting my css file to link up to my html code when I put my css file in a different folder than the one my html file is in. I have tried to research how to enter the correct file path for my css file but it still doesnt seem to work. It does work though when the css file is in the same folder as my html file. Here is how I am have gotten the code to work correctly:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Connor Rice</title>
<link rel="stylesheet" type="text/css" href="Together-1.css"/>
</head>
<body>
The code goes on for longer but I dont think it has anything to do with the stuff after. This is where my HTML File is:
/Users/connorrice/Desktop/CodingStuff/HTML Class Stuff/ConnorRice.html
My CSS file is here:
/Users/connorrice/Desktop/CodingStuff/HTML Class Stuff/Together-1.css
I'm trying to change the html code to this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Connor Rice</title>
<link rel="stylesheet" type="text/css" href="CSS-Files/Together-1.css"/>
</head>
<body>
Here's where I moved the file css file to (HTML one is in the same place)
/Users/connorrice/Desktop/CodingStuff/CSS-Files/Together-1.css
Think I typed the correct syntax in but its not working. I'm using mac 0s sierra version 10.12.6 on a macbook pro that came out in 2011 (I know my computer is really old). Any suggestions as to what I'm doing wrong? Also please forgive me if I typed this out horribly because this is the first question I've posted and I'm very new to coding.
To access the folder you placed your CSS in, your stylesheet href should be:
href="../CSS-Files/Together-1.css"
The way you wrote it, you are trying to look for the CSS-Files folder in your HTML Class Stuff folder. However, you must first exit the HTML folder.
That is what you use ../ for, at the start of your path.
Related
i cant connect stylesheet to my html file, i cant inport image from my pc by realtive path. I have seen lot of questions here and i tried all the suggestions but i didnt found a solution, im 100% sure my syntax is right. Its wierd because i can inport images from url. It seems like my pc have some problem with relative paths, or it may be some wierd setting in my VS code. Can i get some advise to solve this, what should i try.
Here is some example...
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="templates/style.css">
</head>
<body>
</body>
</html>
i have tried all variations like href="style.css", href="./style.css"
Your code is valid, but you might be mistaken in the location of the files your linking to. That would result in an invalid url.
Have a look at a folder structure as below. You've got a project folder name project-example this folder contains the index.html and the folders templates and images.
If you want to link in your index.html to the files in those folders the src or href would have to be something like templates/style.css or images/image.png.
So I've been creating a project on my localhost server for the first time using wamp (I've only coded html/css/js in repl.it before this) and for some reason, my css will not
stay on my page. When I try changing styles using my CSS file, it shows up when I refresh, but then very quickly disappears. The following pictures represent this (NOTE: I had to record and slow down the refresh just to see that it did change):
this appears right after refreshing
milliseconds later, the CSS no longer does anything
The following code is the link to the css in my html file (have some other script tags in there as well):
<html>
<head>
<title>Home Page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css" />
<script src="js/bootstrap-icons.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<link href="/PHP-Login-System/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
An image of directory tree (trying to link style.css with index.php):
directory tree
As far as I know, since my styling does show up for a brief moment, I don't think the error could be in my linking between the files, but I could be wrong. Any comments are appreciated.
Everything looks good to me, I think the problem is coming from wamp server, because like you said, your css styles is showing up and disappearing.
My advice is:
Uninstall wamp total , download a fresh copy from the internet.
Restart your computer, then reinstall the new copy you downloaded
I am trying to import a css file in the same directory as my HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home Page</title>
<link rel="stylesheet" href="./styles.css">
</head>
I believe I am correct in using ./ to go through my directory. I have also tried using ../
However, in my dev tools in chrome, I am getting this error:
Failed to load resource: the server responded with a status of 404 (NOT FOUND)
Any help would be appreciated. Thanks!
It is definitely the link that's the error.
You will need to check your file path, is this project just simply on your desktop? Is it a ASP.NET app?
Depending on where/what project it is, you should be safe to use .. to traverse up one folder
It really depends how your directory folder is structured, but if you have your HTML and CSS files in the same folder, you can just use <link rel="stylesheet" href="/styles.css"> (note that there's no dot), then your html file will look in the root folder of your project, also make sure the name styles.css is the same as your css file
Since you put the html file and the css file in the same folder, there is no need to use ./ or ../ because this step is written only if the css file is in another folder next to the html file
open-source public files work best. So instead, go to https://gist.github.com and sign up if you haven't already, name the file (with extension, e.g. style.css), and paste your CSS3 code, click 'create secret gist', and click raw. copy the link and that will be your external CSS file.
-Good luck!
I'm building a browser app in Angular 9 Typescript and am trying to implement the webdatarocks package so I can use pivot tables within a component of the app. I've installed webdatarocks and now have the following:
<!doctype html>
<html lang="en">
<html>
<head>
<meta charset="utf-8">
<link href="/angular-app/node_modules/webdatarocks/webdatarocks.min.css" rel="stylesheet"/>
<script src="/angular-app/node_modules/webdatarocks/webdatarocks.toolbar.min.js"></script>
<script src="/angular-app/node_modules/webdatarocks/webdatarocks.js"></script>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-wbr-pivot #pivot1 [toolbar]="true">
Webdatarocks will appear here
</app-wbr-pivot>
</body>
</html>
Note this is NOT the index.html file. That file is separate and contains the styles etc. for the entire app, I'm trying to use webdatarocks within only one component of the app, so the above code is in the html file of a component. (Not sure if this is recommended as I'm pretty new to this, but I don't see why it shouldn't work?). When trying to run this, the styles are not applied because of the following error:
Refused to apply style from 'http://localhost:4200/angular-app/node_modules/webdatarocks/webdatarocks.min.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
Now I understand this likely doesn't work because it's unable to match any routes to the url, so it's being read as an error page in html rather than a css file. My question is how to actually fix this? Do I have to somehow add this url to the routing module? Is there not a way to simply point to the needed library in node_modules? I tried adding
"./node_modules/webdatarocks/webdatarocks.min.css"
"./node_modules/webdatarocks/webdatarocks.toolbar.min.js",
"./node_modules/webdatarocks/webdatarocks.js"
to the styles and scripts in the angular.json file and it still doesn't work.
Thank you and please let me know if I can clarify anything!
Okay, I learned all I had to do is remove everything within the head tag and just add:
#import "webdatarocks/webdatarocks.min.css";
to the styles.css file and Angular took care of the rest.
First off, sorry to be asking this as I know it's a common question/problem brought up on here - but after researching and looking at the other threads and trying to apply those solutions I'm still at a loss. Hoping that by posting my code I can get the help I need. Thank you in advance.
As it says in the subject line I cannot get the .css file to link to the .html file. I'm a few days into learning via modules on LinkedIn and this code actually comes from one of those modules, making it more confusing that it's not working. Both the html and css file are in the same folder on my desktop, and I've quadruple checked that the .css file is the correct name. Here's the top part of the code with the problem area:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mat Alano-Martin Test Page</title>
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body>