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

Question

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.

as this question is the first result at search engines

There are a problem with the selected -and right by the way- solution, is that if you want to add style that will apply to images like ( borders for example ) .

for example :

img {
  color:#fff;
  border: 1px solid black;
  padding: 5px;
  background-color: #ccc;
}

<img src="http://badsrc.com/blah" alt="BLAH BLAH BLAH" /> <hr />
<img src="https://cdn4.iconfinder.com/data/icons/miu-square-flat-social/60/stackoverflow-square-social-media-128.png" alt="BLAH BLAH BLAH" />

as you can see, all of images will apply the same style

---

there is another approach to easily work around such an issue, using onerror and injecting some special class to deal with the interrupted images :

.invalidImageSrc {
  color:#fff;
  border: 1px solid black;
  padding: 5px;
  background-color: #ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<img onerror="$(this).addClass('invalidImageSrc')" src="http://badsrc.com/blah" alt="BLAH BLAH BLAH" /> <hr />
<img onerror="$(this).addClass('invalidImageSrc')" src="https://cdn4.iconfinder.com/data/icons/miu-square-flat-social/60/stackoverflow-square-social-media-128.png" alt="BLAH BLAH BLAH" />

In Firefox and Chrome (and possibly more) we can insert the string ‘( .... )’ into the alt text of an image that hasn’t loaded.

img {
  font-style: italic;
  color: #c00;
}

img:after {
  content: " (Image - Right click to reload if not loaded)";
}

img::after {
  content: " (Image - Right click to reload if not loaded)";
}

<img alt="Alt text - " />