Do form "Id" attributes have different meaning than "Id" attributes used to assign CSS style to elements?

HTML-CSS
1

I’m in the first course (HTML + CSS), and I’m getting a little confused when it comes to IDs. I was under the impression that they were only used to assign specific CSS style to single elements (similar to a class), but now am noticing that form elements (i.e. radio buttons, checkboxes) must contain an ID attribute. If I understand correctly, these have a different purpose than ID attributes that we use to set CSS, is that correct? As I tired to set CSS using the form IDs, and nothing happened. Thanks in advance!

2

Hello @Mich_L5,

To explain quickly and easily, IDs are made to identify one element. Let’s say you use the ID content-wrap for a <div> tag, you cannot use the same ID name for another tag. In CSS, it is not that you create a new ID, you are just using the identifier of a tag in your HTML code to make its style. In CSS, it works exactly the same that if you were using the selectors directly except that you create a style for one element in your HTML.

This is the opposite from classes, which are made to be used many times. I don’t know if it is clearer for you.

1 Like
3

Hi @LucLH - thank you for your response!

Ok yes, this does help to clarify. I’m just still a little bit confused - I’ll share an example to better explain. In my code here (https://codepen.io/mich_l5/pen/gOXWbxM), inside the HTML code box, line 45, I have an ID of “yes” for one of my radio buttons. I’ve added the “#yes” inside the CSS box and gave it a text color of blue, however it does not change the color of the text “Yes”. Hopefully this explains where I’m confused. I appreciate any input you have :slight_smile:

4

Ok, I see. The thing is that you apply a CSS style for the <input>. In fact you are giving the color blue to the little circle at the left of the text. What you want to change is the color of the <label> text, so what should you do? :slight_smile:

5

Ahhh I see! Thank you so much for explaining the distinction between the two, that clarified it! Added an ID to the label section as you mentioned, and works perfectly now :slight_smile: Thanks again! Much appreciate the help! @LucLH

6

You’re really welcome @Mich_L5, glad you arrived to figured it out. Good luck in your learning travel and don’t hesitate to ask the community for help when you need. :slight_smile:

7

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.