Welcome to WebmasterWorld Guest from 54.198.229.157

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)

New User

5+ Year Member

joined:Feb 19, 2009
posts: 1
votes: 0


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)

Full Member

5+ Year Member

joined:Mar 22, 2008
posts: 317
votes: 0


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)

New User

5+ Year Member

joined:Feb 9, 2009
posts:16
votes: 0


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)

Senior Member

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

joined:Nov 28, 2004
posts:7999
votes: 0


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.