Category: CSS

Sometimes, we want to apply CSS to half of a character.

In this article, we’ll look at how to apply CSS to half of a character.

How to apply CSS to half of a character?

To apply CSS to half of a character, we set the background.

For instance, we write

h1 {
  display: inline-block;
  margin: 0;
  line-height: 1em;
  font-family: helvetica, arial, sans-serif;
  font-weight: bold;
  font-size: 300px;
  background: linear-gradient(to right, #7db9e8 50%, #1e5799 50%);
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

to set the background property to set the background to a gradient for the h1 element.

Then we set background-clip to text to make the background apply to the text.

Conclusion

To apply CSS to half of a character, we set the background.

Sometimes, we want to disable the resizable property of a textarea with CSS.

In this article, we’ll look at how to disable the resizable property of a textarea with CSS.

How to disable the resizable property of a textarea with CSS?

To disable the resizable property of a textarea with CSS, we set the resize property.

For instance, we write

textarea {
  resize: none;
}

to disable resizing of the textarea with resize: none;.

Conclusion

To disable the resizable property of a textarea with CSS, we set the resize property.

Sometimes, we want to set cellpadding and cellspacing in CSS.

In this article, we’ll look at how to set cellpadding and cellspacing in CSS.

How to set cellpadding and cellspacing in CSS?

To set cellpadding and cellspacing in CSS, we set the padding and border properties.

For instance, we write

td {
  padding: 10px;
}

table {
  border-spacing: 10px;
  border-collapse: separate;
}

to add cell spacing with the border-spacing property.

border-collapse: separate; is required to apply border-spacing

And we add cell padding with the padding property for td’s.

Conclusion

To set cellpadding and cellspacing in CSS, we set the padding and border properties.

Sometimes, we want to select the CSS parent element

In this article, we’ll look at how to select the CSS parent element.

How to select the CSS parent element?

To select the CSS parent element, we use the has selector.

For instance, we write

li:has(> a.active) {
  /*...*/
}

to select the li’s that has a elements with the active class.

Conclusion

To select the CSS parent element, we use the has selector.

Sometimes, we want to change an HTML5 input’s placeholder color with CSS.

In this article, we’ll look at how to change an HTML5 input’s placeholder color with CSS.

How to change an HTML5 input’s placeholder color with CSS?

To change an HTML5 input’s placeholder color with CSS, we use the ::placeholder selector.

For instance, we write

::placeholder {
  color: #909;
}

to set the input placeholder’s color to #909.

Conclusion

To change an HTML5 input’s placeholder color with CSS, we use the ::placeholder selector.