Survey Form - Build a Survey Form

HTML-CSS
1

When i try to change the font size of the h1 element in css, the whole block of text changes size. I have made sure to exclude both the h1 and p element from the body element so i could change the size separately but the problem still persists. Help please.
Code i’m using:
h1{font-size: 30px;
}

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head><link rel="stylesheet" href="styles.css"><head>
  <h1 id="title">freeCodeCamp Survey Form<h1>
<p id=description>Thank you for taking the time to help us improve the platform</p>
<body>
  <form id="survey-form">
  <!-- first field -->
  <fieldset>
    <label for="name" id="name-label" >Name<input id = "name" type="text" required><label>
    <label for="email" id="email-label" >Email<input id= "email" type= "text" type="email" required><label>
    <label for="age" id="age-label" >Age(optional)<input id="age" type="number" ><label>    
</fieldset>
<!-- second field-->
<fieldset>
  <label>Which option best describes your current role?<select id="dropdown">
    <option value ="">Select current role</option>
    <option value ="student">Student</option>
    <option value ="full-time-job">Full Time Job</option>
    <option value ="full-time-learner">Full Time Learner</option>
    <option value ="prefer-not-to-say">Prefer not to say</option>
    <option value ="other">Other</option>
  </label>
</fieldset>
<!--Third field -->
<fieldset>
  <label><input type="radio" id="definitely" name="recommendation" >Definitely</label>
<label><input type="radio" id="maybe" name="recommendation" >Maybe</label>
  <label><input type="radio" id="not-sure" name="recommendation" >Not sure</label>
 </fieldset>
 <!--Fourth fieldset-->
 <fieldset>
    <p class="checkbox-title">What would you like to see improved. Check all that apply</p>
   <label for="front-end-projects" >Front End Projects<input value="front-end-projects" id="front-end-projects" type="checkbox"> </label>

   <label for="back-end-projects">Back End Projects<input id="back-end-projects" value="back-end-projects"type="checkbox"> </label>

   <label for="data-visualisation">Data visualisation<input value="data-visualisation" type="checkbox"> </label>
  

   <label for="challenges">Challenges<input id="challenges" value="challenges" type="checkbox"> </label>

   <label for="open-source-community">Open Source Community<input id="open-source-community" value="open-source-community" type="checkbox"> </label>

<label for="glitter-help-rooms">Glitter help rooms<input id="glitter-help-rooms" value="glitter-help-rooms" type="checkbox"> </label>

<label for="videos">Videos<input id="videos" value="videos" type="checkbox"> </label>

<label for="city-meetups">City meetups<input id="city-meetups" value="city-meetups" type="checkbox"> </label>

<label for="wiki">Wiki<input id="wiki" value="wiki" type="checkbox"> </label>

<label for="forum">Forum<input id="forum" value="forum" type="checkbox"> </label>

<label for="additional-courses">Additional courses<input id="additional-courses" value="additional-courses" type="checkbox"> </label>
</fieldset>
<!--Fifth fieldset-->
<fieldset>
 <label for="bio">Any comments or suggestions
          <textarea id="comments-and-suggestions" name="comments-and-suggestions" rows="4" cols="40" placeholder="Enter your comment here..."></textarea>
        </label>
</fieldset>
</form>
</body>


/* file: styles.css */
body{ background-image: url(https://st4.depositphotos.com/10839834/21083/v/450/depositphotos_210836720-stock-illustration-streaming-binary-code-background-cyber.jpg);
background-repeat: no-repeat;
background-color: black;
background-size: cover;
color:white;
font-family: sans-serif;
font-size: 10px
}

h1{font-size: 30px;
}
form{background-color: black;
max-width: 450px;
min-width: 300px;
margin: 0 auto
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/111.0.0.0 Safari/537.36

Challenge: Survey Form - Build a Survey Form

Link to the challenge:

2

It looks like you didn’t close your h1 element correctly.

3

Thank you, Im not sure how I missed that lol.

1 Like