Survey Form - Build a Survey Form

Tell us what’s happening:

Hello. I can’t link the css file to the html. What am I doing wrong?

Your code so far

<!-- file: index.html -->
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF_8"> 
    <meta name="viewport" content="width=device-width, initial scale-1">
  <title> Media Marketing Survey Form</title>
    <link rel="stylesheet" href="styles.css"> 
     </head>
<body>
</main>
  <!-- Header -->
  <header>
<h1 id="title" >Media Marketing Survey Form </h1>
<p id="description"> Thank you for taking the time to help serve you better.
</p> </header>
<!-- Form -->
  <form id="survey-form" action="#" method="get">
  <!-- Contact-Information-->  <fieldset> 
    <legend>Contact Information</legend>
    <div class="form-group"> 
      <label id="name-label" for="name">Name <input type="text" id="name" name="name" placeholder="Enter Your Name" required>
<label id="email-label" for="email">Email 
   <input type="email" id="email" name="email" placeholder="Enter your email" required>
</label> 
<label id="number-label" for="number">Age
   <input type="number" id="number" name="age" min="18" max="120" placeholder="optional"> </label>
   </div> 
   </fieldset>
    <!-- Service Information -->
 <fieldset> 
   <legend>Service Information</legend> 
  <div class="form group">
 <p class="normal text">Choose Service</p> 
 <label for="e-com"> 
 <input type="checkbox" id="e-com" name="e-com" value="e-com">E-Commerce Service
 </label></br>
<label for="stream"> 
<input type="checkbox" id="stream" name="stream" value="stream">Streaming Service </label></br>
<label for="social-media"> 
<input type="checkbox" id="social-media" name="social-media" value="social-media"> Social Media Service </label></br>
</div> 
<div class="form-group">
 <label for="dropdown">When was the last time you used the service?
  <select id="dropdown"> 
   <option value="" disabled selected>Select One</option>
   <option value="1">Today</option>
   <option value="2">This Week</option>
   <option value="3">This Month</option>
   <option value="3">This Year</option>
   </select>
     </label>
     </div>
     </fieldset>
<!-- Service Feedback -->
<fieldset>
<legend> Service Feedback</legend>
<div class="form-group">
  <p class="normal-text">How do you rate the selected service?</p>
  <label for="good"> <input type="radio" id="good" name="rating" type="rating" value="good"> Good </label></br>
<label for="average">
  <input type="radio" id="average" name="rating" type="rating" value="average"> Average</label></br> 
  <label for="bad">
    <input type="radio" id="bad" name="rating" type="rating" value="bad">Bad </label></div>
 <div class="form-group">
<label for="comments">Comments and suggestions?
<textarea id="comments" name="comments" cols="30" rows="4" placeholder="Enter your comments here..."></textarea></label>
<div>
</fieldset>
<button id="submit" type="submit">Submit</button>
 <button id="reset" type="reset" onclick="alert('Reset completed!')">Reset</button>
     </form>
     </main>
     </body>
     </html>
/* file: styles.css */
/*-- styles.css --*/
body:{
background-color: #0000ff;
text-align: center; 
height: 100vh;
width: 100%;
margin: 0;
font-size:18;
padding-left: 50;
padding: right;}
h1 {color: green:}

Your browser information:

User Agent is: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/125.0.0.0 Safari/537.36

Challenge Information:

Survey Form - Build a Survey Form

you already have a link tot he style sheet.
What makes you think it is not linking?

I realized after I posted my question that I had put a colon by mistake after the body element and that’s why it didn’t work. I have removed the colon and now I can see that it is linked.

2 Likes