Category: CSS

To make Flexbox children 100% height of their parent with CSS. we set the align-items property.

For instance, we write

.flex-2 {
  display: flex;
  align-items: stretch;
}

to make the element with class flex-2 a flex container with display: flex;.

We make the elements inside stretch to fit the height of the parent with align-items: stretch;.

To remove the border highlight on an input text element with CSS, we set the outline property.

For instance, we write

input {
  outline: none;
}

to set outline to none on the input elements to remove their border.

To target only Firefox with CSS, we use @supports.

For instance, we write

@supports (-moz-appearance: none) {
  h1 {
    color: red;
  }
}

to target Firefox with @supports (-moz-appearance: none).

And we set h1 elements to have color red when in Firefox only.

To remove blue underline from link with CSS, we set the text-decoration property.

For instance, we write

a {
  color: #ffffff;
  text-decoration: none;
}

to select a elements and remove their blue underline with text-decoration: none;.

To add outline radius to a div with CSS, we add the border and border-radius propeties.

For instance, we write

<div></div>

to add a div.

Then we write

div {
  background: #999;
  height: 100px;
  width: 200px;
  border: #999 solid 1px;
  border-radius: 10px;
  margin: 15px;
  box-shadow: 0px 0px 0px 1px #fff inset;
}

to add the border-radius to make the corners rounded.

And we set the border property to the border styles to show the border with rounded corners.