CSS Image Styling
What is CSS Image Styling?
CSS Image Styling is the process of changing the appearance of images using CSS. You can control an image’s width, height, border, border radius, shadow, opacity, alignment, and hover effects. Styling images makes websites more attractive, responsive, and professional.
Why Use CSS Image Styling?
CSS allows you to improve the appearance of images without editing the image itself. You can create responsive images, rounded corners, circular profile pictures, image galleries, hover effects, and modern card layouts using only CSS.
Basic Image Styling Syntax
<!DOCTYPE html>
<html>
<head>
<style>
img{
width:250px;
}
</style>
</head>
<body>
<img src="https://picsum.photos/250/180"
alt="Sample Image">
</body>
</html>Step 1: Resize an Image
Use the width and height properties to control the size of an image. For responsive images, set the width to 100% and the height to auto.
<!DOCTYPE html>
<html>
<head>
<style>
img{
width:300px;
height:200px;
}
</style>
</head>
<body>
<img src="https://picsum.photos/300/200"
alt="Landscape">
</body>
</html>Step 2: Add Borders and Rounded Corners
CSS lets you add borders, rounded corners, and shadows to make images more attractive.
<!DOCTYPE html>
<html>
<head>
<style>
img{
width:250px;
border:5px solid #007BFF;
border-radius:20px;
box-shadow:0 5px 12px rgba(0,0,0,.3);
}
</style>
</head>
<body>
<img src="https://picsum.photos/250/180"
alt="Nature">
</body>
</html>Common Image Styling Properties
The following example demonstrates some of the most commonly used CSS properties for styling images.
<!DOCTYPE html>
<html>
<head>
<style>
.circle{
width:150px;
border-radius:50%;
}
.shadow{
width:150px;
box-shadow:0 4px 10px gray;
}
.fade{
width:150px;
opacity:.6;
}
.fade:hover{
opacity:1;
}
</style>
</head>
<body>
<img class="circle"
src="https://picsum.photos/150"
alt="Circle">
<img class="shadow"
src="https://picsum.photos/151"
alt="Shadow">
<img class="fade"
src="https://picsum.photos/152"
alt="Opacity">
</body>
</html>Complete CSS Image Styling Example
<!DOCTYPE html>
<html>
<head>
<style>
body{
font-family:Arial,sans-serif;
background:#f5f9ff;
text-align:center;
}
.gallery{
display:flex;
justify-content:center;
gap:20px;
flex-wrap:wrap;
margin-top:30px;
}
.gallery img{
width:220px;
border-radius:12px;
border:3px solid white;
box-shadow:0 4px 12px rgba(0,0,0,.25);
transition:.3s;
}
.gallery img:hover{
transform:scale(1.08);
border-color:#007BFF;
}
</style>
</head>
<body>
<h2>Image Gallery</h2>
<div class="gallery">
<img src="https://picsum.photos/220/160?1" alt="Image 1">
<img src="https://picsum.photos/220/160?2" alt="Image 2">
<img src="https://picsum.photos/220/160?3" alt="Image 3">
</div>
</body>
</html>Advantages of CSS Image Styling
Common Mistakes
Beginners often forget to specify image dimensions, stretch images by using incorrect width and height values, forget the alt attribute, or apply fixed image sizes that don’t work well on smaller screens.
<!DOCTYPE html>
<html>
<head>
<style>
/* Incorrect */
img{
width:250;
}
/* Correct */
img{
width:250px;
}
</style>
</head>
<body>
<img src="https://picsum.photos/250/180"
alt="Sample">
</body>
</html>Best Practices
- Always include the alt attribute for every image.
- Use responsive images with max-width:100% and height:auto.
- Compress images to improve page loading speed.
- Use border-radius and box-shadow sparingly for a clean design.
- Apply hover effects only when they improve user experience.
- Use consistent image sizes in galleries and cards.
- Choose high-quality images with appropriate dimensions.
- Test image layouts on desktop, tablet, and mobile devices.
Web Resources on CSS Image Styling
1. MDN Web Docs : CSS images
2. MDN Web Docs : background-image CSS property
3. Florida International University : Using CSS classes to style images on your website
4. Dev.to : CSS Styling Images, From Thumbnails to Polaroids, A Complete Guide
🧪 Test Your CSS Code
Edit the CSS code on the left and click “Run Code” to see the result on the right.
Click “Run Code” to see the result here.