How to Properly Link a CSS File to an HTML File?

How to Link a CSS File from an HTML File

You encounter an issue when linking a CSS file from an HTML file. The issue can be resolved by ensuring the following:

Set the Correct Attribute Value

In the HTML file, the rel attribute's value should be set to "stylesheet" instead of "Hope this works." The corrected code would be:

<link rel="stylesheet" href="newcssstyle.css" type="text/css">

Ensure File Placement

The "newcssstyle.css" file must be in the same directory as the HTML file it references. If it's in a subfolder, adjust the href attribute path accordingly.

Example Directory Structures and Relative File Paths

Case 1: CSS file is in a subfolder named "Stylesheets."

Parent Directory Name
   index.html
   Stylesheets
      newcssstyle.css

HTML:

<link rel="stylesheet" href="Stylesheets/newcssstyle.css">

Case 2: CSS file is in a different subfolder named "Html_files."

Parent Directory Name
   Html_files
      index.html
   Stylesheets
      newcssstyle.css

HTML:

<link rel="stylesheet" href="../Stylesheets/newcssstyle.css">

Case 3: CSS file is in the same directory as the HTML file.

Parent Directory Name
   index.html
   newcssstyle.css

HTML:

<link rel="stylesheet" href="./newcssstyle.css">

The above is the detailed content of How to Properly Link a CSS File to an HTML File?. For more information, please follow other related articles on the PHP Chinese website!