How can I use CSS to style multiple images differently?

Question

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?

Figone

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. – Slavey

@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. – Figone

Answer 1

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;
}

Ascidium

Answer 2

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">

Microscopy

Answer 3

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;
}

Marv

How do I group them in the html tag? I know how to put one class like this: <img src="ABCD.png" alt="Raoul Hausmann's ABCD" class="leftPicture"> I don't know how to incorporate the ".Picture" class in the html. – Figone

You can use only .leftPicture, I included .picture as an example for normal images that does not require aligning. HTML ..class="leftPicture".. I did the grouping in CSS. You can do it in HTML (remove the references to leftPicture & rightPicture next to .picture and then assign two classes in CSS ..class="image leftPicture".. to the same affect. – Marv

Answer 4

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

Mejias

Answer 5

   var modal = document.getElementById('myModal');
   var img = document.getElementById('myImg');
   var modalImg = document.getElementById('modal-image');

   window.openModal = function(img) {
   modal.style.display = "block";
   modalImg.src = img.getAttribute("data-highres");
   }

   

   var span = document.getElementsByClassName("close")[0];

   span.onclick = function() {
   modal.style.display = "none";
   }

   window.onclick = function() {
   if(event.target == modal) {
        modal.style.display = "none";
      }
   }

#myImg {
    cursor: zoom-in;
    transition: 0.3s;
  }

  #myImg:hover {
    opacity: 0.7;
  }

  .modal {
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 60px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.8);
  }

  .modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
  }

  .close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 50px;
    font-weight: bold;
    transition: 0.3s;
  }

  .close:hover,
  .close:focus {
    color: #bbbbbb;
    text-decoration: none;
    cursor: pointer;
  }

<img onclick="openModal(this);" src="https://unsplash.com/photos/LqKAyU-o6M4" data-highres="https://unsplash.com/photos/LqKAyU-o6M4">


<!-- Modal -->
<div id="myModal" class="modal">
   <!-- Close button -->
   <span class="close">&times;</span>
   <!-- Modal content -->
   <img class="modal-content" id="modal-image">
</div>

Penta