CSS specifity

[webaster]

img.Visible {visibility:visible;}

<img src="someImage.gif" alt="" width="100" height="100" style="visibility:hidden;" class="Visible">

WIll the image be visible: due to the style is applied first and then the class?

[Span]

No, the image will not be visible. Inline style will override embedded style (in the head of the page) and style in an external stylesheet.

External CSS > Embedded style > Inline style > Element

The declaration that is the closest to the element will override declarations that are higher up in the cascade.

[webaster]

Except in this case:
When detected Safari, someElement.style.visibility ="hidden" is used, see in img there is no style but DOES change the style. Tested this and works. This works I think because style as you said is higher in specifity.

.makeVisible {visibility:visible;}
.makeHidden {visibility:hidden;}

var someElement = document.getElementbyId('someImage');'

if (/safari/i.test(navigator.userAgent)) {
// is safari
someElement.style.visibility = "hidden";
} // other than safari
someElement.className = "makeHidden";

<img id="someImage" class="makeVisible" alt="" width="100" height="100>"

[webaster]

Error --> correction

<img id="someImage" class="makeVisible" alt="" width="100" height="100">

[webaster]

var someElement = document.getElementbyId('someImage');