Trouble adjusting text size associated with a radio button--CSS

Question

This is my first coding project, and it's a very small quiz that I'm working on with freeCodeCamp. The goal is to create a survey, and in my efforts to stylize my HTML with CSS, I can't for the life of me make the text associated with my radio buttons/checkboxes smaller without changing the size of all my text.

I'm trying to troubleshoot most of this on my own, as I learn best through trial-and-error, but coding is new to me, so it's a little confusing.

Thank you in advance for the help! I'm super excited to get more into programming!

When I reformat the text in my #title, it reformats everything, including the text associated with my radio buttons and checkboxes.
When I try to format just the input value in an effort to make the button text smaller, nothing changes.

body {
  background-color: rgb(200, 200, 200)
}

h1 {
  font-size: 20px;
}

#title {
  font-family: sans-serif;
  text-align: center;
  font-size: 25px;
}

#description {
  font-family: sans-serif;
  font-size: 16px;
  display: block;
}

label {
  font-family: sans-serif;
  font-size: 14px;
  display: block;
  text-align: center;
}

radio {
  display: inline;
}

input {
  font-family: sans-serif;
  font-size: 14px;
  display: block;
  margin: auto;
}

button {
  margin-left: 50%;
  margin-right: 50%;
  display: block;
  text-size: 25px;
}

<!DOCTYPE html>
<html lang="en">

</html>
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css">
<title>
  <h1 id="title">freeCodeCamp-Survey-Form</h1>
</title>

<head>
  <h1 id="title">freeCodeCamp Survey
    </title>
    <p id="description"><em>Thank you for taking the time to help us improve the platform</p>
</head>
<body>
 <fieldset>
    <form id="survey-form" action="submit_form.php" method="post">
    <label id="name-label" for="name">Name:</label>
    <input type="text" id="name" name="name" placeholder="Jane Doe" required>
    <label id="email-label" for="email">Email:</label>
    <input type="email" id="email" name="email" placeholder="[email protected]" required>
    <label id="number-label" for="age">Age (optional)</label>
    <input type="number" min="13" max="120" id="number" name="age" placeholder="23">
    <label for="role">What option best describes your current role?</label>
    <select id="dropdown" required>
      <option id="">Please select one</label>
      <option id="student">Student</option>
      <option id="FTJ">Full Time Job</option>
      <option id="FTL">Full Time Learner</option>
      <option id="Prefer-not">Prefer Not To Say</option>
      <option id="Other">Other</option>
      </select>
      <label>Would you recommend freeCodeCamp to a friend?</label>
      <input type="radio" id="recommend" name="recommend" value="definitely" checked>Definitely</input>
      <input type="radio" id="recommend" name="recommend" value="maybe">Maybe</input>
      <input type="radio" id="recommend" name="recommend" value="not-sure">Not sure</input>
      <label id="feature">What is your favorite feature of freeCodeCamp?</label>
      <select id="feature" required>
      <option id="">Please select one</option>
      <option id="challenges">Challenges</option>
      <option id="projects">Projects</option>
      <option id="community">Community</option>
      <option id="open-source">Open source</option>
      </select>
      <label for="improvements">What would you like to see improved? (Check all that apply)</label>
      <input for="improvements" type="checkbox" name="improvements" value="front-end-projects">Front-end projects</input>
      <input for="improvements" type="checkbox" name="improvements" value="back-end-projects">Back-end projects</input>
      <input for="improvements" type="checkbox" name="improvements" value="data-visualization">Data visualization</input>
      <input for="improvements" type="checkbox" name="improvements" value="challenges">Challenges</input>
      <input for="improvements" type="checkbox" name="improvements" value="open-source-community">Open-source community</input>
      <label for="comments">Any comments or suggestions?</label>
      <textarea id="comments" name="comments" rows="4" cols="50" placeholder="Please write any comments or suggestions here"></textarea>
      <button id="submit" type="submit">Submit</button>
      </fieldset>

radio { display: inline; } tries to select a radio element, e.g. <radio> but no such element exists. You need to select the input and optionally specific that it should be a radio type. See stackoverflow.com/questions/4113965/… — j08691
– j08691, Commented Dec 12, 2024 at 21:06

zer00ne · Accepted Answer · 2024-12-12 23:56:32Z

Discrepancies

There were an incredible amount of invalid HTML and each mistake contributed to your problem. Please copy the HTML posted in your question and paste it in the appropriate <textarea> here. The following are some major points of concern:

The <html> tag must be the only tag to wrap around <head> and <body>. <head> cannot be in <body> and vice-versa.
<head> and everything in it are meta content -- they are never rendered visible and never take up actual screen space.
<title> tag belongs in the <head> it is not rendered like a <h1>. <h1> is in the <body>. Anything that should be rendered will be in the <body> (there are some exceptions like <script>, and <template>).
<input> do not have an end tag ~~</input>~~.
<option> should have [value] although valid it's pointless to give them an [id].
[id]s are unique every <input type="radio"> has the same [id="recommend"] which is very invalid. Sharing the same [name] for <input type="radio"> is a good practice. BTW, if you want to style all radio buttons the proper selector is [type="radio"] not radio.

Basic HTML Page

<!DOCTYPE html>
<html lang="en">
  <!-- Nothing is rendered in the <head> -->
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <link href="external.css" rel="stylesheet">
    <style>
      /* CSS that applies only to this page */
    </style>
  </head>

  <body>
    <!-- Anything that will be rendered will be here -->
    <script src="external.js"></script>
    <script>
      /* <script> tags are not rendered */
    </script>
  </body>

</html>

There are a lot of mistakes that were not addressed. Try to follow the example I have provided for you. The HTML is valid and the CSS is small and practical. When applying styles try placing the highest in the structure and general selectors up on top (ex. :root, body, form, input, etc.) and the more specific selectors (ex. .class, #id, [attribute], etc.) toward the bottom. Note: :root font-size: 2ch will be referenced by all rem.

The <form> will submit it's data to a live test server. It has a [target="response"] attribute and value -- the value: "response" is the [name="response"] of the <iframe> at the bottom of the page. If the POST was successful (200), then the server's response will be displayed in the <iframe>.

Example

:root {
  font: 2ch/1.2 "Segoe UI"
}

h1 {
  margin-bottom: 1rem;
}

form {
  width: 92vw;
}

fieldset {
  width: 91vw;
  margin-bottom: 1rem;
}

legend {
  font-size: 1.2rem;
  margin-bottom: 0.75rem;
}

label,
input,
select,
button,
textarea {
  display: inline-block;
  font: inherit;
  margin-bottom: 0.5rem;
}

textarea {
  width: 90vw;
}

button {
  float: right;
  cursor: pointer;
}

iframe {
  width: 94.5vw;
}

#email {
  margin-left: 0.25rem;
}

#age {
  width: 2.5rem;
  text-align: right
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>freeCodeCamp Survey Form</title>
  <link href="styles.css" rel="stylesheet">
</head>

<body>
  <header>
    <h1>freeCodeCamp Survey</h1>
    <p><em>Thank you</em> for taking the time to help us improve the platform.</p>
  </header>
  <form id="survey" action="https://httpbin.org/post" method="post" target="response">
    <fieldset>
      <legend>Contact Info</legend>
      <label for="fullname">Name: </label>
      <input id="fullname" name="fullname" placeholder="Jane Doe" type="text" required><br>
      <label for="email">Email: </label>
      <input id="email" name="email" placeholder="[email protected]" type="email" required><br>
      <label for="age">Age (optional): </label>
      <input min="13" max="120" id="age" name="age" placeholder="23" type="number"><br>
      <label>Gender (optional): </label><br>
      <label><input name="gender" type="radio" value="female"> Female</label>
      <label><input name="gender" type="radio" value="male"> Male</label>
      <label><input name="gender" type="radio" value="other"> Other</label>
    </fieldset>
    <fieldset>
      <legend>Site Survey</legend>
      <label for="role">What option best describes your current role?</label><br>
      <select id="role" name="role" required>
        <option>Please select one</option>
        <option value="student">Student</option>
        <option value="FTJ">Full Time Job</option>
        <option value="FTL">Full Time Learner</option>
        <option value="Prefer-not">Prefer Not To Say</option>
        <option value="Other">Other</option>
      </select><br>
      <label>Would you recommend freeCodeCamp to a friend?</label><br>
      <label><input name="recommend" type="radio" value="definitely"> Definitely</label>
      <label><input name="recommend" type="radio" value="maybe"> Maybe</label>
      <label><input name="recommend" type="radio" value="never"> Never</label>
      <br>
      <label for="feature">What is your favorite feature of freeCodeCamp?</label><br>
      <select id="feature" name="feature" required>
        <option>Please select one</option>
        <option value="challenges">Challenges</option>
        <option value="projects">Projects</option>
        <option value="community">Community</option>
        <option value="open-source">Open source</option>
      </select><br>
      <label>What would you like to see improved? (Check all that apply)</label><br>
      <label><input name="improvements" type="checkbox" value="front-end-projects"> Front-end projects</label><br>
      <label><input name="improvements" type="checkbox" value="back-end-projects"> Back-end projects</label><br>
      <label><input name="improvements" type="checkbox" value="data-visualization"> Data visualization</label><br>
      <label><input name="improvements" type="checkbox" value="challenges"> Challenges</label><br>
      <label><input name="improvements" type="checkbox" value="open-source-community"> Open-source community</label><br>
      <label for="comments">Any comments or suggestions?</label><br>
      <textarea id="comments" name="comments" rows="4" cols="39" placeholder="Please write any comments or suggestions here"></textarea><br>
      <button>Submit</button>
    </fieldset>
  </form>
  <iframe name="response"></iframe>
</body>

</html>

Fatemeh satouri · Accepted Answer · 2024-12-13 00:23:53Z

Hello and thank you for your hard work.

First, I want to talk about the input element: The input element is a self-closing element, meaning you cannot write it as: <input></input>. If you inspect it, you'll notice that the text you placed between it is displayed as text in the root. That is, a floating element in the HTML. Which is structurally incorrect. You can read about DOM and DOM tree.

The second point that I found very interesting was the excessive use of margin. Using unnecessary margins and paddings might later annoy you when making your design responsive and force you to write a lot of extra code. We could have used display: flex; to display the inputs and labels in a single row. It helps us arrange the elements in a row and column layout, adjust the spacing, and do it professionally.

The second point is the structure of your code: You can use div and section optimally to have clean sections, more readable code, and avoid responsive issues.

And finally, I want to address this structure that was not followed:

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documento</title>
</head>
<body>
            
</body>
</html>

HTML is a markup language, and it's natural for it to ignore these minor issues and display the output. However, we must adhere to the main structure.

And in the end, I created them by packing the inputs and using a class. I placed the texts in the label and used the "for" attribute to connect them to the desired input.

body {
    background-color: rgb(200, 200, 200)
  }
  
  h1 {
    font-size: 20px;
  }
  
  #title {
    font-family: sans-serif;
    text-align: center;
    font-size: 25px;
  }
  
  #description {
    font-family: sans-serif;
    font-size: 16px;
    display: block;
  }
  
  label {
    font-family: sans-serif;
    font-size: 14px;
    display: block;
    text-align: center;
  }
  
  radio {
    display: inline;
  }
  
  input {
    font-family: sans-serif;
    font-size: 14px;
    display: block;
  }
  
  button {
    margin-left: 50%;
    margin-right: 50%;
    display: block;
    font-size: 25px;
  }
  
/* div styles */
  .radioInputs{
    /* center div */
    margin: 0 auto; 
    width: 50%;
    /* change display */
    display: flex;
    justify-content: space-between;
    padding: 1%;
  }

<!DOCTYPE html>
<html lang="en">



<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <fieldset>
        <form id="survey-form" action="submit_form.php" method="post">
            <label id="name-label" for="name">Name:</label>
            <input type="text" id="name" name="name" placeholder="Jane Doe" required>
            <label id="email-label" for="email">Email:</label>
            <input type="email" id="email" name="email" placeholder="[email protected]" required>
            <label id="number-label" for="age">Age (optional)</label>
            <input type="number" min="13" max="120" id="number" name="age" placeholder="23">
            <label for="role">What option best describes your current role?</label>
            <select id="dropdown" required>
                <option id="">Please select one</label>
                <option id="student">Student</option>
                <option id="FTJ">Full Time Job</option>
                <option id="FTL">Full Time Learner</option>
                <option id="Prefer-not">Prefer Not To Say</option>
                <option id="Other">Other</option>
            </select>
            <label>Would you recommend freeCodeCamp to a friend?</label>

            <!-- radio box -->
            <div class="radioInputs">
                <label for="definitely">Definitely</label>
                <input type="radio" id="recommend" name="recommend" value="definitely" checked>
            </div>
            <div class="radioInputs">
                <label for="maybe">Maybe</label>
                <input type="radio" id="recommend" name="recommend" value="maybe">
            </div>
            <div class="radioInputs">
                <label for="not-sure">Not sure</label>
                <input type="radio" id="recommend" name="recommend" value="not-sure">
            </div>

            <!--  -->
           
            <label id="feature">What is your favorite feature of freeCodeCamp?</label>
            <select id="feature" required>
                <option id="">Please select one</option>
                <option id="challenges">Challenges</option>
                <option id="projects">Projects</option>
                <option id="community">Community</option>
                <option id="open-source">Open source</option>
            </select>
            <label for="improvements">What would you like to see improved? (Check all that apply)</label>
            <input for="improvements" type="checkbox" name="improvements" value="front-end-projects">Front-end
            projects</input>
            <input for="improvements" type="checkbox" name="improvements" value="back-end-projects">Back-end
            projects</input>
            <input for="improvements" type="checkbox" name="improvements" value="data-visualization">Data
            visualization</input>
            <input for="improvements" type="checkbox" name="improvements" value="challenges">Challenges</input>
            <input for="improvements" type="checkbox" name="improvements" value="open-source-community">Open-source
            community</input>
            <label for="comments">Any comments or suggestions?</label>
            <textarea id="comments" name="comments" rows="4" cols="50"
                placeholder="Please write any comments or suggestions here"></textarea>
            <button id="submit" type="submit">Submit</button>
    </fieldset>
</body>

</html>

I hope you succeed and shine on this path.

Collectives™ on Stack Overflow

Trouble adjusting text size associated with a radio button--CSS

2 Answers 2

Discrepancies

Basic HTML Page

Example

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Discrepancies

Basic HTML Page

Example

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related