In this article you will learn five unique and useful CSS tricks.
<h2 id="heading-1-disable-a-link">1. Disable a link.</h2>
<pre><code class="lang-css">.inactive-link{
 pointer-events : none;
 cursor : default;
}
</code></pre>
You can disable any link by using the CSS code above.
<h2 id="heading-2-disable-text-selection">2. Disable text selection.</h2>
<pre><code class="lang-css">.prevent-select{
user-select : none;
}
</code></pre>
Setting user-select CSS property to none disables text selection.
<h2 id="heading-3making-an-image-fit">3.Making an image fit.</h2>
<pre><code class="lang-css">img{ 
height : 100%;
width : 100%;
object-fit : contain;
}
</code></pre>
The object-fit property defines how the image or video should be resized to fit it's container
<h2 id="heading-4-resize-image-to-fit">4. Resize image to fit.</h2>
<pre><code class="lang-css">img{
max-width : 100%;
height : auto;
}
</code></pre>
This CSS code is used to ensure that an image is displayed at its maximum width without distorting its aspect ratio.
<h2 id="heading-disable-textarea-resize">Disable Textarea resize.</h2>
<pre><code class="lang-css">textarea{
resize : none;
}
</code></pre>
This CSS code is used to disable the ability of a user to resize a textarea element. This is useful in cases where you want to limit the amount of text a user can input into a specific field, or if you want to ensure that the layout of the page remains consistent.
Thank You.

In this article you will learn five unique and useful CSS tricks.

## 1\. Disable a link.

```css
.inactive-link{
  pointer-events : none;
  cursor : default;
}
```

You can disable any link by using the CSS code above.

## 2\. Disable text selection.

```css
.prevent-select{
user-select : none;
}
```

Setting ***user-select*** CSS property to *none* disables text selection.

## 3.Making an image fit.

```css
img{ 
height : 100%;
width : 100%;
object-fit : contain;
}
```

The object-fit property defines how the image or video should be resized to fit it's container

## 4\. Resize image to fit.

```css
img{
max-width : 100%;
height : auto;
}
```

This CSS code is used to ensure that an image is displayed at its maximum width without distorting its aspect ratio.

## Disable Textarea resize.

```css
textarea{
resize : none;
}
```

This CSS code is used to disable the ability of a user to resize a ***textarea*** element. This is useful in cases where you want to limit the amount of text a user can input into a specific field, or if you want to ensure that the layout of the page remains consistent.

Thank You.

5 CSS tricks that you should know

1. Disable a link.

5 CSS tricks that you should know

Table of contents

1. Disable a link.

2. Disable text selection.

3.Making an image fit.

4. Resize image to fit.

Disable Textarea resize.