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;
ordisplay: 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
Leave Comment