How to link a CSS file from HTML file?

Solution 1:

Why does linking a CSS file not work?

In your example, you only have to change the rel="Hope this works" to rel="stylesheet" in order for it to recognize it as a stylesheet, as demonstrated in the following:

<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").