Linking CSS to HTML file: Path specification

Question

No matter how I link my stylesheet, the resulting page remains unstyled. HTML:

<!DOCTYPE HTML>

<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  test test test
</body>
</html>

CSS:

@charset "UTF-8";

body {
  background-color: #f25f29;
}

Both files are located in the same folder, which is test inside the xampp htdocs folder. Another website with stylesheet, which I have taken from a book in another subfolder inside htdocs is just fine. (I tried to figure out the mistake in my own page based on the working one, but I couldn't find it)

I already tried the following things:

different paths
- style.css
- ./style.css
- /opt/lampp/htdocs/test/style.css
- file://opt/lampp/htdocs/test/style.css
- /test/style.css (since I guessed that the localhost takes htdocs as root directory)
- file://test/style.css
matching the charset specifier in CSS and HTML files (all uppercase)
using /> to close the link instead of >
inserting a space between linkname and closing bracket
sudo chmod 777 * inside the test folder (changed it back to 644)
restarting xampp
omitting the type="text/css" specification
quadruple-checking the name of the stylesheet and its path
I've had it never enclosed in <style> tags
Also always used the straight quotation signs instead of the "italic" ones

The version that I have given above is the one that works in the other case.

Edit: Clearing the cache the cache fixed it, as suggested in the comments.

Have you tried clearing your cache? I had this problem before where my stylesheet was not updated when i did everything right. I cleared the cache and it worked. — Granny
– Granny, Commented Sep 5, 2017 at 8:40
Have you had a look at your developper tools? Check the network tab to see if the stylesheet is fetched, and at what URL. — Salketer
– Salketer, Commented Sep 5, 2017 at 8:40
jsfiddle.net/x6x3bcxw all work fine, can you give a full css and html? — Dmytro Lishtvan
– Dmytro Lishtvan, Commented Sep 5, 2017 at 8:41
@DmitriyLishtvan what are you trying to show in your fiddle? It produces a 404... Nothing better than OP... — Salketer
– Salketer, Commented Sep 5, 2017 at 8:43

Granny · Accepted Answer · 2017-09-05 09:02:50Z

2

When CSS is not updating on your website, it could be that the website has an older version of the stylesheet in the cache. Clearing this will make it fetch the updated version.

To find out if this is the problem:

Right click on page and inspect (element)
Navigate to Sources
Navigate to your Stylesheet
check if this is the updated version.

If your stylesheet is not up to date, clear cache and check if it worked.

For example:

Clear cache in Google Chrome

Clear cache in Internet Explorer

Clear cache in Mozilla Firefox

edited Sep 5, 2017 at 9:02

answered Sep 5, 2017 at 8:53

Granny

79311 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

tifrel Over a year ago

You could also edit your post and tell that a hint to the older stylesheet can be found in the css that you can see in your dev-tools. In my case it was empty.

Collectives™ on Stack Overflow

Linking CSS to HTML file: Path specification

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related