I'm using html and css for the first time. On one computer the html refers to the css appropriately, but on another the css is not referred to at all. I think I'm linking to the css correctly in the html:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
On both computers, I'm using the latest version of Firefox.
Any thoughts as to where I'm going wrong?
Thanks in advance.
Are you using your browser's developer tools?
Right click in Firefox and go to "Inspect".
Find the Web Console tab. There you will see if the reference to the css file is valid or if it returning a 404, not found.
Also, your reference should be href="/css/mystyle.css", to keep a clean root directory of the site.
Also, you might want to self close the tag:
<link rel="stylesheet" type="text/css" href="/css/mystyle.css" />
And if that doesn't help, run your code through the w3c validator: http://validator.w3.org/
Related
I have been learning how to make client-server applications recently and am following this tutorial by Traversy Media. This is the Github page for the code that mine is based on. Though I have resolved the MIME type issue that is brought up.
But the problem is, when I run the code, the CSS stylesheets(both the stylesheet linked to the website and the style.css file in the css folder) do not appear to be applied to the HTML page. What happens when I run the HTML file is that the HTML page appears to be without any style, meaning that although the HTML does appear in the webpage, the HTML elements do not have any styles.
I thought that it was simply because of an error in referencing the CSS files but I have tried to fix it by moving the CSS files around and also changing the hrefs of the link element in the HTML code and also copying the code of the CSS stylesheet from the website into "online-resource.css" but none of what I did worked.
<link
rel="stylesheet"
href="online-resource.css"
type="stylesheet/css"
/>
<link rel="stylesheet" href="style.css" type="stylesheet/css"/>
Anyone have any ideas? It probably doesn't have anything to do with node.js because the same thing happens when I run it independently
Change your type property to be text/css not stylesheet/css which is being interpreted as an invaild type and not allowing the CSS to load.
<link rel="stylesheet" href="online-resource.css" type="text/css" />
<link rel="stylesheet" href="style.css" type="text/css" />
I think the css file not loading properly. Also check whether the code inside the css files are correct or not.
Make sure you saved the file. It's silly, but I can personally vouch for the time when I couldn't make my site update, and I forgot to save/update the file I was viewing.
Make sure the stylesheet is loading. In Chrome, if you right-click -> inspect element and go to the sources tab, you can see all loaded resources, including your CSS.
Recently re-did all the files to my website, and uploaded them to the 000webhost server they're located on. It's just some basic HTML but is heavily reliant on the CSS to make it look good. So when I checked it out to see that it didn't work, I realized not only did the javascript not work but the CSS too. I think it might be an error in my code, seeing as all the other files work fine. Any help would be appreciated.
I've tried redirecting the file paths, adding the head tags, deleting and re-adding the file to the server, and waiting to see if it was a server issue.
Here is the first couple of lines to my index HTML file:
<html>
<title>Home</title>
<link rel="shortcut icon" type="image/png" href="images/amistufffavicon.ico">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="functions.js"></script>
I really just want to make the HTML pages look good, and an explanation in case it ever happens again I know what to do.
first, use the {} logo on the top of the text editor to make your code show up. all you have to do is highlight your code, then click the {} button and it will format it for you.
your CSS and JS code actually looks like the HTML tags for these imports.
One bit of advice, if you have issues making several files work, just write everything in your HTML file
instead of
<link rel="stylesheet" type="text/css" href="style.css">
<script src="functions.js"></script>
just do this:
<html>
<style>
/*write style here*/
</style>
<script>
//write script here
</script>
</html>
When I open my index.html file in Safari, it shows everything, styled with my CSS file. When I open my index.html with Google Chrome, it appears to only show the HTML. I do not use webkits, and I only pair my HTML to my CSS using this in my head tag in my index.html file:
CSS:
<link rel=stylesheet type="html/css" href="stylesheet.css">
Does anyone know how I can open this in Google Chrome so it uses my CSS file like Safari does?
Thanks in advance!
First clear cache of browser and disable some html/css validation extension.It will be sure that it will work. and just follow the css attachment syntax below.<link rel="stylesheet" type="text/css" href="stylesheet.css">
Try using
<link rel="stylesheet" type="text/css" href="stylesheet.css">
The rel tag should have some quotation marks and the type should be text/css for compatibility.
I had the same problem with updating CSS, try ctrl + f5.
It also forces to reload the cache.
And if this is the problem, you can try to clear the cache in the browser.
I've been experimenting with Twitter Bootstrap and have run into a problem I cannot resolve. Basically, I have a very simple HTML file (based on the beginning of this tutorial: http://www.sitepoint.com/understanding-twitter-bootstrap-3/ ) and I can open the file, but it is not loading the CSS.
I've tried this locally as well as from my web server and in both instances, the CSS does not load. This tutorial has some errors on where quotes go which I've fixed, but I've had the same problems with another tutorial.
index.html is located in the same folder as the CSS folder.
Here is my HTML:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
<h1>Hello, world!</h1>
<script src="//code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Please for the love of God help me before I destroy my Macbook.
Try using bootstrap.css instead of bootstrap.min.css. Also, make sure that it's in the correct path.
Another thing you can try as well is using media="all" instead of media="screen" in your link specifications.
Your javascript link tag for jQuery looks suspicious. Either give a relative path on your local directory, or the absolute path to an external url.
I had the same problem but it was unique, not sure if other had the same issue. I had "rel=" before the "href=". Just swapping the places, i.e. "href=" before "rel=" resolved the issue.
Thanks a ton for the correct syntax.
I followed below steps to load or apply Boostrap css.
first check bootstrap available in node_modules?
If you don't see, Install bootstrap with below command
npm i bootstrap
After installation successful, verfiy again boostrap in node_modules.
enter image description here
next open your project styles.css file and import below line.
#import '~bootstrap/dist/css/bootstrap.css';
when you upload the bootstrap files to your hosting, make sure to upload ALL the files even the .map files. I did that and it worked for me.
I had the same problem and I solved it.
open your file in windows notepad, choose save_as > Beside the Save button , open Encoding dropdown and choose UTF-8 !
my file was saved in Unicode Encoding.
I used windows notepad to save-as my file in a UTF-8 Encoding and the issue was gone.
you may also use notepad++ to change the encoding of a file.
good luck
I found this answer because it was the top google search yet I had this problem for a completely different reason.
For those who might have made the same mistake I have, remember to add
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
or some reference to another version of bootstrap so that your code knows where to get all the bootstrap related information
Sounds like this is just a simple directory issue.
You are saying you have the HTML file and the CSS file in the same folder right?
Then to load the file link it like this:
<link href="bootstrap.min.css" rel="stylesheet" media="all">
Else
If your css file is in a "css" folder then change the directory to:
<link href="css/bootstrap.min.css" rel="stylesheet" media="all">
If worse comes to worse use the external link instead for troubleshooting:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
I'm just writing a framework for responsive web development. I just started yesterday and began with the css today. Everything works fine in Chrome as well as in IE, but Firefox doesn't recognize the stylsheets at all.
I did validate everything and didn't get any errors.
This is the way I integrated the CSS:
<link rel="stylesheet" type="text/css" href="/WebDesign/Projects/Framework/css/reset.css" />
Oh, and maybe it's important: I only used the <!DOCTYPE html> as declaration.
Thanks for any answer :)
If the style sheet is in the same root, you don't really need the whole link to the root when getting the style:
<link rel="stylesheet" href="./styles.css" type="text/CSS" />