articles

home / developersection / articles / css properties explained: image-rendering, @important, justify-content, and justify-items

CSS Properties Explained: image-rendering, @important, justify-content, and justify-items

CSS Properties Explained: image-rendering, @important, justify-content, and justify-items

Ashutosh Kumar Verma 329 25-Mar-2025

Let us understand each CSS property image-rendering, @important, justify-content, and justify-items with explanations and examples.

 

1. image-rendering (Controlling Image Scaling)

The image-rendering property controls how images are scaled when resized. It affects how browsers handle pixelation, smoothing, and crispness.

Syntax

image-rendering: auto | crisp-edges | pixelated;

Values

Values Description
auto Default behavior, uses browser’s scaling method.
crisp-edges Preserves sharp edges, useful for line art.
pixelated Enlarges pixels without smoothing (ideal for pixel art).

Example: Different Image Rendering Methods

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Image Rendering Example</title>
   <style>
    .auto {
     image-rendering: auto;
 }
 .crisp {
     image-rendering: crisp-edges;
 }
 .pixel {
     image-rendering: pixelated;
 }
   </style>
</head>
<body>
 <div>   
 <img src="https://www.mindstick.com/Images/mindstick-logo.png" class="auto" alt="Default Scaling">
 <img src="https://www.mindstick.com/Images/mindstick-logo.png" class="crisp" alt="Crisp Edges">
 <img src="https://www.mindstick.com/Images/mindstick-logo.png" class="pixel" alt="Pixelated">
 </div>
</body>
</html>

Note:

  • pixelated is useful for retro/pixelated graphics.
  • crisp-edge prevents blurring in small icons.

 

2. @important (Overriding CSS Rules)

The !important rule ensures that the CSS property is applied, even if other rules try to override it.

Syntax

selector {
   property: value !important;
}

Example: Overriding Styles

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Image Rendering Example</title>
   <style>
    p {
     color: blue !important;
 }
 p {
     color: red;
 }
   </style>
</head>
<body>
 <div>   
 <p>This text will be blue, not red.</p>
 </div>
</body>
</html>

Note:

  • !important overrides all other styles, including inline styles.
  • Use sparingly; it makes debugging harder.

 

3. justify-content (Aligning Items in Flexbox)

The justify-content property aligns flex items along the main axis (horizontal for row layout, vertical for column layout).

Syntax

justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;

Values

 

Values Description
flex-start Items align to the start (default).
flex-end Items align to the end.
center Items align to the center.
space-between Items spread out, with space between them.
space-around Items have space around them.
space-evenly Items have equal spacing around them.

Example: Different Justifications

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Aligning Items Example</title>
   <style>
    .flex-container {
     display: flex;
     border: 1px solid black;
     width: 400px;
 }
 .start {
     justify-content: flex-start;
 }
 .center {
     justify-content: center;
 }
 .end {
     justify-content: flex-end;
 }
 .space-between {
     justify-content: space-between;
 }
 .space-around {
     justify-content: space-around;
 }
 .space-evenly {
     justify-content: space-evenly;
 }
   </style>
</head>
<body>
 <div>   
 <div class="flex-container start">
     <div>Item 1</div>
     <div>Item 2</div>
     <div>Item 3</div>
 </div>
 <div class="flex-container center">
     <div>Item 1</div>
     <div>Item 2</div>
     <div>Item 3</div>
 </div>
 <div class="flex-container end">
     <div>Item 1</div>
     <div>Item 2</div>
     <div>Item 3</div>
 </div>
 <div class="flex-container space-between">
     <div>Item 1</div>
     <div>Item 2</div>
     <div>Item 3</div>
 </div>
 </div>
</body>
</html>

Note:

  • Only works inside display: flex; or display: grid; containers.
  • Affects horizontal alignment by default.

 

4. justify-items (Aligning Items in Grid)

The justify-items property aligns grid items along the inline axis (left-to-right in LTR languages).

Syntax

justify-items: start | end | center | stretch;

Values

Values Description
start Aligns items to the start of each grid cell.
end Aligns items to the end.
center Centers items within their grid cells.
stretch Stretches items to fill their grid cell (default).

Example: Different justify-items Alignments

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>justify-items Example</title>
   <style>
    .grid-container {
     display: grid;
     grid-template-columns: repeat(3, 100px);
     width: 300px;
     border: 1px solid black;
 }
 .start {
     justify-items: start;
 }
 .center {
     justify-items: center;
 }
 .end {
     justify-items: end;
 }
 .stretch {
     justify-items: stretch;
 }
   </style>
</head>
<body>
 <div>   
 <div class="grid-container start">
     <div>Item 1</div>
     <div>Item 2</div>
     <div>Item 3</div>
 </div>
 <div class="grid-container center">
     <div>Item 1</div>
     <div>Item 2</div>
     <div>Item 3</div>
 </div>
 <div class="grid-container stretch">
     <div>Item 1</div>
     <div>Item 2</div>
     <div>Item 3</div>
 </div>
 </div>
</body>
</html>

Note:

  • Only display: grid; works inside a container.
  • Affects individual items inside each grid cell.

 

Also, read: CSS Properties text-decoration, text-emphasis, text-overflow, transform, and vertical-align


Updated 25-Mar-2025

Hi! This is Ashutosh Kumar Verma. I am a software developer at MindStick Software Pvt Ltd since 2021. I have added some new and interesting features to the MindStick website like a story section, audio section, and merge profile feature on MindStick subdomains, etc. I love coding and I have good knowledge of SQL Database.

Leave Comment

Comments

Liked By