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.

How to use CSS to make the HTML page footer stay at bottom of the page with a minimum height, but not overlap the page?

To use CSS to make the HTML page footer stay at bottom of the page with a minimum height, but not overlap the page, we use flexbox.

For instance, we write

<div class="container">
  <header></header>
  <main></main>
  <footer></footer>
</div>

to add a div with some elements inside.

Then we write

.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;
}

to make the div a flex container with display: flex;

We make the flex direction vertical with flex-direction: column;

And we set the min height of the div with min-height: 100vh;

Then we make the main element fill the vertical space not filled by the header and footer elements with flex: 1;.

How to prevent line breaks in list items using CSS?

To prevent line breaks in list items using CSS, we set the white-space and text-overflow properties.

For instance, we write

li {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

to add text-overflow: ellipsis; to add ellipsis after the truncated text.

We add white-space: nowrap; to make the text display on 1 row.

And we add overflow: hidden; to hide any overflowing text.

How to fix CSS text-overflow: ellipsis; not working?

To fix CSS text-overflow: ellipsis; not working, we should apply the text-overflow style to an inline-block element.

For instance, we write

.app a {
  height: 18px;
  width: 140px;
  padding: 0;
  overflow: hidden;
  position: relative;
  display: inline-block;
  margin: 0 5px 0 5px;
  text-align: center;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #000;
}

to make the a elements inline block with display: inline-block;.

Then we can apply the text-overflow: ellipsis; style.

How to vertically align text inside a flexbox with CSS?

To vertically align text inside a flexbox with CSS, we set the align-items property.

For instance, we write

ul {
  height: 100%;
}

li {
  display: flex;
  justify-content: center;
  align-items: center;
  background: silver;
  width: 100%;
  height: 20%;
}

to add align-items: center; to vertically center align the content in the li element.

We make li elements flex containers with display: flex;.