Tell us what’s happening:
Describe your issue in detail here.
Hi all, Ok, so i’ve done a lot of googling and research but haven’t been able to fix my problems. I’ve finished my code but haven’t been able to style it. You can see a couple of my example tries using both #id and .class which i defined in my
element that i gave to each section. How come my styling is not working? i’m trying not to copy some sample codes i found online that show the styling on the html doc and not in CSS. Can someone provide some guidance and also a critique of my code? at this point im not really looking to be certified, more i just want to learn and understand. From my reading it seems divs are a great way to style sections when you give eacha a class but is that good practice. Anyhow, i would love any and all feed back.
thanks Your code so far
<!-- file: index.html -->
<title> B. Onda Surf Survey</title>
<link rel="stylesheet" href="styles.css">
<h1 id="title"> FreeCodeCamp Survey</h1>
<p id="description"> Thanks for taking the time to help us improve!</p>
<label for="name" id="name-label"> Name <input id="name" type="text" required placeholder="Enter Your Name">
<label for="email" id="email-label"> Email <input id="email" type="email" required placeholder="Enter Your Email">
<label for="number" id="number-label"> Number <input id="number" type="number" required min="11" max="20" placeholder="Enter Your Number">
<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="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>
<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>
<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 value="open-source">Open Source</option>
<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>
<label for="comments">Any Comments or Suggestions?</label><textarea id="comments" name="comments" placeholder="Enter your comments here"></textarea>
<button type="submit" id="submit"> Submit</button>
Thanks for the quick response! Ok, so i did add the color and it worked:) also, an outline to my title and that showed up. I’ll probably have to go back over my CSS a bit to get things looking better. Is there a reason i don’t see the display: block show up? If i’m correct inline is the default and block needs to be styled? Also, as far as divs go, is the way i have them in my code OK practice?
A button is an inline block, you’re right. However the the div just before it is a block level element so the div takes up the entire line. However if you put the button inside the div the button will sit as it is expected - inline. It’s better if you see this visually.
So go ahead and put a button inside a div and then a button outside a div and you’ll see the difference.
Extra step: when the button is inside the div give the button the property display: block and see what happens.
The structure is fine. I can see you’re using the correct html tags. Don’t forget, divs are meaningless, they’re simply for styling purposes and grouping elements etc… any meaningful text should go inside the correct tag for accessibility and SEO reasons.
Good morning Ibrahim,
Thanks for the help, truly. So, i tried your recommendation putting the button “submit” inside and outside of divs with the display:block and unfortunately i didn’t see any differnance It actually seems like the .class i define in my divs dont seem to have any effect but if i style each input individually then it works. I thought if i surrounded a group of labels in a div and gave that a .class it would style all the labels there within. This is my CSS so far
it seems do the same or more or less the same as all the other code above.
Actually, it has the effect i am looking for on most of the form except that it puts both my radio and checkbox labels with their inputs above the labels instead of inline. Although it does give them their own line instead of being all on the same line(if that makes any sense:/
Once again, i really appreciate the help. I know i have a ton to learn! Being able to ask specific questions is invaluable for me.
Regarding applying styles to a wrapping divs you need to understand that not all css properties get passed down to its children e.g. on a div if you add padding: 10px the property will only be applied to the div NOT to every child inside the div.
However if you have this setup:
and add color: red to the div then the <p> will inherit the color from the div.
I think you may need to revise some CSS rules. Keep practising. Also the more you progress and build things the more you’ll understand how things work. Keep going!
Wow. thanks for getting back and taking the time to make the example page. it actually helped clear some things up. Yeah, im sure things will get more clear the further along i get. Ill keep plugging away! Thanks again for your help and hope you have a great start to the new year.