CODEWITHSUNDEEP
htmlcss
Snarfy
Snarfy

Reputation: 31

My divs with class aren't working to style my doc. But input and labels are. What am i missing?

HTML :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title> FreeCodeCamp Survey</title>
    <link rel="stylesheet" href="styles.css">
  </head>  
  <body>
    <h1 id="title"> FreeCodeCamp Survey</h1>
    <p id="description"> Thanks for taking the time to help us improve!</p> 
  <form id="survey-form">
    <div class="details">
      <label for="name" id="name-label"> Name <input id="name" type="text" required placeholder="Enter Your Name">
      </label>
      <label for="email" id="email-label"> Email <input id="email" type="email" required placeholder="Enter Your Email">
      </label>
      <label for="number" id="number-label"> Number <input id="number" type="number" required min="11" max="20" placeholder="Enter Your Number">
      </label>
      <label for="current-role" id="current-role-label">Which option best describes your current role?<br>
        <select id="dropdown" name="dropdown">
          <option value="current-role">(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>
        </select>
      </label>
    </div>  
    <div class="recommend">  
      <label>Would you Recommend FCC.com to a friend?</label> 
      <label for="definitely"><input id="definitely" name="definitely" value="definitely" type="radio"> Definitely</label>
      <label for="maybe"><input id="maybe" type="radio" value="maybe" name="definitely"> Maybe</label>
      <label><input id="not-sure" type="radio" value="not-sure" name="definitely"> Not Sure</label>
    </div>
    <div class="features">
      <label for="favorite-feature" id="favorite-feature-label">What is your favorite feature of freeCodeCamp? (select an option/s)</label>
        <select id="dropdown" name="dropdown">
          <option value="favorite-feature">(Select Favorite Feature)
          </option>
          <option value="challenges">Challenges</options>
          <option value="projects">Projects</options>
          <option value="community">Community</options>
          <option value="open-source">Open Source</option>
        </select>
    </div>     
    <div class="improvements">
      <label>What would you like to see improved? (check all that apply)</label>
      <label for="front-end"><input type="checkbox" value="front-end" name="front-end" id="front-end">Front-end Projects</label>
      <label for="back-end"><input type="checkbox" value="back-end" name="back-end" id="back-end">Back-end Projects</label>
      <label><input type="checkbox" value="challenges" name="challenges" id="challenges">Challenges</label>
    </div>  
    <div class="comment">
      <label for="comments">Any Comments or Suggestions?</label>
      <textarea id="comments" name="comments" placeholder="Enter your comments here"></textarea>
    </div>
    <div>  
    <button type="submit" id="submit"> Submit</button>
    </div>
  </form> 
  </body>
</html>

I have tried styling using .features for example which is a class that I gave to my div but it doesn't seem to do anything. However if I use

label, input{ display:block;}

It seems to do the trick! I'm not sure if this makes sense. Anyhow, any help or guidance would be much appreciated. I'm having so much fun learning all this new stuff!

Upvotes: 3

Views: 35

Answers (1)

Sabbir Alam Pran
Sabbir Alam Pran

Reputation: 181

your class .features class is working. The option tags closing was wrong. Had an extra s in the end mentioned by @Nasser in the comment. Run the code below and you will get border which I have given through features class.

I think you should check stylesheets name 'styles.css' whether it's same with the css file name.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title> FreeCodeCamp Survey</title>
    <style>
      label, input{ display:block;}
      .features{
        border: 2px solid #fcba03;
      }
    </style>
  </head>  
  <body>
    <h1 id="title"> FreeCodeCamp Survey</h1>
    <p id="description"> Thanks for taking the time to help us improve!</p> 
  <form id="survey-form">
    <div class="details">
      <label for="name" id="name-label"> Name <input id="name" type="text" required placeholder="Enter Your Name">
      </label>
      <label for="email" id="email-label"> Email <input id="email" type="email" required placeholder="Enter Your Email">
      </label>
      <label for="number" id="number-label"> Number <input id="number" type="number" required min="11" max="20" placeholder="Enter Your Number">
      </label>
      <label for="current-role" id="current-role-label">Which option best describes your current role?<br>
        <select id="dropdown" name="dropdown">
          <option value="current-role">(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>
        </select>
      </label>
    </div>  
    <div class="recommend">  
      <label>Would you Recommend FCC.com to a friend?</label> 
      <label for="definitely"><input id="definitely" name="definitely" value="definitely" type="radio"> Definitely</label>
      <label for="maybe"><input id="maybe" type="radio" value="maybe" name="definitely"> Maybe</label>
      <label><input id="not-sure" type="radio" value="not-sure" name="definitely"> Not Sure</label>
    </div>
    <div class="features">
      <label for="favorite-feature" id="favorite-feature-label">What is your favorite feature of freeCodeCamp? (select an option/s)</label>
        <select id="dropdown" name="dropdown">
          <option value="favorite-feature">(Select Favorite Feature)
          </option>
          <option value="challenges">Challenges</option>
          <option value="projects">Projects</option>
          <option value="community">Community</option>
          <option value="open-source">Open Source</option>
        </select>
    </div>     
    <div class="improvements">
      <label>What would you like to see improved? (check all that apply)</label>
      <label for="front-end"><input type="checkbox" value="front-end" name="front-end" id="front-end">Front-end Projects</label>
      <label for="back-end"><input type="checkbox" value="back-end" name="back-end" id="back-end">Back-end Projects</label>
      <label><input type="checkbox" value="challenges" name="challenges" id="challenges">Challenges</label>
    </div>  
    <div class="comment">
      <label for="comments">Any Comments or Suggestions?</label>
      <textarea id="comments" name="comments" placeholder="Enter your comments here"></textarea>
    </div>
    <div>  
    <button type="submit" id="submit"> Submit</button>
    </div>
  </form> 
  </body>
</html>

Upvotes: 1

Related Questions