How to Link CSS to HTML – Stylesheet File Linking
Kolade Chris
HTML is the markup language that helps you define the structure of a web page. CSS is the stylesheet language you use to make the structure presentable and nicely laid out.
To make the stylings you implement with CSS reflect in the HTML, you have to find a way to link the CSS to the HTML.
You can do the linking by writing inline CSS, internal CSS, or external CSS.
It is a best practice to keep your CSS separate from your HTML, so this article focuses on how you can link that external CSS to your HTML.
How to Link CSS to HTML
To link your CSS to your HTML, you have to use the link tag with some relevant attributes.
The link tag is a self-closing tag you should put at the head section of your HTML.
To link CSS to HTML with it, this is how you do it:
Place the link tag at the head section of your HTML as shown below:
Attributes of the Link Tag
The rel Attribute
rel is the relationship between the external file and the current file. For CSS, you use stylesheet . For example, rel=»stylesheet» .
The type Attribute
type is the type of the document you are linking to the HTML. For CSS, it is text/css . For example type=»text/css» .
The href Attribute
href stands for “hypertext reference”. You use it to specify the location of the CSS file and the file name. It is a clickable link, so you can also hold CTRL and click it to view the CSS file.
For example, href=»styles.css» if the CSS file is located in the same folder as the HTML file. Or href=»folder/styles.css» if the CSS file is located on another folder.
Final Thoughts
This article showed you how to properly link an external CSS file to HTML with the link tag and the necessary attributes.
We also took a look at what each of the attributes means, so you don’t just use them without knowing how they work.
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.