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:
