HTML与CSS关联失效，该如何排查解决？

Hey there! Let's figure out why your CSS isn't loading—this is super common when you're starting out, so don't worry. Let's go through the most likely issues step by step:

Common Fixes for CSS Not Loading #

• Double-check your file path
  Your <link> tag uses css/style.css, which means your folder structure should look like this:

  YourProject/
  ├─ your-html-file.html
  └─ css/
     └─ style.css
  

  If your HTML file is inside a subfolder (like pages/index.html), or your style.css isn't actually in a css folder, the path will break. For example:

  • If HTML and CSS are in the same folder: use href="style.css"
  • If CSS is one level up from the HTML: use href="../style.css"

• Verify your <link> tag syntax
  Make sure there are no typos in your tag. Check that:

  • rel="stylesheet" is spelled correctly (no missing letters)
  • Quotation marks are properly paired (you have them right in your code, but it's easy to miss!)
  • In HTML5, type="text/css" is optional, but if you include it, make sure it's not misspelled.

• Test with a simple CSS rule
  Open your style.css and add this at the top:

  body {
    background-color: red !important;
  }
  

  Save the file and refresh your HTML. If the background turns red, your CSS is loading—meaning the problem is with your original CSS code (like a missing curly brace, invalid selector, etc.). If it doesn't turn red, the issue is still with loading the file itself.

• Clear your browser cache
  Browsers love to cache files to load pages faster, but sometimes that means you're seeing an old version of your CSS. Press Ctrl + F5 (Windows/Linux) or Cmd + Shift + R (Mac) to force a full refresh.

• Check the browser dev tools
  Hit F12 to open Developer Tools, then go to the Network tab. Refresh your page and look for style.css in the list:

  • If you see a 404 status: the file path is wrong (go back to the first point!)
  • If you see a 200 status: the file loaded successfully—so the problem is in your CSS code (check for syntax errors)

内容的提问来源于stack exchange，提问作者Gloopann