Cannot link CSS to HTML

Question

Please help to check why I cannot link club.css to index.html.

index.html (Please note: I have to use the direct local path as the CSS link, or it will show that "some content has been disabled in this document.")

<head>
    <meta charset="utf-8">
    <title>The California Corgi Dog Club</title>
    <link rel="stylesheet" type="text/css" href="C:\Users\leeson\Desktop\CS651 Web Systems\assignment\assignmentfall2021-Rijutady\clubProject\club.css" />
</head>

club.css (Please note that the css file is under Encoding utf-8)

h1 {
    background-color: skyblue
}

What are you using to access the HTML document? Are you just opening it directly or through a webserver (XAMPP, WAMP, etc.)? — Delta, Sep 01 '21 at 06:34

score 1 · Answer 1 · answered Sep 01 '21 at 06:40

The Simple Answer

Using a relative path should resolve your issue for most situations.

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

The Alternative

You could also include the CSS directly into the HTML document, however this is not always ideal or recommended. Here's an article on that.

<style>
  h1 {
    background-color: skyblue
  }
</style>

Kusal Darshana · Answer 2 · 2021-09-01T09:42:21.327

@NullPointDev's answer is correct. Use Relative path to your projects. It will make your work easier without errors. I just put some additional information for make your project easier.

If both HTML and CSS files in same directory, You can link your CSS like this,

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

If the CSS file is located in another directory in the directory which the HTML file located, you can use this method.

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

If the CSS file located in out of the directory which the HTML file located, Use ../ to go back.

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

Read this Article for more info. Relative Path | W3 Schools

Now you know all the basics of Relative path. Wish you all the best.

Thanks for covering those extra cases, I didn't really think to mention them because of the way that the original question's example referenced the CSS's path, but this is definitely quite a bit more descriptive. — Delta, Sep 01 '21 at 11:00

score 0 · Answer 3 · answered Sep 01 '21 at 06:36

0

no ,

it will be <link rel="stylesheet" type="text/css" href="club.css" />

if its under the clubproject

answered Sep 01 '21 at 06:36

Sarvesh

95
1
13

Alfiya Siddique · Answer 4 · 2021-09-01T08:02:07.003

0

The solution code for your question is:

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

Your mistake : You have written the complete folder path instead of relative file path.

Advice: Have a look to the below link to clear concept. https://www.w3schools.com/html/html_filepaths.asp

edited Sep 01 '21 at 08:02

answered Sep 01 '21 at 07:55

Alfiya Siddique

1
1

score -1 · Answer 5 · answered Sep 01 '21 at 06:53

-1

I prefer simple solution which is using relative path.

club.css

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

Where is the problem:

URLs cannot contain spaces

answered Sep 01 '21 at 06:53

WPPlumber

376
2
9

Cannot link CSS to HTML

5 Answers5

The Simple Answer

The Alternative