Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
For some reason my HTML file is not picking up my custom CSS files for Bootstrap. Code below:
<head>
<title>Site Name</title>
<!-- METAs -->
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, inital-scale=1.0">
<!-- Stylesheets -->
<link href="bootstrap.min.css" rel = "stylesheet">
<link href="styles.css" rel = "stylesheet">
</head>
<body>
This loads the default Bootstrap CSS, but not the styles.css file. The file is in the same directory, and there is code in it. For the life of me I can't figure this out and my only guess is it is somewhere in this head portion. I can provide other snippets if need be, and I have tried other paradigms like LESS with no luck either.
This snippet will eventually go into a PHP include file for easier editing. I have my java script saved in a similar type file at the foot of the site with the footer.
I was going to guess it was a host side issue until I tested it locally and the issue still did not resolve.
Any suggestions to help me keep my sanity would be most appreciated!
Are you positive that it isn't loading? What does the console say?
If it is throwing a 404, then there's something wrong with the path you're specifying.
If it isn't throwing a 404, then it is loading and just not overriding what you want it to override.
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 days ago.
Improve this question
When I open the html code with "Open with Live Server", it does not include my css code.
What did I miss? What did I do wrong?
How do I make my css code work with html?
Screenshots:
This is my css code
This is my html code
I followed the tutorial "CSS Tutorial - Full Course for Beginners"
I followed what he was doing but it seems I got it wrong. I did the whole thing over again but still not working.
p {
font-size: 64px;
color: red;
}
<IDOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link ref="stylesheet" href="style.css">
</head>
<body>
<p>I'm currently learning CSS!</p>
</body>
</html>
You've got a typo in your html it should be rel= not ref=
<link rel="stylesheet" href="css/style.css">
#1 Rule: always first check for typos before thinking that something isn't working functionally.
Having the attention to detail to observe and detect your typos is very important if you want to learn to code (there wasn't that much to sift through in this case, you should have been able to see it)
Also, we understand because you're new, but next time paste all your code with proper formatting instead of links to images - it's much easier for us to help you if we are at least able to work with text.
Hope this helps.
If you have written the css file in a separate page then you have to use link tag and link it with the html in the head tag enter code here
Here is the syntax:
<head
<link rel="stylesheet"href="mystyle.cs>
</head>
This question already has answers here:
HTML not loading CSS file
(26 answers)
Closed 5 months ago.
I don't know why my html is not being formatted by my CSS. I made sure the name of my CSS file is the same as the one in the HTML file. There are also no errors in my CSS file, it has been validated. It's the same format as other projects I've done, same folder and everything, but for some reason it isn't working.
<head>
<meta charset="utf-8">
<title>Project 5: Javascript Arrays</title>
<link rel="stylesheet" href="project5.css">
<script src="project5.js"></script>
</head>
Make sure both files in the same folder and this code should work
<link rel="stylesheet" href="./project5.css">
This might happen if your css file is in another directory. If your project looks like this:
index.html
css/project5.css
You would need to use href="css/project5.css". Please make sure the filepaths are correct.
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 1 year ago.
Improve this question
This question has been asked ~10^4 times, but hear me out that I've done my due dilligence in reading the solutions and seeing if their tweaks fix things (to no avail). I'm an amateur when it comes to JS/CSS/HTML but I'm learning. I am trying to implement this sticky navigation bar from here (also see here). My question isn't about their code, which appears to be fine.
When I implement it, my .html file doesn't seem to be using the .js script at all. None of the buttons respond, I don't get any errors, but everything in the .css and .html files otherwise are rendering fine. The head:
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="script.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
...
</html>
The script.js should be in the correctly referenced directory.
Answer (as I was writing this): The jquery script and the custom script were in the wrong order. :)
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 years ago.
Improve this question
I'm trying to load jQuery library following videos but it does not work. When I'm trying to load some jQuery function, it writes that jquery is not defined. I also tried CDN.
<title>
GRID
</title>
<link rel="stylesheet" href="grid.css">
<link href="https://fonts.googleapis.com/css?
family=Ubuntu&display=swap" rel="stylesheet">
<script src="jquery-2.1.1.min.js"></script>
<script src="script.js"></script>
</head>```
You need to put jquery-2.1.1.min.js file into same location where your quoted file is if we are talking about local purposes.
If your prefer to download it each time, you can use for example Google Hosted Libraries in following way:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Like so <script src="jquery-2.1.1.min.js"></script>, jquery have to be in the root of your domain, like your script.js.
If you want CDN, use:
<script rel="prefetch" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js></script>
Or official jQuery CDN:
<script
rel="prefetch"
src="https://code.jquery.com/jquery-2.1.1.min.js"
integrity="sha256-h0cGsrExGgcZtSZ/fRz4AwV+Nn6Urh/3v3jFRQ0w9dQ="
crossorigin="anonymous">
</script>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I've noticed that on the first load of some of the pages on my site, there's a quick white flash.
It doesn't seem to do this once the page content has been cached, but it's annoying during the first loads.
I tried styling all of the <html> tags black, but that doesn't seem to solve the issue. Could it be the scripts on some of my pages? (i.e. maybe analytics)
Is there anything I could do to remedy this problem?
Update: The site can be viewed here. Some pages have Javascript, but others do not, and it seems that's irrelevant, based on the results I've experienced.
OK, so it looks like this might be related to your script tag in the <head/>. Try pushing that down to just before the closing </body> tag. The document can't render until that script has completely run.
See rule 6
However, one of the other resource you're waiting on sometimes is 'home.css'. That may even be more of a problem. It's a bit of a hack, but you could try setting your background to black before even that css using an inline <style/> tag.
Try structuring the page in this order (notice the <style/>) tag;
<!doctype html>
<html>
<head>
<style>
html { background-color: black; }
</style>
...
<link href="home.css" rel="stylesheet" type="text/css">
...
</head>
<body>
...
<div id="footer">
<span class="footer_text">Copyright © 2013 Casey Kidd Music.<br />All Rights Reserved.</span>
</div>
</div>
<script>
(function(
...
'pageview');
</script>
</body>
</html>
It's possible you may still get a small flicker of white between pages, before the HTML has loaded, but this window would be pretty small now.