How to align the last row to the grid with CSS Flexbox?

To align the last row to the grid with CSS Flexbox, we use the :after selector.

For instance, we write

.grid {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.grid::after {
  content: "";
  flex: auto;
}

to add the flex: auto; to the part of the page after the element with class grid to align the last row to the grid.

How to hide an element when printing a web page with CSS?

To hide an element when printing a web page with CSS, we use the @media print query.

For instance, we write

@media print {
  .no-print,
  .no-print * {
    display: none !important;
  }
}

to hide elements with class .no-print and everything inside them with display: none when the page is being printed with the @media print rule.

How to center a position: fixed element with CSS?

To center a position: fixed element with CSS, we set the transform property.

For instance, we write

div {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

to set the left and top to 50% to move the element near the center.

Then we add transform: translate(-50%, -50%); to move the div to the center.

How to use .otf fonts on web browsers with CSS?

To use .otf fonts on web browsers with CSS, we use the @font-face rule.

For instance, we write

@font-face {
  font-family: GraublauWeb;
  src: url("path/GraublauWeb.otf") format("opentype");
}

@font-face {
  font-family: GraublauWeb;
  font-weight: bold;
  src: url("path/GraublauWebBold.otf") format("opentype");
}

to add the fonts with the @font-face rule.

We add the fonts by setting the src property to the font URL.

How to center an image using text-align center with CSS?

To center an image using text-align center with CSS, we set the margin.

For instance, we write

<div style="border: 1px solid black">
  <img class="center" src="https://picsum.photos/300/300" />
</div>

to add a div with an image.

Then we write

img.center {
  display: block;
  margin: 0 auto;
}

to center the image with margin: 0 auto;.

How to add a non-standard font to a website with CSS?

To add a non-standard font to a website with CSS, we use the @font-face rule.

For instance, we write

@font-face {
  font-family: "My Custom Font";
  src: url(http://www.example.org/mycustomfont.ttf) format("truetype");
}
p.customfont {
  font-family: "My Custom Font", Verdana, Tahoma;
}

to add the My Custom Font font with @font-face using the font-family and src properties.

We set src to the font URL with url.

And then we set the font-family to 'My Custom Font' to use it.