Can I style an image's ALT text with CSS?

Setting the img tag color works

img {color:#fff}

http://jsfiddle.net/YEkAt/

body {background:#000022}
img {color:#fff}
<img src="http://badsrc.com/blah" alt="BLAH BLAH BLAH" />


Sure you can!

http://jsfiddle.net/VfTGW/

I do this as a fallback for header logo images, I think some versions of IE will not abide. Edit: Or Chrome apparently - I don't even see alt text in the demo(?). Firefox works well however.

img {
  color: green;
  font: 40px Impact;
}
<img src="404" alt="Alt Text">


You cant style the alt attribute directly in css. However the alt will inherit the styles of the item the alt is on or what is inherited by its parent:

    <div style="background-color:black; height: 50px; width: 50px; color:white;">
    <img src="ouch" alt="here i am"/>
    <div>

In the above example, the alt text will be black. However with the color:white the alt text is white.

Tags:

Html

Css