Dev Practical

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:

  1. Using the wrong HTML tag to link HTML to CSS.
  2. Placing the CSS link in the wrong part of the web page.
  3. Non-matching file name and link href value name
  4. Spaces in the CSS file name
  5. HTML and CSS file location on same or different folders
  6. 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.

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.

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.

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:

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:

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:

If you follow this guide, you will always be able to connect your HTML and CSS files together.