The Web Dev

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.

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

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