Text Selection CSS Effects | Color, Background, Shadow, Prevent Selection | Day 2 | 50 Days of Intermediate HTML + CSS Projects
Tags: html, tutorial, css, beginners
Published: 2022-08-29 06:44:00

##Style your webpage according to your theme by changing the Text Selection Effects🔥

👉🏻 We will use the parent class `change` within which we will define 4 classes to know the text selection CSS-

1. `change-background-color` - to change background color 
2. `change-color` - to change text color
3. `change-shadow` - to change text shadow color
4. `change-color-shadow-background` - to change text color, shadow and background color.

---

##Default text selection without CSS styling


###HTML
```
<p>
  <b>SELECT ME :</b> This is the default text selection styling.
</p>
```

👉🏻 Here's how it will come up-

![Default text selection styling](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/akkaqzr654wrr2qko61x.jpg)

---
##🎯 Changing text selection color using CSS


###HTML

```
<p class='change change-color'>
  <b>SELECT ME :</b>
  Now the text will show different text color on selection.
</p>
```

We will use the pseudo element
`::selection` for the `<p>`

###CSS

```
.change-color::selection {
  color: rgba(3, 218, 198, 1);
}
```

👉🏻 Here's how it will come up- 🔥

![different text color on selection - dev.to/koustav](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/likm7xbsypln7ld45jbm.jpg)

---

##🎯 Changing text background color on selection using CSS


###HTML
```
<p class='change-background-color'>
  <b>SELECT ME :</b>
  Now the text will show different text background color on selection.
</p>
```

####CSS

```
.change-background-color::selection {
  background-color: #ff8080;
}
```

👉🏻 Here's how it will come up-

![Different background color on selection - dev.to/koustav](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3q7nvg768cnuqn9x1i0c.jpg)

---

##🎯 Changing text shadow on selection using CSS 


###HTML
```
<p class='change-shadow'>
  <b>SELECT ME :</b>
  Now the text will show different text-shadow on selection.
</p>
```

###CSS

```
.change-shadow::selection {
  text-shadow: 1px 1px 0 #ff1a1a;
}
```

👉🏻 Here's how it will come up-

![Different text shadow on selection - dev.to/koustav](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/co6rsnkux2zq7exbo791.jpg)

---

##🎯 Changing text background color, text color and text shadow on selection using CSS


###HTML
```
<p class='change-color-shadow-background'><b>SELECT ME :</b>
  Now the text will show different text-color, text-shadow and text-background-color on selection.
</p>
```
###CSS

```
.change-color-shadow-background::selection {
  text-shadow: 1px 1px 0 #27ae60;
  color: white;
  background-color: #ffd24d;
}
```

👉🏻 Here's how it will come up-

![Changing background color, text color and text shadow - dev.to/koustav](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/shbl26mhtzidcgvxcwx6.jpg)

---

##🎯 Using Universal `::selection`

Instead of using `::selection` in every object, use it only once for the whole body. Make sure your styling is according to your theme.

###CSS

```
::selection
{
  background-color: #121212;
  color: #fffffff;
}
```

---

##❌ Preventing user from selecting text using CSS❗

###CSS

```
{
 -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}
```

---

###Task of the Day 💡

> Make a page in dark mode and a page in light mode and customize the page according to the theme.

---
 
###Tip of the Day 💡

> Using Chrome?
> Use these extensions to make your web styling better-
> 1. [WhatFont](https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm?hl=en) - Check font styles used in any webpage.
> 2. [ColorZilla](https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp?hl=en) - Get the color of any pixel on the page.

---

_Check the series!_
❤️ Happy Coding!
_Follow up for more!_