The Web Dev

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

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.

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

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.

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.