Category: CSS

To right align div elements with CSS, we use flexbox.

For instance, we write

<div style="display: flex; justify-content: flex-end">
  <div>I'm on the right</div>
</div>

to make the outer div a flex container with display: flex.

And we align the elements inside it to the right with justify-content: flex-end.

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.

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

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.

To prevent body scrolling but allow overlay scrolling with CSS, we set the overscroll-behavior property.

For instance, we write

.overlay {
  overscroll-behavior: contain;
}

to add overscroll-behavior: contain; to prevent body scrolling but allow overlay scrolling with CSS.