5

I have the following tag

<img src="http://img705.imageshack.us/img705/119/original120x75.png"style="height:100px;" 
style="width:100px;" alt="25"/>

I have put two incline CSS commands in

style="width:100px;"
style="height:100px;"

For some reason the picture has 100px height but no width. I assume this is because you can't write two of these in a row in the same tag. If this is true, is there a way to assign both the height and width? I have already assigned a different image size on my external CSS, and I don't think you can add img properties in the div tag properties on the external CSS. thanks

alexg
  • 3,015
  • 3
  • 23
  • 36
user2095044
  • 223
  • 3
  • 6
  • 12

4 Answers4

11

You don't need 2 style attributes - just use one:

<img src="http://img705.imageshack.us/img705/119/original120x75.png" 
                                     style="height:100px;width:100px;" alt="25"/>

Consider, however, using a CSS class instead:

CSS:

.100pxSquare
{
  width: 100px;
  height: 100px;
}

HTML:

<img src="http://img705.imageshack.us/img705/119/original120x75.png" 
                                          class="100pxSquare" alt="25"/>
Oded
  • 489,969
  • 99
  • 883
  • 1,009
3

Do not use more than one style attribute. Just seperate styles in the style attribute with ; It is a block of inline CSS, so think of this as you would do CSS in a separate stylesheet.

So in this case its: style="height:100px;width:100px;"

You can use this for any CSS style, so if you wanted to change the colour of the text to white: style="height:100px;width:100px;color:#ffffff" and so on.

However, it is worth using inline CSS sparingly, as it can make code less manageable in future. Using an external stylesheet may be a better option for this. It depends really on your requirements. Inline CSS does make for quicker coding.

Malcolm Murray
  • 323
  • 2
  • 10
3

You should use : 

<img src="http://img705.imageshack.us/img705/119/original120x75.png" style="height:100px;width:100px;" alt="25"/>

That should work!!

If you want to create class then :

.size {
width:100px;
height:100px;
}

and then apply it like :

<img src="http://img705.imageshack.us/img705/119/original120x75.png" class="size" alt="25"/>

by creating a class you can use it at multiple places.

If you want to use only at one place then use inline CSS. Also Inline CSS overrides other CSS.

Sanober Malik
  • 2,765
  • 23
  • 30
1

if use Inline CSS you use

<img src="http://img705.imageshack.us/img705/119/original120x75.png" style="height:100px;width:100px;" alt="705"/>

Otherwise you can use class properties which related with a separate css file (styling your website) as like In CSS File

.imgSize {height:100px;width:100px;}

In HTML File

<img src="http://img705.imageshack.us/img705/119/original120x75.png" style="height:100px;width:100px;" alt="705"/>
Md. Amran Hossan
  • 11
  • 1