10 Helpful CSS Tips
Tags: webdev, css, html, beginners
Published: 2021-04-28 18:29:09

These are 10 small CSS tips that can actually help you in projects. If you would like to request more tips, let me know in the comments section.

---

<h1 id="smooth-scrolling">1. Smooth Scrolling</h1>
When you visit some websites and try to go to different sections, it scrolls smoothly to that section. You can achieve this feature on your website by using one line of CSS.

**Note:** this will not work in Safari!
```css
html {
  scroll-behavior: smooth;
}
```

## Live Example
{% codepen https://codepen.io/mrwolferinc/pen/BapbJKK %}

---

# 2. Prevent `<textarea>` Resize
You can use the `resize` property to prevent a `<textarea>` element from being resized (or limit it to one axis).
```css
textarea.no-resize {
  resize: none;
}

textarea.horizontal-resize {
  resize: horizontal;
}

textarea.vertical-resize {
  resize: vertical;
}
```

## Live Example
{% codepen https://codepen.io/mrwolferinc/pen/poRYpVL default-tab=css,result %}

---

# 3. Drop Cap
You can add a drop cap to a paragraph by using the `::first-letter` pseudo-element.
```css
::first-letter {
  font-size: 250%;
}
```

## Live Example
{% codepen https://codepen.io/mrwolferinc/pen/qBRvxZO %}

---

# 4. Drop Shadow
You can use the `drop-shadow()` filter effect on transparent images. It will give a much better shadow effect than using the `box-shadow` property.
```css
img {
  filter: drop-shadow(0 0 3px #000);
}
```

## Live Example
{% codepen https://codepen.io/mrwolferinc/pen/bGgJwjq %}

---

# 5. Center Any `<div>` Element
It can sometimes be difficult to center a `<div>` element on the page, but not with this tip. You can center any `<div>` element on the page using a few lines of CSS code.
```css
body {
  display: grid;
  place-items: center;
}
```

## Live Example
{% codepen https://codepen.io/mrwolferinc/pen/NWdmbRy %}

---

# 6. Input Caret Color
You can use the `caret-color` property to change the color of the input field caret.
```css
input {
  caret-color: red;
}
```

## Live Example
{% codepen https://codepen.io/mrwolferinc/pen/xxgeRYG %}

---

# 7. Prevent Highlighting
This one is similar to #2, but you can use the `user-select` property to prevent an element from being highlighted by the user.
```css
.no-highlight {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
```

## Live Example
{% codepen https://codepen.io/mrwolferinc/pen/zYNXobv %}

---

# 8. Input Range Pseudo-Classes
The lesser-known `:in-range` and `:out-of-range` pseudo-classes can help you validate an `<input>` element whose current value is within the range specified by its `min` and `max` attributes.
```css
input:in-range {
  background: rgba(0, 255, 0, .25);
}

input:out-of-range {
  background: rgba(255, 0, 0, .25);
}
```

## Live Example
{% codepen https://codepen.io/mrwolferinc/pen/poRBMGd %}

---

# 9. Image Overlay
You can create an image overlay using the `object-fit` property. This can prove to be useful when you want to create a hero image on your website.
```css
.image-overlay img:only-of-type:nth-child(1) {
  object-fit: cover;
  opacity: .4;
}
```

## Live Example
{% codepen https://codepen.io/mrwolferinc/pen/abproKb %}

---

# 10. The `transition` Property
You might know this one already, but what if I told you that there was a way to animate elements without the use of keyframes? The `transition` property allows you to define the transition between two states of an element. It is mostly used for hover animations.
```css
a {
  color: #0d6efd;
  text-decoration: none;
  -webkit-transition: .15s ease-in-out;
  -moz-transition: .15s ease-in-out;
  transition: .15s ease-in-out;
}

a:hover {
  color: #0a58ca;
}
```

## Live Example
{% codepen https://codepen.io/mrwolferinc/pen/RwKmbzZ %}