Link to CSS and JavaScript in an HTML File
The purpose of this tutorial is to teach you how to link to CSS and JavaScript files within an HTML file. It is possible to write CSS and JavaScript directly inside an HTML document, but it is generally best to keep these three languages in their own separate files.
Contents
1. Directory and File Structure
It is a good idea to keep your HTML, CSS, and JavaScript files in separate directories. Create a directory for your project called css-and-js . Inside this directory, create three additional directories. Call them html , css , and javascript .
Inside your html directory, create a file called css-and-js.html . Inside your css directory, create a file called styles.css . And inside your javascript directory, create a file called script.js .
2. HTML
In order to link to your CSS and JavaScript files, you will need an HTML document within which to work. Open css-and-js.html and enter the following HTML:
lang='en'> charset='UTF-8'/> Linking to CSS and JavaScript Be sure to save your work any time you add code to your files. In the next two sections, we will go over what you need to add to your HTML document in order to link to your CSS and JavaScript.
3. CSS
First, you will need to add something in the body of your HTML to apply styling to. On the next line after the opening tag, indent and add the following:
If this text is red, then you successfully linked your CSS file! As it stands, this text will appear in the color defined as the root color in the browser’s default stylesheet – usually black. In order to change the color of the text, open your styles.css file and add:
The final step in this section is to link to the CSS file inside your HTML document. Enter the following in the section on the line after the closing tag:
rel='stylesheet' href='../css/styles.css'> The element must be placed in the section of the document. Notice that the element is an empty element, so it does not need a closing tag.
The rel attribute defines the relationship between the resource and the HTML document. The href attribute points to your CSS file.
Since the file is located in another directory, you must specify the path by going up one directory using two dots ( .. ), followed by a slash ( / ), the directory your CSS file is in ( css ), another slash, and then your CSS file name ( styles.css ): href=‘../css/styles.css’ .
This is what your HTML document should look like so far:
lang='en'> charset='UTF-8'/> Linking to CSS and JavaScript rel='stylesheet' href='../css/styles.css'> If this text is red, then you successfully linked your CSS file! 4. JavaScript
Next, you will need to add some code to your JavaScript file. Open script.js and add:
alert('You successfully linked your JavaScript file!'); Save your work and navigate back to your HTML document. The final step is to link to the JavaScript file inside your HTML document. Enter the following in the section on the line after the element:
It is considered the best practice to place the element in the
section just before the closing tag.The src attribute points to your JavaScript file.
Since the JavaScript file is located in another directory, you must specify the path in the src attribute: src=’../javascript/script.js’ .
That’s the last bit of code you will need to enter. This is what your HTML document should look like:
lang='en'> charset='UTF-8'/> Linking to CSS and JavaScript rel='stylesheet' href='../css/styles.css'> If this text is red, then you successfully linked your CSS file! src='../javascript/script.js'> Be sure to save your work in each of your three files. Now it’s time to see if the links work. Open your css-and-js.html file in the browser of your choice. When you open the file in your browser, you should first encounter an alert box with the message you wrote in your JavaScript file. After clicking OK, the text you entered in the of your HTML should appear red.
If the alert box does not appear or if the text is not red, go back through the steps in this tutorial to ensure everything is entered exactly as shown here.
Congratulations! You’ve now linked to CSS and JavaScript files within an HTML document.
How to link JavaScript to HTML
When creating web pages there comes a time when you need to do a bit more than display content. You need to load JavaScript.
One of the first JavaScript files added is Google Analytics to track page loads and visitors.
But how do you link JavaScript to HTML?
In this tutorial, we are going to cover how to link JavaScript to HTML. We will look at:
- Adding JavaScript to a page
- Adding a JavaScript file to a page
- Adding JavaScript from a CDN
Adding JavaScript to a page
When you add JavaScript to a page you use a tag. Sounds simple enough. Let’s look at an example.
We will start simple. Say that as soon as the web page loads we want to say “hello”. To do this we can use the alert() JavaScript function.
We will need a very basic HTML page and then load the script like this:
html lang="en"> head> title>Hello!title> head> body> script> alert("hello") script> body> html>The above is all you would need to say hello when the page loads. The browser reads the page and processes the HTML line by line. When it reads the script tag it knows that this is JavaScript and it will run the code.
When it reads the line alert(«hello») it can see we want to display the word “hello” in an alert:
This is a simple example but it shows how you can write JavaScript within an HTML page. This is “inline” JavaScript.
The script tag has some attributes that we can use. These are:
For example, we could specify that the script is JavaScript by adding a type like this:
script type="text/javascript"> alert("hello") script>It used to be common to use more than one type of script but JavaScript won that battle. So now browsers default the type to Javascript. So the above code is the same as:
So there is no reason to use the type attribute anymore.
What about the other attributes, what do they do?
The other attributes only work when loading an external JavaScript file. Let’s look at this next.
Adding a JavaScript file to a page
To load an external JavaScript file we need to use the src attribute. src stands for source and it is the path to the script that you want to load. This attribute loads an external JavaScript file.
For example, say that we have a JavaScript file called main.js in the assets folder on your web server. The contents of this file are the same as before:
When the file loads it will alert with the word “hello”.
You would load the external file with this HTML:
html lang="en"> head> title>Hello!title> head> body> script src="/assets/main.js">script> body> html>Remember, we don’t need to include the type because the file is JavaScript. All we need is the src attribute which is the path to the file.
The HTML will load the script when it loads the page as it did before. When the browser reads that line it will fetch the JavaScript file and run it.
Now that we have an external script we can look at some of the other script attributes. Let’s start with async and defer .
When the browser finds a script tag in the HTML the page loading stops while the browser fetches the script. Once the file is ready the browser runs the code. Once the code has finished running the page will resume loading.
async and defer will improve web performance by allowing the page to continue to load. But they do it in different ways.
The async attribute tells the browser to download the file in the background. This allows the page to continue loading. As soon as the file has downloaded the browser will run the code.
This is how you would add the async attribute:
html lang="en"> head> title>Hello!title> head> body> script src="/assets/main.js" async>script> body> html>How does defer differ? This attribute tells the browser to download the file in the background like async . Yet, it will only run the code once the browser has finished processing loading the page.
This means that defer will not block the page at all. Whereas, async will only block the page when it runs the code. Both attributes mean that they will not block the page when the script is downloading.
Here is how you would use defer :
html lang="en"> head> title>Hello!title> head> body> script src="/assets/main.js" defer>script> body> html>So which one do you choose and when?
The general rule is that you should use defer because it will never stop the page from loading. Also, if you have more than one script on the page defer will run them in order. With async the code runs as soon as they download and you cannot guarantee order.
There is one more attribute that we have not talked about. It is the charset attribute.
This attribute allows you to specify the encoding of the characters. Which can either be “UTF-8” or “ISO-8859-1”. In 20 years of creating web sites, I have never used this attribute. It is safe to say you can leave the default which is “ISO-8859-1”.
Where should you put your script tags? The general rule is to add them before the