Proper implementation of CSS and JS into HTML

Question

I've been puzzled by this for a little while and am wondering if anyone can shed some light on this topic. I have an HTML file, a CSS file (stylesheet.css), and a JavaScript file (java.js), all in the same directory (I know its advisable to separate files by type into different directories, but I'm just running some tests right now and it's convenient to have them share one). By my understanding (I'm new to all three), the proper way to have HTML execute the CSS and JS files is by including them in the <head> … </head> tag such as below.

<head>
    <meta charset="utf-8">
    <title>Table Fixed Header</title>
    <link rel="stylesheet" href="stylesheet.css">
    <script src="javascript.js"></script>
</head>

EDIT: new location of <script> and <link>

<!-- More table is above this -->
<tr>
          <td>Data Column 1</td>
          <td>Data Column 2</td>
          <td>Data Column 3</td>
          <td>Data Column 4</td>
        </tr>
      </tbody>
  </div>
  <link rel="stylesheet" href="stylesheet.css">
  <script src="javascript.js"></script>
</body>

Still, only the table with none of the styling or scripting appears

This way, as HTML executes, it should interpret both the CSS and JS files and apply them to the rest of the HTML script.

In my case, I have multiple tables written in the HTML and the JS provides fixed header scrolling and CSS just makes everything look better (obviously). However, when I execute the code on my local server, only the raw HTML appears. There are no errors in the console log. What is happening here?

Script tags in the head are before the `` tag has had a chance to build the Document Object Model. Therefore, trying to query it (via `document.querySelector` or a similar method) won't work. You must either wrap your code in an `onload` or "dom ready" event listener in order for it to interact with the elements on the page, or you could put your ` — Jhecht, Aug 02 '18 at 17:52
@Observer I see that would make sense. I will try placing the script/link statements where you suggest — Jonny1998, Aug 02 '18 at 17:54
If you're seeing the raw HTML instead of a rendered page when you load an html file, it may mean the server is sending the file with the wrong MIME type (either because the server is misconfigured, or you're using the wrong file extension, or both.) If that's not what's going on, please clarify exactly what you mean by "when I execute the code on my local server". — Daniel Beck, Aug 02 '18 at 17:55
@Derek Whoops, I hadn't noticed my grievous error, I have renamed the file to javascrip.js — Jonny1998, Aug 02 '18 at 17:55
@Daniel Beck I'm running a WAMP server on my machine and am running and debugging this code through `localhost/HTMLfilename` — Jonny1998, Aug 02 '18 at 18:08
I'm not sure why you're getting answers about where you place your script tags; that's irrelevant if your code isn't even getting parsed in the first place. I'm not familiar with WAMP but see here, looks like a similar issue: https://stackoverflow.com/questions/20310892/getting-raw-output-in-local-wamp-same-code-working-fine-in-webserver If nothing there is helpful, check your server logs (not the in-browser console) for error messages. — Daniel Beck, Aug 04 '18 at 17:50

score -1 · Answer 1 · answered Aug 02 '18 at 18:00

If you are intending for your javascript to access the dom, that html must already be on the page.Also, Page listeners applied to dom elements that do not exist will not pickup new html being added to the page.

A simple solution here would be to inject your script before the closing body tag, to ensure the html has rendered to the page already

You could also write the js to execute after the onload event has been dispatched

One thing I find that helps diagnose these sort of timing issues is to log a time stamp when the page has begun js execution and when it has ended execution of your scripts, this helps to make sure your code actually ran, and this isn't some weird case of not properly setting the path to the files you need.

I have tried injecting both the ` – Jonny1998 Aug 02 '18 at 18:11 — Jonny1998, Aug 02 '18 at 18:11
If you can share the code, I’m happy to help diagnose – Kaysser Kayyali Aug 03 '18 at 04:45 — Kaysser Kayyali, Aug 03 '18 at 04:45

David Vasquez · Answer 2 · 2018-08-02T18:35:09.983

I'll second what others have said above about putting your <script> right before the closing </body> tag. To add to the conversation, though, it is advisable to keep the reference to your css file in the <head>. It doesn't suffer from the same issues as javascript when it comes to running before the DOM (Document Object Model) exists, and in fact you should load your styles before the DOM loads.

That being said, the css should work regardless of wether it's placed in the head or in the body, it's just best practice to keep the styles in your head otherwise the DOM will have to be re-rendered once the styles are applied (see here: What's the difference if I put css file inside <head> or <body>?).

Also, if you have the css & js files, posting them here might help us diagnose why the css/js isn't working.

I'm just running some tests right now and it's convenient to have them share one

Have you considered codepen.io (or similar sites) for quick tests like these? It'll save you a lot of time if you just want to play around with your code quickly. (You can also save and share those tests here on Stack Overflow if you get stuck - it makes it easier for us to help out too!)

Here's the two sites I use most often for code testing: Code Pen Code Sandbox

Here's a good list of others

Hope this helps!

Proper implementation of CSS and JS into HTML

2 Answers2