The Web Dev

To add CSS transition shorthand with multiple properties, we combine them all the values into one.

For instance, we write

div {
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

to set the transition property to all 0.3s ease-out;.

all is the property.

0.3s is the duration.

ease-out is the timing function.

To change the styles of an img src SVG with CSS, we set the mask property.

For instance, we write

<div class="logo"></div>

to add a div.

Then we write

.logo {
  background-color: red;
  -webkit-mask: url(logo.svg) no-repeat center;
  mask: url(logo.svg) no-repeat center;
}

to set the mask property to the svg URL to render the svg in the div.

To place the border inside of div and not on its edge with CSS. we set the box-sizing property.

For instance, we write

<div>Hello!</div>
<div>Hello!</div>

to add divs.

Then we write

div {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  width: 100px;
  height: 100px;
  border: 20px solid #f00;
  background: #00f;
  margin: 10px;
}

to set box-sizing to border-box to put the border inside the divs.

We add the border with border: 20px solid #f00;.

To reset/remove CSS styles for element only, we set the all property.

For instance, we write

#someselector {
  all: initial;
}

#someselector * {
  all: unset;
}

to select the element with ID someselector and the elements inside.

We use all: initial; to reset the styles for the element with ID someselector.

And we use all: unset; to reset the styles for the elements inside the element with ID someselector.