How Do I Properly Link a CSS File to My HTML File?

How to link a CSS file from HTML file?

You need to change the rel attribute value to stylesheet in order for it to recognize it as a stylesheet, like this:

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

Setting the rel attribute value to stylesheet distinguishes the difference between, say, a stylesheet link and an icon image link. You can see all the possible values for the rel attribute on MDN.

Furthermore, if it still doesn't work, ensure that the file "newcssstyle.css" is in the same directory as the referenced HTML file. If you put it in a folder such as "stylesheets", ensure that you add the relative folder path to your HTML file.

For example, if you had a directory like this:

• Parent Directory Name:

  • index.html

  • Stylesheets:

    • newcssstyle.css

Then you would reference "newcssstyle.css" (relative to "index.css") as href='Stylesheets/newcssstyle.css'

Whereas, in a directory like this:

• Parent Directory Name:

  • Html_files:

    • index.html

  • Stylesheets:

    • newcssstyle.css

Then you would reference "newcssstyle.css" as href='../Stylesheets/newcssstyle.css' instead (where .. means "go up one level to the parent directory").

And in a directory like this:

• Parent Directory Name:

  • index.html
  • newcssstyle.css

Then you would reference "newcssstyle.css" as href='./newcssstyle.css' instead (where a single . means "it's on the same level as the HTML file").

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