When working with HTML and CSS, you may find that your CSS is not styling your HTML document even when you’ve added the CSS to your page.
Here are six fixes that you can try to make your CSS work on your HTML page
Make sure that you add the rel attribute to the link tag
When you add an external CSS file to your HTML document, you need to add the rel="stylesheet" attribute to the <link> tag to make it work.
<link rel="stylesheet" href="style.css" />
If you omit the rel attribute from the <link> tag then the style won’t be applied to the page.
Make sure you have the correct path in the href attribute
If you have the CSS file in the same folder as the HTML document, then you can add the path to the CSS file directly as shown below:
<link rel="stylesheet" href="style.css" />
If you add a / before the file name, the CSS won’t be applied:
<link rel="stylesheet" href="/style.css" />
<!-- this is wrong -->
When your CSS is one folder away, you need to specify the folder name inside the href attribute without the / as well.
This is wrong:
<link rel="stylesheet" href="/assets/style.css" />
This is correct:
<link rel="stylesheet" href="assets/style.css" />
Make sure the CSS file name is correct
The name of the CSS file that you put inside the href attribute must match the actual name of the CSS file.
If you have a CSS name with spaces, then you need to include the spaces in a URL-safe format by replacing it with %20
For example, suppose the name of your CSS file is my style.css, then here’s the correct name inside the href attribute:
<link rel="stylesheet" href="my%20style.css" />
Because URL can’t contain spaces, it’s recommended that you replace all spaces in your CSS file with a hyphen - or an underscore _ so that my style.css becomes my-style.css or my_style.css.
Make sure the link tag is at the right place
The <link> tag that you used in your HTML file must be a direct child of the <head> tag as shown below:
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>Hello World</h1>
</body>
If you put the <link> tag inside another valid header tag like <title> or <script> tag, then the CSS won’t work.
The following example is wrong:
<head>
<title>
<link rel="stylesheet" href="STYLE.css" />
</title>
</head>
<body>
<h1>Test page</h1>
</body>
The external style CAN be put inside the <body> tag, although it’s recommended to put it in the <head> tag to load the style before the page content.
The following example still works:
<body>
<link rel="stylesheet" href="STYLE.css" />
<h1>Test page</h1>
</body>
Make sure that all your style rules are correct
When you have an invalid CSS syntax inside your stylesheet, then the browser will ignore the invalid syntaxes and apply the valid ones.
For example, suppose you have the following CSS file:
body {
background-color: greenyellow;
}
h1 {
color: choco;
}
Because browsers have no support for choco color name, the style rule for <h1> tags above will be ignored while the background-color property for the <body> tag will be applied.
Make sure that you are using the right syntax for your styling because invalid CSS syntax won’t generate an error message.
Invalidate the cache with a hard reload
Sometimes, you might have the CSS file linked correctly from your HTML file, but you don’t see the changes you make to the CSS file reflected on the web page.
This usually happens when the browser serves a cached version of your CSS file.
To invalidate the cache and serve the latest version of your CSS file, you can perform a hard reload on the browser.
The shortcut to perform a hard refresh might vary between browsers:
- For Edge, Chrome, and Firefox on Windows/ Linux, you need to press
Shift + CTRL + R - For Edge, Chrome, and Firefox on macOS, you need to press
Shift + CMD + R - For Safari, you need to empty caches with
Option + CMD + Eor click on the top menuDevelop > Empty Caches
If you’re using Chrome, you can also select to empty the cache and perform a hard reload with the following steps:
- Open the Chrome DevTools by pressing
Shift + CTRL + Jon Windows/ Linux orOption + CMD + Jon Mac. - Right-click on the reload (refresh) icon and select the third option
The image below shows the Chrome Empty Cache and Hard Reload option you need to select:
With that, you should see the latest CSS changes reflected on your web page.
Alternatively, you can also invalidate the browser cache by using CSS versioning as explained here:
CSS versioning trick explained
And those are the six fixes you can try to link your CSS file to your HTML document.
I hope this tutorial has helped you fix the issue 👍
