Interactive Programming Education Platform

Logic Practice

CSS Images

BLUF: Styling is what brings the web to life, and mastering CSS Images is key to creating beautiful, responsive interfaces. This tutorial breaks down the concepts and syntax you need to succeed with CSS.

Visual Design Hack: CSS Images

CSS is all about presentation. Discover how CSS Images works to transform plain HTML into a premium user experience in the guide below.

Images play a crucial role in web development. CSS offers robust attributes to manage the display, design, and placement of images on websites.

Image Styling Properties

CSS offers several properties to style images:

✅ border - Add borders around images
✅ border-radius - Create rounded corners
✅ opacity - Control image transparency
✅ width/height - Set image dimensions
✅ max-width - Make images responsive

Let's explore different image styling techniques:

Thumbnail Image

Generate bordered thumbnail images by utilizing the CSS property known as the border.

Example


<!DOCTYPE html>
<html>
<head>
    <style>
        img {
            border: 2px solid #3498db;
            border-radius: 5px;
            padding: 10px;
        }
        h2 {
            color: #3498db;
        }
    </style>
</head>
<body>
    <h1>Thumbnail Image</h1>
    <img src="https://placehold.co/200x150/1abc9c/ffffff?text=Sample+Image" alt="Sample">
    <h2>Welcome to C# Programming</h2>
</body>
</html>

Transparent Image

Utilize the opacity attribute to achieve image transparency. The accepted range of values is from 0.0 (completely transparent) to 1.0 (fully opaque):

Example


<!DOCTYPE html>
<html>
<head>
    <style>
        img {
            border: 2px solid #e74c3c;
            border-radius: 5px;
            padding: 10px;
            opacity: 0.5;
        }
        img:hover {
            opacity: 1.0;
        }
        h2 {
            color: #e74c3c;
        }
    </style>
</head>
<body>
    <h1>Transparent Image</h1>
    <p>Hover over the image to see full opacity</p>
    <img src="https://placehold.co/800x600/1abc9c/ffffff?text=Sample+Image" alt="Transparent">
    <h2>Welcome to C# Programming</h2>
</body>
</html>

Rounded Image

The border-radius attribute generates curved edges. Employ 50% to achieve circular images:

Example


<!DOCTYPE html>
<html>
<head>
    <style>
        #img1 {
            border: 2px solid #2ecc71;
            border-radius: 15px;
            padding: 5px;
        }
        #img2 {
            border: 2px solid #2ecc71;
            border-radius: 50%;
            padding: 5px;
            width: 200px;
            height: 200px;
            object-fit: cover;
        }
        h2 {
            color: #2ecc71;
        }
    </style>
</head>
<body>
    <h1>Rounded Image</h1>
    <img src="https://placehold.co/300x300/1abc9c/ffffff?text=Sample+Image" id="img1" alt="Rounded">
    <h2>Welcome to C# Programming</h2>
    
    <h1>Circle Image</h1>
    <img src="https://placehold.co/300x300/1abc9c/ffffff?text=Sample+Image" id="img2" alt="Circle">
    <h2>Welcome to C# Programming</h2>
</body>
</html>

Border Radius Properties:

✅ border-radius - Sets all four corners
✅ border-top-left-radius - Top-left corner only
✅ border-top-right-radius - Top-right corner only
✅ border-bottom-left-radius - Bottom-left corner only
✅ border-bottom-right-radius - Bottom-right corner only

Responsive Image

Make images responsive to different screen sizes by utilizing CSS media queries and the viewport meta tag.

Example


<!DOCTYPE html>
<html>
<head>
    <style>
        #img1 {
            max-width: 100%;
            height: auto;
            border: 2px solid #9b59b6;
        }
        h2 {
            color: #9b59b6;
        }
    </style>
</head>
<body>
    <h1>Responsive Image</h1>
    <h2>Resize the browser window to see the effect</h2>
    <img src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" id="img1" alt="Responsive">
    <h2>Welcome to C# Programming</h2>
</body>
</html>

Main Highlights:

✅ Implementing max-width: 100% ensures that the image does not extend beyond the boundaries of its container
✅ Using height: auto helps in preserving the aspect ratio of the image
✅ The image automatically resizes to fit smaller screens without distortion

Center an Image

Center images horizontally by employing the CSS properties display: block; and margin: auto;.

Example


<!DOCTYPE html>
<html>
<head>
    <style>
        #img1 {
            margin-left: auto;
            margin-right: auto;
            display: block;
            border: 3px solid #f39c12;
        }
        h1, h2 {
            text-align: center;
            color: #f39c12;
        }
    </style>
</head>
<body>
    <h1>Centered Image</h1>
    <img src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" id="img1" alt="Centered">
    <h2>Welcome to C# Programming</h2>
</body>
</html>

Reasons for functionality:

✅ display: block - Converts the image into a block-level element
✅ margin: auto - Ensures even distribution of space on both horizontal sides

Best Practices

Always include alt attributes for accessibility
Use max-width: 100% for responsive images
Optimize image file sizes for faster loading
Use appropriate formats (JPEG for photos, PNG for graphics)
Consider lazy loading for images below the fold

Key Takeaways

✅ CSS provides extensive control over image styling
✅ border-radius creates rounded/circular images
✅ opacity controls transparency
✅ max-width: 100% makes images responsive
✅ margin: auto centers images horizontally

Image Styling Properties

Thumbnail Image

Transparent Image

Rounded Image

Border Radius Properties:

Responsive Image

Center an Image

Best Practices

Key Takeaways

Input Required