CSS Images

Styling images using CSS worsk similarly to how the Box Model of borders, padding, and margins works.

There is a lot of fantastic stuff that you can do with these methods by being just a little creative with them.

 

Adding a border to an image

Adding a border on any image using CSS is pretty simple.

All you have to do is to add a border property to the tag in the stylesheet.

Here is an example of a simple border:

img {
border: 4px solid orange;
}

The challenge with the above is that you may not want every image to have a 4px solid orange border.

You could create a few different image classes if all of your images fit into a couple of different styles.

However if you want to style each image individually, using a CSS stylesheet may be a little cumbersome.

You can adjust styling at an image level, here is the code with inline styling used to display the image below, bold being the styling:

<img src=”/wp-content/uploads/Mykonos-1-300×200.jpg” alt=”Mykonos 4px border” width=”300″ height=”200″ class=”aligncenter size-medium wp-image-598″ style=”border: 4px solid orange”/>

Mykonos 4px border

Borders are usually added separately to an image from the rest of the content on the web page.

In this way, the image will pop out more and leave a good impact.

To make the image stand out more, padding can be added around it.

Padding makes an image look like a framed picture.

This is what you would use in your CSS to

img {
padding: 10px;
border: 5px solid orange;
}

Again, at an image level, the bold highlights the styling.

<img src=”/wp-content/uploads/Mykonos-1-300×200.jpg” alt=”Mykonos 5px border” width=”300″ height=”200″ class=”aligncenter size-medium wp-image-598″ style=”border: 5px solid orange; padding: 10px;”/>

Mykonos 5px border

You can enhance it many different ways, by adding a different border style, such as a ridge border, for example.

This would make the border look even more like a frame.

Different types of borders can be created by using different styles of padding, thickness levels, colors, etc.

 

CSS Image Placement and Text Wrapping

According to default settings, HTML images essentially create a rectangle around themselves when placed, not allowing any text to appear beside them, like this for example:

The result is not an ideal state for our page.

We can solve this issue with a little bit of CSS!

You can control the positioning of images and how the page’s text surrounds them.

With the CSS float property, we can not only position our images but assign them a value of either left or right:

img {
float: left;
}

Floating an image towards the left-hand side causes all the text surrounding the image to wrap around the right-hand side of the image.

The opposite happens if we float an image towards the right-hand side.

You can see that the two images float to the left and right hand sides of the text. To add some space between the text and the images you can use the padding property. This allows us to set out our page the way we like.
Without a doubt, it is completely natural for us to use the left-floated images and right-floated images other times. Our recommendation is to set up two classes of an image, setting one as right-floated and the other as left-floated:

img.left {
float: left;
}

img.right {
float: right;
}

After doing this, when adding an image into one of our HTML web pages, we only need to describe which image we want:
<img class=”left” src=”…” />

Or
<img class=”right” src=”…” />

Besides this, we can apply any other styling to these individual classes.

Alternatively, we can do it with the main <img> tag as well, which implements the styling our styling to both the left- and right-hand side classes.

To do it at an image level on your page, you can use this code in bold:

<img src=”https://beginnersguidetohtml.com/wp-content/uploads/Mykonos-2-300×200.jpg” alt=”” width=”300″ height=”200″ class=”alignnone size-medium wp-image-597″ style=”float: right; padding: 1px;”/>

 

CSS Image Alignment In Responsive Design

While the float left and float right properties work pretty well on desktop and large screens, on mobile there usually isn’t enough room for an image to float left or right and have text wrap around it, unless the image is tiny.

This is an advanced concept which we won’t get into at the moment but will create a separate tutorial for as time permits.

However, the easy solve that many designers and sites use is to not use float left and float right.

Instead they use a large image and center it.

On desktop it will look like this:

and on mobile, minimize your browser to about the size of the phone and see that most modern browsers will automatically scale it down.

Not 100% the best solution, but if you need a way to get it done, you can try this.