The Web Dev

Sometimes, we want to style a select dropdown with only CSS.

In this article, we’ll look at how to style a select dropdown with only CSS.

How to style a select dropdown with only CSS?

To style a select dropdown with only CSS, we set the appearance property.

For instance, we write

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url(...);
}

to set appearance to none to remove the default select arrow.

Then we set the background-image property to add our own arrow.

Conclusion

To style a select dropdown with only CSS, we set the appearance property.

Sometimes, we want to vertically align text in a div with CSS.

In this article, we’ll look at how to vertically align text in a div with CSS.

How to vertically align text in a div with CSS?

To vertically align text in a div with CSS, we use flexbox.

For instance, we write

<ul>
  <li>
    <p>Some Text</p>
  </li>
  <li>
    <p>A bit more text that goes on two lines</p>
  </li>
  <li>
    <p>Even more text that demonstrates how lines can span multiple lines</p>
  </li>
</ul>

to add some elements.

Then we write

li {
  display: flex;
  justify-content: center;
  align-content: center;
  flex-direction: column;
}

to make the li elements flex containers with display: flex;.

And then we set the flex direction to vertical with flex-direction: column;.

We vertically center content with justify-content: center;.

And we horizontally center content with align-content: center;

Conclusion

To vertically align text in a div with CSS, we use flexbox.

Sometimes, we want to center an absolutely positioned element in a div with CSS.

In this article, we’ll look at how to center an absolutely positioned element in a div with CSS.

How to center an absolutely positioned element in a div with CSS?

To center an absolutely positioned element in a div with CSS, we use flexbox.

For instance, we write

div {
  display: flex;
  align-items: center;
  justify-content: center;
}

to make the div a flex container with display: flex;.

We vertically center its content with align-items: center;.

And we horizontally center its content with justify-content: center;.

Conclusion

To center an absolutely positioned element in a div with CSS, we use flexbox.

Sometimes, we want to combine a background-image and CSS3 gradient on the same element.

In this article, we’ll look at how to combine a background-image and CSS3 gradient on the same element.

How to combine a background-image and CSS3 gradient on the same element?

To combine a background-image and CSS3 gradient on the same element, we use the background property.

For instance, we write

body {
  background: url("IMAGE_URL") no-repeat left top,
    linear-gradient(#eb01a5, #d13531);
}

to set the background property to the background imae URL with url("IMAGE_URL").

And we add the gradient with linear-gradient(#eb01a5, #d13531).

Conclusion

To combine a background-image and CSS3 gradient on the same element, we use the background property.

Sometimes, we want to align content of a div to the bottom with CSS.

In this article, we’ll look at how to align content of a div to the bottom with CSS.

How to align content of a div to the bottom with CSS?

To align content of a div to the bottom with CSS, we use flexbox.

For instance, we write

div.parent {
  display: flex;
  height: 100%;
}

span.child {
  display: inline-block;
  align-self: flex-end;
}

to make the parent div a flex container with display: flex;.

And we align the child span at the bottom of the div with align-self: flex-end;.

Conclusion

To align content of a div to the bottom with CSS, we use flexbox.