css file doesn't work with html file ( even though css file has been linked with html file)?-CodePudding

I am newbie with css and trying to write a css file to use in a html file and here is my idea.

First, I writed a html file like this

<!DOCTYPE html>
<html>
<!-- phan dau -->
<head>
    <title>
        ok we will make it
    </title>
</head>
<!-- phan than  -->
<body>
<div>
    <h1 id="first-heading">css selector</h1>
    <h1 class="css selector">css selector</h1>
    <h1 class="css selector">css selector</h1>
</div> 
</body>

Then, I write a css file like this

#first-heading {
    color: red;
}

My idea is, using the css file, first-heading to use to the first css selector to make it to be red. But it does not be red as I wish. Two files are at the same folder.

Could you please give me some ideas for me with this problem ? Thank you very much for your time.

CodePudding user response：

You need to link the CSS file to the HTML file. Place this code before the body, in the head section.

Now if the css file is in another folder( not your case), you need to specify the path too.

CodePudding user response：

You need to add this <link rel="stylesheet" href="source of your css file"> to your head section.

CodePudding user response：

you give your internal css write as below

<head>
    <style>

      #first-heading {
       color: red;
      }

   </style>
</head>

Your are external css Give to the link for two files properly. however your called external css are give your link

 <link rel="stylesheet" href="./style.css">

Thank you

CodePudding user response：

You need to link your css file to your html head, imagine you have index.html and style.css in same folder ==>

index.html

<head>
  <link rel='stylesheet' href='./style.css' />
</head>