How can I use CSS to style multiple images differently

Question

In essence, I'm styling a lengthy essay with a variety of photographs thrown in. The first image should "float: left," while the second image should "float: right." I am confident that I can style the pictures as follows:

img {
float: left;
}

As a result, each photograph has the same aesthetic. How may each image be styled differently? I attempted to style each image individually by placing it in a new div class, but it didn't work.

I also realise that I could design each image using the following html tag:

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

I keep hearing that keeping style in an external style sheet (CSS) and keeping html separate is ideal. Is inline styling required in this situation?

Answer 1

You can do that in HTML (delete the references to leftPicture and rightPicture adjacent to. picture and then provide two CSS classes to the same effect.. class="image leftPicture"..