External stylesheet

Tell us what’s happening:
I am working on the project of “survey form”. I had a draft html and wanted to use css to style it but th external stylesheet does not work. At the moment I am using internal stylesheet. May I get help on how to activate the external stylesheet?
Thank you.

   **Your code so far**
/* file: index.html */
<!DOCTYPE html>
<html>
<head>
 <title>survey form</title>
 <link rel="stylesheet" href="styles.css"/>
 </head>
 <body>
     <h1 id="title">Survey Form</h1>  
     <p id="description">
       This form is to collect data for the purpose of clarifying a profile that may be unclear</p>
 <form id="survey-form" action="https://survey-excercises.freeCodeCamp.org">
 <section>
 <fieldset>
<label><input id="name" type="text" name="my-name" value="Hamdy Elhinnawy"</input></label>
</fieldset>
<fieldset>
<label><input id="email" type="email" value="haahinnawy@hotmail.com"</input></label>
</fieldset>
<fieldset>
<label><input id="number" name="my-id-card" min="8" max="20" value="1201157"</input></label>
</fieldset>
</fieldset>
<fieldset>
<select id="dropdown"> 
 <option value="">Select gender</option>
 <option value="1" checked>Male</option>
 <option value="2">Female</option>
 </select>
 </fieldset>  
   </section>
   <fieldset>
 <legend>What is your political affiliation?</legend>
 <label><input type="radio" name="left-liberal" value="left">left</label>
 <label><input type="radio" name="left-liberal" value="liberal">liberal</label>
 </fieldset>
 <fieldset>
 <legend>Which of the following best descrubes your interests?
   <input type="checkbox" name="personal-interests" value="chesspalyer"><label for="chessplayer"> Chesssplayer</label>
  <input type="checkbox" name="personal-interests" value="do it yourself"><label for="do it yourself">Do it yourself</label>
   <input type="checkbox" name="personal-interests" value="reading books">Reading books</label>
   <input type="checkbox" name="personal-interests" value="gardening"><label for="gardening">Gardening</label>
  <input type="checkbox" name="personal-interests" value="lark"><label for="lark">Lark</label>
  <input type="checkbox" name="personal-interests" value="owl"><label for="owl">Owl</label>
   <input type="checkbox" name="personal-interests" value="early bird"><label for="early bird">Early bird</label>
   <input type="checkbox" name="personal-interests" value="late riser"><label for="late riser">Late riser</label>
   <input type="checkbox" name="personal-interests" value="hard worker"><label for="hard worker">Hard worker</label>
   </fieldset>
   <label>Additional comments:
         <textarea rows="3" cols="30">I was a prisoner of conscience, as I was imprisoned three times in my life for a total of more than seven years</textarea>
</label>
<input type="submit" id="submit" value="Submit"/>
   </form>
 </body>
</html>
<style>
#title{
 text-align: center;
}
#description{
 margin: 5px auto;
}
fieldset{
 border: none;
}
label{
 display: block;
}
input{
display: block;
}
</style>
/* file: styles.css */

   **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.5060.66 Safari/537.36 Edg/103.0.1264.44

Challenge: Build a Survey Form

Link to the challenge:

Everything seemed to work fine when I copied all the code I quoted into the styles.css tab and deleted the style element.

Thank you but I am not aware with the so-called styles.css tan. How does this tab look like? Please let me know.
Thanks.

Its up at the top of the screen:
image

Yes. Thank you. I am sorry I did not notice that.