Why your html and css are not linking: how to link CSS to HTML properly
The proper way to link a CSS file to a HTML file is adding <link rel="stylesheet" type="text/css" href="name-of-the-file.css"> between the <head></head> HTML tags at the top of the HTML page. However, there are many tiny mistakes that you can make that can result in your HTML and CSS not linking properly. These are:
- Using the wrong HTML tag to link HTML to CSS.
- Placing the CSS link in the wrong part of the web page.
- Non-matching file name and link href value name
- Spaces in the CSS file name
- HTML and CSS file location on same or different folders
- Syntax errors in your CSS file
6 mistakes you are making when linking CSS to HTML and how to correct them.
Lets look at each error you might be making and how you can link HTML to CSS properly.
1. Using the wrong HTML tag to link HTML to CSS.
You sometimes find people trying to use <style></style> HTML tags to link your CSS to HTML. This cannot work.
You can only use <style></style> HTML tags when you are writing your CSS in the head section of a HTML document itself not linking the CSS file.
The correct HTML tag to link a CSS file to a HTML file is using the <link rel="stylesheet" href="main.css"/>. The "main.css" is the name of the CSS file. Please note that the <link > HTML tag is a self-closing tag and does not to come in pairs like the <style></style> or <head></head> HTML tags.
2. Placing the CSS link in the wrong part of the web page.
You will not be able to link HTML and CSS, if you place the <link href=""> HTML tag on any other part of the webpage other that inside the <head></head> head tags.
So look at where you have placed your link HTML tag and adjust that accordingly.
3. Non-matching file name and link href value name
Check to make sure that your CSS file name is the same as the name indicated in the href value on the <link href="name-of-css-file.css"> HTML tag. If you use a different name, the browser will look at the link you have assigned to your HTML file. If it finds nothing there, it does nothing. If the two do not match, then you have found your culprit.
All you have to do is change the href value to the correct name of the CSS file.
4. Spaces in the CSS file name
When you have spaces in the CSS file namme name of file.css, the browser will not be able to correctly interprete the spaces in the href value <link href="name of file.css">.
To make this work, you can either:
- replace the spaces in the href value with
%20. i.e.<link rel="stylesheet" type="text/css" href="name%20of%20file.css">or - replace the spaces in the CSS file name with
hypen(-) or underscore(_)on both the file name and the href link value as a way to seperate words.
5. HTML and CSS file location on same or different folders
When your HTML and CSS files are not on the same folder, you might have some challenges linking them. You can resolve this problem by:
- Using the correct file path to the CSS file. So if the CSS file is in a different folder from the HTML path, you need to identify the path name and add it to the link href value. eg.
If the css file is in a folder called
stylesthat was in the same folder as the HTML file, the correct path would be<link href="styles/name-of-file.css">. - Moving the CSS and HTML to the same folder. When you move them to the same folder, the link href value will simply be the css file name:
<link href="name-of-file.css">.
6. Syntax errors in your CSS file
If you have an error in the CSS file, it may result in your CSS styles not being applied to the HTML code. The easiest way to correct this is to either:
- Use a text editor with syntax highlighter. Syntax highlighting will help you identify where your code is not correct.
- Use an online CSS validator tool. An online CSS validator tool will tell you where you have made a mistake in you CSS code.
If you follow this guide, you will always be able to connect your HTML and CSS files together.
