Link for css not connecting with html-CodePudding

    <html lang=en>
<head>
    <style>
        .title{
        color: red;
        font-size: 30px;
        display:inline-flex;
        justify-content: center;
    }
    </style>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Dabble</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <!-- CSS only -->
    <!-- <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> -->
    <link rel='stylesheet' href='main.css'>
    <script src='index.js'></script>
</head>
<body>
    <h1 >Dabble</h1>
    <div >
        <p>What is happening here</p>
    </div>

</body>
</html>

main.css

.title{
    color: red;
    font-size: 300px;
    display: flex;
    justify-content: center;
}

The stylesheet I'm using in my html works but when i am importing the css with the link it doesn't work. All items are in the same root folder so I thought this would work after looking at some docs online.

CodePudding user response：

If it still doesn't work:

Check the CSS File name, and check it is correct Check where both are located, for example

My Website