Category: 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.

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.

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