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 convert an image to grayscale in HTML/CSS?

To convert an image to grayscale in HTML/CSS, we set the filter property.

For instance, we write

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

to add an img element.

Then we write

img {
  -webkit-filter: grayscale(1);
  filter: grayscale(1);
}

to set the filter and -webkit-filter property to grayscale(1) to make the image grayscale.

How to fix stylesheet not loaded because of MIME-type with HTML?

To fix stylesheet not loaded because of MIME-type with HTML, we should make sure the link element has the right attributes.

For instance, we write

<link rel="stylesheet" src="dist/photoswipe.css" />

to add a link element with the rel attribute set toi stylesheet.

And we set the stylesheet URL as the value of the src attribute.

How to make Bootstrap columns all the same height with HTML?

Sometimes, we want to make Bootstrap columns all the same height with HTML.

In this article, we’ll look at how to make Bootstrap columns all the same height with HTML.

How to make Bootstrap columns all the same height with HTML?

To make Bootstrap columns all the same height with HTML, we use the flexbox classes.

For instance, we write

<div class="container">
  <div class="row">
    <div class="col-md-4" style="background-color: red">some content</div>
    <div class="col-md-4" style="background-color: yellow">
      catz
      <img width="100" height="100" src="https://placekitten.com/100/100/" />
    </div>
    <div class="col-md-4" style="background-color: green">
      some more content
    </div>
  </div>
</div>

to add the container class to make the outer div a flex container.

Then we add the row and column classes to make the inner divs rows and columns with the same height.

Conclusion

To make Bootstrap columns all the same height with HTML, we use the flexbox classes.

How to hide the HTML5 number input’s spin box with CSS?

Sometimes, we want to hide the HTML5 number input’s spin box with CSS.

In this article, we’ll look at how to hide the HTML5 number input’s spin box with CSS.

How to hide the HTML5 number input’s spin box with CSS?

To hide the HTML5 number input’s spin box with CSSm we set a few styles.

For instance, we write

<input type="number" step="0.01" />

to add a number input.

Then we hide the spin box with

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
}

to use -webkit-appearance: none; to hide the spin box.

We use -moz-appearance: textfield; to hide the spin box in Firefox.

Conclusion

To hide the HTML5 number input’s spin box with CSSm we set a few styles.

How to make a placeholder for a select box with HTML?

Sometimes, we want to make a placeholder for a select box with HTML.

In this article, we’ll look at how to make a placeholder for a select box with HTML.

How to make a placeholder for a select box with HTML?

To make a placeholder for a select box with HTML, we add a disabled option into the drop down.

For instance, we write

<label
  >Option name
  <select>
    <option value="" disabled selected>Select your option</option>
    <option value="hurr">Durr</option>
  </select>
</label>

to add a disabled option as the first option.

We make it selected by default with the selected attribute.

Conclusion

To make a placeholder for a select box with HTML, we add a disabled option into the drop down.