how do you change two h3 elements to two different background colors. one h3 is declared as <h3> and the other is <h3 id='id1'>.
whenever I do h3{background-color:red;}
it also changes the background color for h3 id.
Do both of the <h3>s have ids? If so, just use the id for styling:
#id1 { ... }
#id2 { ... }
If only one of them has an id then style the generic one first and then override the style using the id for the other one:
h3 { ... }
#id1 { ... }
Also, you might want to read up more on how the CSS cascade works.
only one of them has style and the generic one overrides the id class
only one of them has style and the generic one overrides the id class
An element selector can not overwrite styles set using an id selector (specificity rules).
Did you actually use the id selector to set some styles on the element? Also, only the styles you set using the id selector will not be overwritten, any other styles set on the element selector will still affect all elements of that type, no matter if they have an id or not.
I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.
You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.
See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).
If you have a generic styling on h3 and then you style one of them using the id, the one with the id will automatically override the generic styling because of the way the cascade works.