CSS Styling Images

CSS (Cascading Style Sheets) can be used to style images in various ways on a webpage. Here are some common techniques for styling images using CSS:

Resizing Images

You can set the width and height of an image using CSS to control its size on the webpage. This can be done using the width and height properties.

Example

img {
  width: 300px;
  height: auto; /* To maintain aspect ratio */
}
<img src="house.jpg" alt="house">

You can click on above box to edit the code and run again.

Output

Adding Borders

You can add borders around images using the border property in CSS.

Example

img {
  width: 300px;
  height: auto;
  border: 1px solid red;
}
<img src="house.jpg" alt="house">

Output

Border Radius

You can round the corners of an image using the border-radius property.

Example

img {
  width: 300px;
  height: auto;
  border-radius: 10px;
}
<img src="house.jpg" alt="house">

Output

Adding Shadows

You can add shadows to images using the box-shadow property.

Example

img {
  width: 300px;
  height: auto;
  box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.8);
}
<img src="house.jpg" alt="house">

Output

Positioning

You can position images using CSS properties like float, position, or display

Example

img {
  width: 300px;
  height: auto;
  float: right; 
}
<img src="house.jpg" alt="house">

Output

Centering

You can center images horizontally using margin: auto; along with a defined width.

Example

img {
  width: 300px;
  height: auto;
  display: block;
  margin: auto;
}
<img src="house.jpg" alt="house">

Output

Grayscale or Sepia Effect

You can apply grayscale or sepia effects to images using CSS filters.

Example

img {
  width: 300px;
  height: auto;
  filter: grayscale(100%);
}
<img src="house.jpg" alt="house">

Output

Example

img {
  width: 300px;
  height: auto;
  filter: sepia(100%);
}
<img src="house.jpg" alt="house">

Output

Opacity

You can control the opacity of images using the opacity property.

Example

img {
  width: 300px;
  height: auto;
  opacity: 0.5;
}
<img src="house.jpg" alt="house">

You can click on above box to edit the code and run again.

Output

These are just some examples of how CSS can be used to style images on a webpage. The possibilities are vast, and CSS provides a flexible way to customize the appearance of images to fit the design requirements of your website.