CODEWITHSUNDEEP
htmlcss
Alex
Alex

Reputation: 272

CSS file not linking to HTML file

I am trying to create a basic webpage but my css file does not seem to want to link to my html file. I have looked at several different resources and have no clue why this is the case.

body {
    background-color: red;
}
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width initial-scale=1">

        <link href="index.css" rel="stylesheet" type="text/css"/>
        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">

        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vis-network@latest/styles/vis-network.css" type="text/css" />

        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vis-network@latest/dist/vis-network.min.js"> </script>

        <center>
        <h1>Welcome</h1>
        </center>

    </head>

    <body>
        Welcome


        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
        
    </body>
</html>

Upvotes: 0

Views: 78

Answers (1)

Quentin
Quentin

Reputation: 944443

The problem doesn't appear to be with linking your stylesheet.

Open the developer tools in your browser. Look at the Inspector. Look at the style rules applied to the body element.

screenshot of DOM inspector

When multiple rules, setting the same properties, have equal specificity the last one overrides the previous ones.

You put the Bootstrap CSS after your own CSS, so its rule to set the background-color is replacing your rule.

Order matters.

It is possible that you might also have a problem linking your own stylesheet, in which case you should use the Network tab to look for the HTTP request to load it and see what response the HTTP server makes.

Once you know if the problem is a permissions error, or a 404 Not Found error, or the Content-Type being wrong, then you make make steps to fixing it.

Upvotes: 3

Related Questions