How to reset/remove CSS styles for element only?

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.

How to place the border inside of div and not on its edge with CSS?

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;.

How to change the styles of an img src SVG with CSS?

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.

How to add CSS transition shorthand with multiple properties?

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.

How to word-wrap in an HTML table with CSS?

To word-wrap in an HTML table with CSS, we set the word-wrap property.

For instance, we write

<table style="table-layout: fixed; width: 100%">
  <tr>
    <td style="word-wrap: break-word">
      LongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongWord
    </td>
  </tr>
</table>

to set the word-wrap property to break-word to break long words into new lines.

How to change color of PNG image via CSS?

To change color of PNG image via CSS, we use the filter property.

For instance, we write

<img src="https://picsum.photos/30/30" />

to add the img element.

Then we write

img {
  filter: invert(48%) sepia(13%) saturate(3207%) hue-rotate(130deg)
    brightness(95%) contrast(80%);
}

to set the filter property to add the filters we want to the image.

We set the sepai tone, invert the colors, set the bright and contrast, and rotate the hue.

How to expand a div to fill the remaining width with CSS?

To expand a div to fill the remaining width with CSS, we use flexbox.

For instance, we write

<div style="background: #bef">Tree</div>
<div class="second" style="background: #ff9">View</div>

to add 2 divs.

Then we write

html,
body {
  height: 100%;
}
body {
  display: flex;
}
.second {
  flex-grow: 1;
}

to make the body element a flex container with display: flex;.

And we make the div with class second fill the remaining width of the body element with flex-grow: 1;.

How to set the table column width constant regardless of the amount of text in its cells with CSS?

To set the table column width constant regardless of the amount of text in its cells with CSS, we set the width of the col element.

For instance, we write

<table>
  <colgroup>
    <col style="width: 40%" />
    <col style="width: 30%" />
    <col style="width: 30%" />
  </colgroup>
  <tbody>
    ...
  </tbody>
</table>

to set the col element to have width 40% and 30%.

Then the cells in each column will follow the width if the col element is in the same position as the td in the row.

How to set the equivalent of a src attribute of an img tag in CSS?

To set the equivalent of a src attribute of an img tag in CSS, we set the content property.

For instance, we write

<img class="myClass123" />

to add the img element.

Then we write

.myClass123 {
  content: url("https://picsum.photos/30/30");
}

to select the img element with class myClass123 and set its image URL with content: url("https://picsum.photos/30/30");.

How to affect other elements when one element is hovered with CSS?

To affect other elements when one element is hovered with CSS, we use the :hover pseudoclass.

For instancne, we write

#container:hover #cube {
  background-color: yellow;
}

to select the element with ID container when we hover over it with #container:hover.

And we select the element with ID cube inside and set its background color to yellow.