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

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

articles

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

Ashutosh Kumar Verma

Leave Comment

Comments

Liked By