How can I use CSS to style multiple images differently?

8
votes

I am basically styling a long essay with various images scattered throughout. I would like the first image to "float: left" and the second one to "float: right". I know that I can style the images like this:

img {
float: left;
}

This makes each image have the same style. How do I style each image differently? I tried to put each image in a different div class, so that I could style them differently, but it didn't work.

I also understand, that I could style each image in the html tag, like this:

<img src="ABCD.png" alt="Raoul Hausmann's ABCD" align="left" height="300px">

I keep hearing that it is best to keep style in the external style sheet (CSS), separate from the html. Is this a case where inline styling is necessary?

4
htmlcssimagecss-floatinline-styles
Seems like you were on the right track--what "didn't work" about putting classes on the divs containing the images? Can you show us what you did and what happened? BTW, specifying height using the height attribute on the img tag is no longer the preferred way to do this; use the height CSS attribute instead. Same with align. - user663031
@torazaburo I was putting the "class=__" in the wrong place, but all the answers here cleared it up for me. Thanks for confirming the info about the height attribute in the html tag, I had a feeling it wasn't right. - cphil

4 Answers

8
votes

You can give each image a class or id that will help you to define different css for each image like

<img src="" class="image1">
<img src="" class="image2">

in css file you can define 

.image1
{
width:200px;
height:200px;
}
.image2
{
width:300px;
height:300px;
}
2
votes

Give your image a class and then you can style all images with that class like this:

.left {
  border: solid 5px red;
  float: left;
}

.right {
  border: solid 5px blue;
  float: right;
}
<img src="ABCD.png" class="left">
<img src="ABCD.png" class="right">
1
votes

Try this 

img{width: 200px;height:200px;background-color: antiquewhite}
.left{float:left}
.right{float:right}


    <img src="ABCD.png" alt="Raoul Hausmann's ABCD" class="left">
    <img src="ABCD.png" alt="Raoul Hausmann's ABCD" class="right">

this will float two images one in left and another in right

1
votes

All the above are fine, I would only suggest grouping the common settings of picture in this case so that the left/right classes only contains that what is different.

/* Group the common attributesso that you only need to set it once */
.picture, .leftPicture, .rightPicture {
    border: 2px dotted gray;
    width: 200px;
}

.leftPicture {
    float:left;
}

.rightPicture {
    float:right;
}