"Alt" is an accessibility attribute for text only browsers. If it shows before the image, then your image is too large or the server speed connection is too low for you.

The alt text will only be the same color as your links depending on the colors you have set for links and text. That is all part of the CSS styling you are using. If you have not told the browsers what colors you want, then they default back to what the developers have set for the browser when parsing your page.

Thanks, I am aware of all of that. I know how to optimise images and CSS. It was just something I noticed when the connection went really slow, that my alt text stands out as bright pink because that's my link colour.

I was just wondering if there is a CSS property that will do this, as there are other properties (such as outline) which seem to control similar aspects of page elements.

You can either put the images with alt text inside an element with a class or id -

eg

<div class="img"> <img alt="blah"> </div>

then CSS like

.img { color:#ccc; font-weight:normal }

or (I think more elegantly) you can use an attribute selector:

img[alt] {
font-weight:bold;
font-size:2em;
}

Remember if you use styles that effect things other than just text, it will apply to the image too.

Thanks milosevic, you opened up my thinking.

Looking at my page, I can now see that what happens is the image alt text takes the colour of whichever styles it has inherited. However, it was just a coincidence that I had a link around one of my images, so the alt text took the colour of links.

Therefore, the alt text colour can be changed as you say, like any other element. In that case, there is not necessarily the need for your div/class wrapper. The alt text colour can simply be changed like this:

img {color:#F00;}