CODEWITHSUNDEEP
htmlcss
user13910430
user13910430

Reputation:

linking between HTML and CSS files

I have written my html and css code, but both the files are not linking. I am unable to find any error in the codes. This is my html file

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>basicapp</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="static/css/basicapp.css"/>
  </head>
  <body>
    <ul>
    </ul>
 </body>
</html>

The file structure is:

/desktop/templates/index.html
/desktop/static/css/basicapp.css

Upvotes: 1

Views: 418

Answers (3)

msassen
msassen

Reputation: 139

The answer has been provided to you, but here is some more information:

  • / is an absolute path, e.g. /index.html will be at the root of your server, or on your PC most likely C://

  • or ./ the folder in which the current file resides, this is actually what is happening in your case. static/css/basicapp.css will take you to /desktop/templates/static/css/basicapp.css

  • ../ is the parent relative to the current folder (hence the answers supplied).

Example

Let's say you have the following structure:

/folderA/folderB/index.html

/folderA/folderB/fileA.html

/folderA/folderC/fileB.html

Say you're in the index.html :

To get to file A: ./fileA.html or fileA.html

To get to file B: ../folderC/fileB.html

I left out the absolute paths since they tend not to be recommended since you might not know the true root of your website.

Your code

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

By Rashed Rahat

Read more

Edit: Applied Heretic Monkey's comment.

Upvotes: 2

Rashed Rahat
Rashed Rahat

Reputation: 2495

As you mentioned:

- desktop
  - templates
    - index.html
  - static
    - css
      - basicapp.css

As your CSS is on another folder so you have to link any following way:

Try relative path:

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

Or,

Try absolute path:

<link rel="stylesheet" type="text/css" href="/desktop/static/css/basicapp.css"/>

Upvotes: -1

T J
T J

Reputation: 43166

As Poney says in their comment: The path of your css file is related to the path of your html file. Try with href="../static/css/basicapp.css"

Upvotes: 0

Related Questions