I want to use the same id in some tags that will be repeated many times on the page, this to edit the code without having to write so many css lines.
I want to know if it will give me errors or is it better to write css in the html tags.
caja que se repetirá <div id='caja'>--contenido--</div><style>#caja{background="#ff0000;"}</style>
or if it will give errors programming like this
<a style="background: #ff0000; color: #fff; padding: 10px;">hola</a>
The idea is that
id
it is unique at the page level, if multiple elements shareid
the HTML it is not valid per specification. On the other hand, browsers are usually quite tolerant of HTML errors and ignoreid
repeated ones.If you want to do it to share the CSS then the correct way is to assign a same
class
to the elements:And in the CSS:
Notice that it changed
#
to.
, with this you select byclass
instead ofid
The specification is very clear and forceful with respect to
id
:Although there are no visible errors in the document, there are at the level of validation or operation of the code. We can talk about implicit errors in that sense.
Therefore:
<a style="background: #ff0000; color: #fff; padding: 10px;">hola</a>
It's a bad practice . Why? For many reasons. Imagine an app with hundreds or thousands of pages with styles applied directly to the elements. And suddenly the owner of the page or application wants to change the colors, put some more in line with the fall or summer season. I already see you digging through the hundreds or thousands of pages to change to the new color. As some have commented, it's much better to use classes and apply the styles on the classes. That way, if something needs to be changed, you change it in one place, not in a thousand places.example of bad practice
Suppose you have this and one day the boss tells you that the backgrounds look prettier in blue... OMG, what are you going to do now to change, you who had thought that red was eternal?
Example of good practice
Suppose you have this and one fine day the boss tells you that the backgrounds look prettier in blue and that he wants the bigger font... And that you will receive a juicy incentive if you do it before noon :)
Let's go for the incentive, it's 11:58!
CONCLUSION
id
always uniqueclass
when requiredThe answer is YES , yes you can, since the css will look for all the tags with the same
id
to apply the css, although this option is not recommended at all , it is a bad idea and a bad practice, in addition to the fact that you will have several problems when using said go injavascript
.If you need to change several tags at the same time, you should use the property
class
, which is more common and good practice, and saves you a lot of work when working with javascript.I leave you an example so you can see the functionality of both properties.
Yes, but it is not recommended due to the confusion that can occur when working with CSS or JS and trying to take the element by
id
, if you think you are going to need 2 or moreid
then you should look for another valid selector such as the recommendedclass
what in CSS and JS is found as.
instead of#
as theid
.