25

Consider the following HTML fragment with two style attributes:

<span style="color:blue" style="font-style:italic">Test</span>

In Opera 12.16 and Chrome 40, it shows up as blue non-italic text, while Internet Explorer 9 shows blue italic text. What, if anything, does the standard say is supposed to show up?

2 Answers 2

53

Separate your rules with a semi colon in a single declaration:

<span style="color:blue;font-style:italic">Test</span>

3
  • 6
    I know how I'm supposed to do it; what I want to know is what is supposed to happen if I don't (or in my specific case, what happens if an automated HTML generator messes up).
    – Mark
    Commented Mar 4, 2015 at 23:32
  • 1
    ah my bad, I misunderstood the question :)
    – Eeji
    Commented Mar 5, 2015 at 19:49
  • 15
    this might not answer the OP's question but I found it really useful to have on this same Q&A page
    – Davos
    Commented Jun 2, 2016 at 4:53
33

In HTML, SGML and XML, (1) attributes cannot be repeated, and should only be defined in an element once.

So your example:

<span style="color:blue" style="font-style:italic">Test</span>

is non-conformant to the HTML standard, and will result in undefined behaviour, which explains why different browsers are rendering it differently.


Since there is no defined way to interpret this, browsers can interpret it however they want and merge them, or ignore them as they wish.

(1): Every article I can find states that attributes are "key/value" pairs or "attribute-value" pairs, heavily implying the keys must be unique. The best source I can find states:

Attribute names (id and status in this example) are subject to the same restrictions as other names in XML; they need not be unique across the whole DTD, however, but only within the list of attributes for a given element. (Emphasis mine.)

2
  • How about add your style by id or class? When onload. @Skatox I want to add comment sorry about my mistake :(
    – lv0gun9
    Commented Mar 5, 2015 at 1:03
  • @lv0gun9 Thats irrelevant to the question at hand. The question wasn't about how to add a class, it was about how different browsers treat duplicate attributes.
    – user764357
    Commented Mar 5, 2015 at 1:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.