CSS image class not working

Howdy,

I am interested in using a CSS class to create a border around images on my
website. I checked online and found the following:

img {
border: 5px #FFFFFF;
}

I inserted this class into my image tag as follows:

<img src="..." class="img">

It showed up just in DreamWeaver, but when previewed in a web browser (either
FF or IE), there was no change.

Any suggestions welcome!

Thank you!

Add solid, dotted or some other border type to your rule like so.

img {
border: 5px solid #FFFFFF;
}

No need to assign a class to your img because this rule will be applied to
all img in your site.

If you need to define a unique image class so that some images will be
borderless, use this in your CSS:

..imgBorder {border: 5px solid #FFF;}

and this in your HTML:

<img src="some-image.jpg" class="imgBorder">

Make sense?


--
Nancy O.
Alt-Web Design & Publishing
www.alt-web.com
www.twitter.com/altweb
www.alt-web.blogspot.com/

rob-ought wrote:

Howdy,

I am interested in using a CSS class to create a border around images on my
website. I checked online and found the following:

img {
border: 5px #FFFFFF;
}

Don't use tag names as CSS class names, you're only inviting trouble. This CSS selector says to apply a border to img tags. If you really want to use a CSS class names img, then it may need to look like (note the dot at the beginning):
..img {
border: 5px #FFFFFF;
}

Haven't done any testing in any browser, so it may or may not work, but, you shoudl move away from using a tag name for a CSS class anyway, just in case.


--
Danilo Celic

http://blog.extensioneering.com/
WebAssist Extensioneer
Adobe Community Expert

..oO(danilocelic AdobeCommunityExpert)

rob-ought wrote:
Howdy,

I am interested in using a CSS class to create a border around images on my
website. I checked online and found the following:

img {
border: 5px #FFFFFF;
}

Don't use tag names as CSS class names, you're only inviting trouble.

Please elaborate. I use element selectors all the time where necessary.
Either standalone or as part of descendant selectors they help to keep
the HTML clean and free from too many classes/IDs.

And BTW - a tag name is _not_ a class. Completely different thing.

This CSS selector says to apply a border to img tags. If you really want
to use a CSS class names img, then it may need to look like (note the
dot at the beginning):
.img {
border: 5px #FFFFFF;
}

If he wants to apply a style to all images on a page, then it doesn't
make any sense to apply a class to all of them, since it would only
bloat the HTML for nothing. An element selector is the right tool in
this case.

Micha

Michael Fesser wrote:

Don't use tag names as CSS class names, you're only inviting trouble.

Please elaborate. I use element selectors all the time where necessary.
Either standalone or as part of descendant selectors they help to keep
the HTML clean and free from too many classes/IDs.

And BTW - a tag name is _not_ a class. Completely different thing.

I think that you missed something in the original post. Here is their code snippet:
<img src="..." class="img">

Note img as the class value of the img tag. There appears to be some confusion on the OP's part about how to define the CSS properly, as in, they supplied an element selector, but were specifically asking about a class selector. I provided a class selector using their supplied class name, however I was pointing out that they probably shouldn't be using a tag name as a class name, as that can minimally lead to confusion as to what the styles are supposed to be applied to.

--
Danilo Celic

http://blog.extensioneering.com/
WebAssist Extensioneer
Adobe Community Expert

..oO(danilocelic AdobeCommunityExpert)

[...] however I was pointing out that they probably shouldn't be using a
tag name as a class name, as that can minimally lead to confusion as to
what the styles are supposed to be applied to.

Ah, OK, makes more sense now.

Micha