Welcome to WebmasterWorld Guest from 54.146.171.44

Forum Moderators: not2easy

Message Too Old, No Replies

CSS and images

Set css style to all images in web site.

   
10:51 am on Feb 19, 2009 (gmt 0)

5+ Year Member



Hi,
I have web site where i have been published more then 2000 images with border 1px without css style, in img tag, like this one:
<img height="311" border="1" width="485" alt="" src="/userfiles/image/%D0%90%D0%A4%D0%96%20Mostarke.jpg" />

I'd like to change style using css. Is there possibility to crate new style and automatic change images style without setting class="" in img tag on all images?

12:06 pm on Feb 19, 2009 (gmt 0)

5+ Year Member



dejan,

Welcome to WebmasterWorld! Since you have hard-coded attributes into your tags, these would automatically override all external CSS rules. Remember the order of CSS: external, internal, inline. Each one progressively overrides the higher one.

If you have 2000 images, it seems that you're in for a lot of work! But once you have a class established, changing it will be much easier.

2:45 pm on Feb 19, 2009 (gmt 0)

5+ Year Member



Are you able to do a site wide change?

You could easily change all images in Dreamweaver.

4:15 pm on Feb 19, 2009 (gmt 0)

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member



I'd like to change style using css. Is there possibility to crate new style and automatic change images style without setting class="" in img tag on all images?

Yes.

img { border: 1px solid #000000; padding: 4px; }

Creates and outset black border. Beware, this does affect all your images, but you can override them with class or ID selectors.

Be sure to use that alt tag. Don't leave it blank, it has a purpose. :-)

Since you have hard-coded attributes into your tags, these would automatically override all external CSS rules.

Not entirely true . . . try . . .

<img src="some-image.jpg" width="494" height="480">

img {
border: 1px solid #000000;
padding: 4px;
width: 300px;
height: 200px;
}

I'm getting an image distorted to 300 X 200 pixels.