0

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.

9
  • 1
    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
    Sep 5, 2017 at 8:40
  • 1
    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
    Sep 5, 2017 at 8:40
  • jsfiddle.net/x6x3bcxw all work fine, can you give a full css and html? 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
    Sep 5, 2017 at 8:43
  • @Salketer i can open this fiddle, and you have 404? Sep 5, 2017 at 8:44

1 Answer 1

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:

  1. Right click on page and inspect (element)

  2. Navigate to Sources

  3. Navigate to your Stylesheet

  4. 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

1
  • 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.
    – tifrel
    Sep 5, 2017 at 8:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.