Skip to content Skip to sidebar Skip to footer

How To Link A Css File From Html File?

I have been styling my HTML with inline tags in the section. When I tried to move styles to CSS file for the first time from HTML file but,

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

Solution 2:

element creates relationship between current and external documents.

Important point about i the attribute which stands for relationship. This attribute define how the linked document is related to the current document. How it is read..

Also please make sure your .css file has the same name as Your href.

You can read more about it here -> https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link

Post a Comment for "How To Link A Css File From Html File?"