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>
Related
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 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
I'm struggling to get javascript file linked to HMTL. I've made sure that the HTML & javascript file are saved as 'index.html' & 'script.js', and saved them in the same folder. But when trying to access the html file in Chrome, the javascript doesn't appear, either in Console of the Dev Tool.
Please see below the code I'm writing in Sublime Text. Could you please advise me what I'm doing wrong here? Thanks a lot !
<!DOCTYPE html> <html>
<head>
<title>JavaScript</title>
<link rel="stylesheet" type="text/css" href="">
</head>
<body>
<h1>Javascript in HTML</h1>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
Going off the comments, the code console.log("hello"); will display "hello" in the console of your browser, not in the body of your HTML page. This is often accessed by tapping the F12 key.
If you want your text to show up in the HTML, you need to give it an HTML element for the text to be displayed, then use JavaScript to find the element and update the text.
document.getElementById("textGoesHere").innerText = "hello";
<!DOCTYPE html>
<html>
<head>
<title>JavaScript</title>
<link rel="stylesheet" type="text/css" href="#">
<script src="script.js"></script>
</head>
<body>
<h1>Javascript in HTML</h1>
<div id="textGoesHere" />
</body>
</html>
The caveat to that is you can't run the JavaScript correctly until the HTML is generated, so declaring it in the HEAD tag, like people tend to do, you need to put the JavaScript in a method, then call that method from the BODY event of onload.
<body onload="UpdateText()">
function UpdateText()
{
document.getElementById("textGoesHere").innerText = "hello";
}
Since this is fairly basic JavaScript and HTML, I'm going to suggest you use a tutorial to get started programming, such as:
https://www.codecademy.com/learn/introduction-to-javascript
It's much easier to learn the basics from a course than try to stumble your way through, trying to learn piecemeal by banging your head on everything. I have some experience in doing both. Believe me, a tutorial/class is less painful. ;-)
try out this
<!DOCTYPE html>
<html>
<head>
<title>JavaScript</title>
<link rel="stylesheet" type="text/css" href="#">
</head>
<body>
<h1>Javascript in HTML</h1>
<script src="script.js"></script>
</body>
</html>
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 2 years ago.
Improve this question
External Js not working, greyed out by Atom
Not-working: The button is not showing on the site and the script is greyed out so it is not active as if it was a comment.
The html code is:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>JavaScriptGyak3</title>
<script type="text/javascript" src="page3.js" </script>
</head>
<body id="test">
<button type="button" onclick="hatszin()"> Change Background </button>
</body>
</html>
The js code is just:
function hatszin() {
document.getElementById('test').style.backgroundColor = 'orange';
}
You need to close the opening <script> tag properly by adding a >
<script type="text/javascript" src="page3.js"> </script>
^
Found a solution, had to give the body context (I placed a h1 in there) and now everything looks like shows like as it should.
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.
I had a great working PhoneGap mobile web-app project, then my laptop died. I had all the files saved to the cloud, so no trouble with code loss, but now I've been trying to rebuild the project and that's where the trouble is.
I've set the whole thing up again, and it's loading alright, all the html elements are there as coded, but the jQuery Mobile css doesn't seem to be including on any of my pages, given that all I see is a white page with normal underlined blue links. Very unattractive.
Here's the beginning of my code on each page:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css"/>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script>
Which should be alright, I would think...it worked before, anyway.
What's missing? I'm inclined to think it's somewhere in the configuration rather than the code, give the circumstances.
Should there be some sort of cordova.css file? Because there isn't one, and I thought there used to be. (About to Google that...)
Have you checked that code.jquery.com is in ExternalHosts in your phonegap.plist (or cordova.plist)?
Please try whit this,
https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.1.0/jquery.mobile-1.1.0.min.css
Hope this helps. :)