Category: CSS

To use CSS media queries to select max-width OR max-height, we separate the queries by commas.

For instance, we write

@media screen and (max-width: 995px), screen and (max-height: 700px) {
  //...
}

to select screen sizes with max width 995px or max height 700px.

To import a regular CSS file into a SCSS file, we use @import.

For instance, we write

@import "path/to/file";

to use @import to import the "path/to/file" CSS file into our SCSS file.

To add CSS font border, we add the text-stroke property.

For instance, we write

h1 {
  -webkit-text-stroke: 2px black;
  font-family: sans;
  color: yellow;
}

to set the -webkit-text-stroke property to the border style we want on h1 elements.

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